AJAX總結(jié)

1.什么是ajax,為什么要使用ajax?
ajax是“Asynchronous JavaScript and XML”的縮寫。它是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。
ajax包含下列技術:
基于web標準(standards-basedpressentation)XHTML+CSS的表示;
使用DOM(document objectModel)進行動態(tài)顯示及交互;
使用XML和XSLT進行數(shù)據(jù)交換及相關操作;
使用XMLHttpRequest進行異步數(shù)據(jù)查詢、檢索;
使用JavaScript將所有的東西綁定在一起。

2.ajax最大的特點。
ajax可以實現(xiàn)動態(tài)不刷新(局部刷新)
就是能在不更新整個頁面的前提下維護數(shù)據(jù)。這使得Web應用程序更為迅捷地回應用戶動作,并避免了在網(wǎng)絡上發(fā)送哪些沒有改變過的信息。

3.XMLHttprequest對象。
ajax的核心是JavaScript對象XMLHttprequest。該對象在Internet Explorer 5中首次引入,他是一種支持異步請求的技術。簡而言之,XMLHttprequest可以在使用JavaScript向服務器提出請求并處理響應,而不阻塞用戶。通過XMLHttprequest對象,Web開發(fā)人員可以在頁面加載以后進行頁面的局部更新。
通過XMLHttprequest對象,Web開發(fā)人員可以在頁面加載以后進行頁面的局部更新。
ajax開始流行始于Google在2005年使用“Google Suggest”。
“Google Suggest”就是使用XMLHttprequest對象來創(chuàng)建動態(tài)的Web接口:
當用戶開始輸入google的搜索框,JavaScript發(fā)送用戶輸入的字符到服務器,然后服務器返回一個建議列表。
XHMLHttprequest對象在IE 5.0+,Safari 1.2,Mozillal 1.0/Firefox,Opera 8+和NetScapt 7開始被支持。

4.HMLHttprequest對象常用方法和屬性。
open()建立對服務器的調(diào)用,第一個參數(shù)是HTTP請求,方式可以為GET,POST或者服務器所支持的方式;
第二個參數(shù)是請求頁面的URL;
第三個參數(shù)是判斷更新方式,true為異步,false為同步。
send()方法,發(fā)送具體請求。
abort()方法,停止當前請求。
readyState屬性,請求的狀態(tài),有5個可取的值:0=為初始化,1=正在加載,2=已加載,3=交互中,4=完成。
reponseText屬性 服務器的響應,表示為一個串。
reponseXML屬性 服務器的響應,表示為XML。
status服務器的HTTP狀態(tài)碼,200對應ok,400對應not found。

5.XMLHttprequest對象在IE和Firefox中創(chuàng)建方式的不同。
IE中通過new ActiveXObject()得到,F(xiàn)irefox中通過new XMLHttprequest()得到。

6.XML。
XML是擴展標記語言,能夠用一系列簡單的標記描述數(shù)據(jù)。

7.HTTP協(xié)議的主要特點。
1>.支持客戶端/服務端模式,即請求(request)-響應(reponse)模式;
2>.簡單快捷,客戶端向服務區(qū)發(fā)送請求時,只需要傳送請求方式和路徑即可,所以簡單,由于HTTP協(xié)議簡單,使得HTTP服務器的程序規(guī)模小,因而速度很快;
3>.靈活,傳輸數(shù)據(jù)類型種類多;
4>.無連接,請求一次服務器后立刻斷開連接,即非長連接,即短連接。
5>.無狀態(tài),HTTP協(xié)議對事物處理沒有記憶能力。

8.GET和POST的比較。
共同點:都是向服務器請求數(shù)據(jù)的方式

GET POST
數(shù)據(jù)放在地址欄后 ?reg=123&psw=123 send(數(shù)據(jù)參數(shù))
數(shù)據(jù)量小 數(shù)據(jù)量大
安全性低 安全性高
傳輸速度快 傳輸速度慢

9.ajax的一般封裝

/* 參數(shù):
    obj 是1個對象,代表參數(shù)的集合,里面有很多參數(shù),如下所示:
    url           請求的地址與參數(shù)
    data        發(fā)送的數(shù)據(jù),要求格式是對象

    async       是否是同步,  true / false
    fail        失敗的處理回調(diào)函數(shù)
    success     成功的處理回調(diào)函數(shù)
 */
(function(){
ajax=window.ajax={};

ajax.get=function(obj){
  if(obj.async==undefined){
    obj.async=true;
  }
  if(obj.data==undefined){
    obj.data="";
  }

  var xhr=new XMLHttpRequest();
  var url=obj.url;
  url+="?";
  url+=translate(obj.data);
  xhr.open("GET",url,obj.async);
  xhr.send();

  if(obj.async==true){
  xhr.onreadystatechange=function(){
    
    if(xhr.readyState==4){
      if(xhr.status==200){
        var str=xhr.responseText;
        obj.success&&obj.success(str);
      }else{
        obj.fail&&obj.fail();
      }
    }
    }
  }else{
    if(xhr.status==200){
      var str=xhr.responseText;
      obj.success&&obj.success(str);
    }else{
      obj.fail&&obj.fail();
    }
  }
}

ajax.post=function(obj){
  if(obj.async==undefined){
    obj.async=true;
  }
  if(obj.data==undefined){
    obj.data="";
  }

  var xhr=new XMLHttpRequest();
  var url=obj.url;
  xhr.open("POST",url,obj.async);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(obj.data);

  if(obj.async==true){
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
        if(xhr.status==200){
          var str=xhr.responseText;
          obj.success&&obj.success(str);
        }else{
          obj.fail&&obj.fail();
        }
      }
    }
  }else{
    if(xhr.status==200){
      var str=xhr.responseText;
      obj.success&&obj.success(str);
    }else{
      object.fail&&obj.fail();
    }
  }
}

function translate(obj){
  var str="";
  for(var i in obj){
  str+=i;
  str+="=";
  str+=encodeURIComponent(obj[i]);
  str+="&";
}
  var str=str.substr(0,str.length-1);
  return str;
}
})();

這里使用立即執(zhí)行函數(shù)封裝起來是為了防止變量污染。

10.同源和跨域
同源:要求1.協(xié)議一致;2.域名字符串一致(每個符號都要一致);3.端口一致。
跨域:1.ajax不可以跨域(在服務器端不支持的情況下(默認),ajax不能跨域,請求不到數(shù)據(jù));2.img,css,script,iframe都可以跨域。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容