這篇文章將為大家詳細(xì)講解有關(guān)如何理解ajax，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)建站是專業(yè)的正鑲白網(wǎng)站建設(shè)公司，正鑲白接單;提供成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行正鑲白網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

什么是Ajax

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

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

ajax的理解(一)

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

Ajax是Asynchronous Javascript And XML的縮寫。

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

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

    var xhr =  new XMLHttpRequest()

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

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

    屬性

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

    方法

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

ajax的理解（二）

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

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

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

2、將鍵值對轉(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       請求方法      get和post          默認(rèn)get
  data            鍵值對         {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方式時 將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();

關(guān)于如何理解ajax就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。