什么是Ajax

Ajax是Asynchronous JavaScript and XML的縮寫(xiě)，這一技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)需卸載整個(gè)頁(yè)面，會(huì)帶來(lái)良好的用戶(hù)體驗(yàn)。傳統(tǒng)的HTTP請(qǐng)求流程大概是這樣的，瀏覽器向服務(wù)器發(fā)送請(qǐng)求-〉服務(wù)器根據(jù)瀏覽器傳來(lái)數(shù)據(jù)生成response-〉服務(wù)器把response返回給瀏覽器-〉瀏覽器刷新整個(gè)頁(yè)面顯示最新數(shù)據(jù)，這個(gè)過(guò)程是同步的，順序執(zhí)行。

AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求）從服務(wù)器獲取數(shù)據(jù)，這里的異步是指脫離當(dāng)前瀏覽器頁(yè)面的請(qǐng)求、加載等單獨(dú)執(zhí)行，這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，通過(guò)JavaScript接受服務(wù)器傳來(lái)的數(shù)據(jù)，然后操作DOM將新數(shù)據(jù)對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新，使用Ajax最直觀(guān)的感受是向服務(wù)器獲取新數(shù)據(jù)不需要刷新頁(yè)面等待了。

ajax的理解(一)

Ajax是Asynchronous Javascript And XML的縮寫(xiě)。 作用：通過(guò)Ajax可以使用Javascript語(yǔ)句來(lái)調(diào)用XMLHttpRequest對(duì)象，直接與服務(wù)器進(jìn)行通訊，可以在不重載頁(yè)面的情況下與服務(wù)器交換數(shù)據(jù)。 1、創(chuàng)建XML

Ajax是Asynchronous Javascript And XML的縮寫(xiě)。

作用：通過(guò)Ajax可以使用Javascript語(yǔ)句來(lái)調(diào)用XMLHttpRequest對(duì)象，直接與服務(wù)器進(jìn)行通訊，可以在不重載頁(yè)面的情況下與服務(wù)器交換數(shù)據(jù)。

1、創(chuàng)建XMLHttpRequest對(duì)象

    var xhr =  new XMLHttpRequest()

對(duì)于IE早期版本（IE7及以下版本）使用，new ActiveXObject(\"Microsoft.XMLHTTP\")、new ActiveXObject(\"Msxml2.XMLHTTP\")等方式創(chuàng)建對(duì)象

2、XMLHttpRequest對(duì)象常用屬性和常用方法

    屬性

    readystate       返回XMLHTTP請(qǐng)求的當(dāng)前狀態(tài)碼
    state               返回當(dāng)前請(qǐng)求的HTTP狀態(tài)碼
    statusText       返回HTTP狀態(tài)碼對(duì)應(yīng)的文本

    方法

    onreadystatechange    監(jiān)聽(tīng)readystate和state狀態(tài)

ajax的理解（二）

ajax方法：通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)
get方法： 通過(guò)遠(yuǎn)程 HTTP GET 請(qǐng)求載入信息
post方法：通過(guò)遠(yuǎn)程 HTTP POST 請(qǐng)求載入信息

1、創(chuàng)建XMLHttpRequest對(duì)象

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

2、將鍵值對(duì)轉(zhuǎn)換成拼接串

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

3、封裝ajax方法

    參數(shù)

method       請(qǐng)求方法      get和post          默認(rèn)get
  data            鍵值對(duì)         {key:value}
  url               鏈接地址
  cache           緩存           true   和  false    默認(rèn)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)) { // 當(dāng)為get方式時(shí) 將data直接拼接到url后
    args.url += "?" + data;
   }
   if (!args.cache) {  //無(wú)緩存
    if (args.url.indexOf("?") < 0) { //當(dāng)無(wú)參數(shù)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();

最新評(píng)論