DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> 談談你對aja的理解(一、二)
談談你對aja的理解(一、二)
編輯:AJAX基礎知識     

什麼是Ajax

Ajax是Asynchronous JavaScript and XML的縮寫,這一技術能夠向服務器請求額外的數據而無需卸載整個頁面,會帶來良好的用戶體驗。傳統的HTTP請求流程大概是這樣的,浏覽器向服務器發送請求-〉服務器根據浏覽器傳來數據生成response-〉服務器把response返回給浏覽器-〉浏覽器刷新整個頁面顯示最新數據,這個過程是同步的,順序執行。

AJAX 在浏覽器與 Web 服務器之間使用異步數據傳輸(HTTP 請求)從服務器獲取數據,這裡的異步是指脫離當前浏覽器頁面的請求、加載等單獨執行,這意味著可以在不重新加載整個網頁的情況下,通過JavaScript接受服務器傳來的數據,然後操作DOM將新數據對網頁的某部分進行更新,使用Ajax最直觀的感受是向服務器獲取新數據不需要刷新頁面等待了。

ajax的理解(一)

Ajax是Asynchronous Javascript And XML的縮寫。 作用:通過Ajax可以使用Javascript語句來調用XMLHttpRequest對象,直接與服務器進行通訊,可以在不重載頁面的情況下與服務器交換數據。 1、創建XML

Ajax是Asynchronous Javascript And XML的縮寫。

作用:通過Ajax可以使用Javascript語句來調用XMLHttpRequest對象,直接與服務器進行通訊,可以在不重載頁面的情況下與服務器交換數據。

1、創建XMLHttpRequest對象

    var xhr =  new XMLHttpRequest()

對於IE早期版本(IE7及以下版本)使用,new ActiveXObject(\"Microsoft.XMLHTTP\")、new ActiveXObject(\"Msxml2.XMLHTTP\")等方式創建對象

2、XMLHttpRequest對象常用屬性和常用方法

    屬性

    readystate       返回XMLHTTP請求的當前狀態碼
    state               返回當前請求的HTTP狀態碼
    statusText       返回HTTP狀態碼對應的文本

    方法

    onreadystatechange    監聽readystate和state狀態

ajax的理解(二)

ajax方法:通過 HTTP 請求加載遠程數據
get方法: 通過遠程 HTTP GET 請求載入信息
post方法:通過遠程 HTTP POST 請求載入信息

1、創建XMLHttpRequest對象

function createXHR() {
   return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

2、將鍵值對轉換成拼接串

  function params(data) {
   var a = [];
   for (var i in data) {
    a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
   }
   return a.join("&");
  }

3、封裝ajax方法

    參數

method       請求方法      get和post          默認get
  data            鍵值對         {key:value}
  url               鏈接地址
  cache           緩存           true   和  false    默認true帶緩存
  success       成功             error           異常

function ajax(args) {
   var xhr = createXHR();
   var data = http://www.cnblogs.com/kuikui/archive/2012/01/12/params(args.data);
   if (/get/i.test(args.method)) { // 當為get方式時 將data直接拼接到url後
    args.url += "?" + data;
   }
   if (!args.cache) {  //無緩存
    if (args.url.indexOf("?") < 0) { //當無參數data
     args.url += "?";
    }
    args.url += "&" + (new Date()); // Math.random();
   }
   xhr.open(args.method, args.url, true);
   xhr.onreadystatechange = function () {
    if (4 == xhr.readyState && 200 == xhr.status) {
     args.success(xhr.responseText, xhr.responseXML);
    }
    else {
     args.error();
    }
   }
   if (/post/i.test(args.method)) {
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(data);
   }
   else {
    xhr.send();

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved