快捷導(dǎo)航

原生Aajax 和jQuery Ajax 寫法個(gè)人總結(jié)

更新時(shí)間：2017年03月24日 10:11:01 作者：小三爺2

AJAX:即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)。本文重點(diǎn)給大家介紹原生Aajax 和jQuery Ajax 個(gè)人總結(jié)，一起看看吧

AJAX:即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

　　　　　　一個(gè)完整的HTTP請(qǐng)求：由請(qǐng)求方式、URL、請(qǐng)求頭和請(qǐng)求體組成；

　　　　　　一個(gè)完整的HTTP響應(yīng)：由狀態(tài)碼、響應(yīng)頭、響應(yīng)體組成；

　　　　　　http狀態(tài)碼：1開頭代表信息類正在處理、2開頭代表請(qǐng)求成功200 OK、3開頭代表重定向、4開頭代表客戶端錯(cuò)誤 404、5開頭代表服務(wù)器錯(cuò)誤；

　　　　　　響應(yīng)狀態(tài)：0,1,2,3,4 4代表響應(yīng)成功。

　　　　　　open方法中的第三個(gè)參數(shù)代表是否異步（TRUE為異步 FALSE為同步）。

　　　　　　當(dāng)請(qǐng)求方式為POST時(shí)，open方法后面要設(shè)置請(qǐng)求頭（xmlhttp.setResponseHeader("")）send方法中要加入；　　　　　　

　　原生JavaScript寫法：

var xhr;
  function rukou()//入口函數(shù)
  {
   xhr=getxhr();
   if(xhr==null)
   {
    alert("瀏覽器不支持！");
   }
   var url="";
   xhr.onreadystatechange=fanhui;
   xhr.open("GET",url,true);
   xhr.send(null);
  }
  function fanhui()//請(qǐng)求成功的回調(diào)函數(shù)
  {
   if(readyState==4)
   {
    document.getElementById("xx").innerHTML=xhr.responseText;
   }
  }
  function getxhr()//獲取xmlhttp對(duì)象
  {
   xhr=null;
   try{
    xhr=new XMLHttpRequest();
   }
   catch(e)
   {
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
  }

　　　　　　jQuery中的ajax寫法：

$("#tijiao").click(function(){
  $.ajax({
   type:"GET",
   url:"http://localhost/AJAX/test.php?name="+$("#name").val()+"&phone="+$("#phone").val(),
   dataType:"json",
   success:function(data){
    $("#success").html(data.msg);
   },
   error:function(){
    alert("錯(cuò)誤！??！");
   }
  })
 })

$("#tijiao").click(function(){
  $.ajax({
   type:"POST",
   url:"test.php",
   data:{
    name:$("#name").val(),
    phone:$("#phone").val()
   },
   dataType:"json",
   success:function(data){
    $("#success").html(data.msg);
   },
   error:function(){
    alert("錯(cuò)誤?。?！");
   }
  })
 })

以上所述是小編給大家介紹的原生Aajax 和jQuery Ajax 個(gè)人總結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: