談?wù)勀銓?duì)aja的理解(一、二)

什么是Ajax

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

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

ajax的理解(一)

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

Ajax是Asynchronous Javascript And XML的縮寫。

作用：通過Ajax可以使用Javascript語句來調(diào)用XMLHttpRequest對(duì)象，直接與服務(wù)器進(jìn)行通訊，可以在不重載頁面的情況下與服務(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)聽readystate和state狀態(tài)

ajax的理解（二）

ajax方法：通過 HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)
get方法： 通過遠(yuǎn)程 HTTP GET 請(qǐng)求載入信息
post方法：通過遠(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) {  //無緩存
    if (args.url.indexOf("?")  0) { //當(dāng)無參數(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();