js ajax局部替换,一篇文章搞定ajax局部刷新（原生JS）

ajax可以理解為在后台偷偷摸摸的刷新又不告訴你。

它的工作流程是這樣的：點擊頁面標簽->發送請求到后端，拿到一個結果->把結果顯示到頁面那我們轉換成計算機語言就應該是4步

1.先實例化js的XMLHttpRequest這個內置對象var xhr = new XMLHttpRequest;

2.設置open這個方法准備請求xhr.open(method,頁面); //第一個參數是設置method是GET還是POST，第二個頁面是后端操作注意。GET請求xhr.open("get","index.php?id=1&sid=1"); //是把值放到地址欄傳過去POST請求xhr.open("post","index.php"); //如果是post的話地址欄后面為空

3.調用send方法把信息提交到后端GET請求xhr.send(); //就這樣就好了POST請求xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send("id=1&sid=1"); //注意要設置請求頭，設置為表單請求，把值放在send內

4.取得效果之后顯示到前端

4-1.判斷是否已經執行完畢xhr.onloadend = function(){//

4-2.執行完畢，判斷響應頭是否為200.判斷是否正常的意思if(xhr.status==200){//如果進來這里就代表一切正常。能拿到值了alert(xhr.responseText);}}上面就是怎么用js來實現ajax。

那如果是jquery里面就方便多了在jQuery中。如果需要調用ajax，就需要先導入jquery包然后調用ajax的方法

1.導入jQuery包一篇文章搞定ajax局部刷新(原生JS)

2.調用ajax方法。在jquery中有6個ajax相應的常用方法需要我們去學的

2-1：loadload是把加載頁面的內容顯示到當前頁面上$("#div").load("index.php",[JSON data],[function]);把JSON對象的內容傳到index.php做處理之后把頁面輸出的內容返回到#div內

2-2：get$.get("index.php",[JSON data],function,[type]);把JSON對象內容傳到index.php做處理，執行成功后會調用function方法，type參數如果為json則會返回一個JSON對象當然也可以把JSON data寫在index.php后面：index.php?id=1&username=1;

2-3：post$.post("index.php",[JSON data],function,[type]);原理是與GET相同的。不過不可以把值放在index.php后面

2-4：ajax$.ajax({url:"index.php",type:"post",data:"id=1&username=1",dataType:"json", //如果選了json就會返回json對象success:function(val){//ajax成功就執行},beforeSend:function(){//准備發送ajax之前執行},complete:function(){//無論成功還是失敗都會執行}})其實$.ajax就是$.get和$.post的底層，當執行成功之后就會執行函數2-5：ajaxStart$("#loading").ajaxStart(function(){//當ajax准備發送之前執行})

2-6:ajaxStop$("#loading").ajaxStop(function(){//當ajax完成之后執行})我們可以這么理解。complete和ajaxStop是一對，beforeSend和ajaxStart是一對。假如我需要在異步加載之前顯示一個loading的圈圈。異步完成就隱藏。如果我們是用$.ajax()就可以用beforeSend和complete來完成了。但是如果我們要用$.post的話，就沒有這功能，所以只能用ajaxStart和ajaxStop來完成。

可以這么理解。beforeSend、complete是私有的，而ajaxStart和ajaxStop是共有的。當設了beforeSend的同時又存在ajaxStart的話會執行beforeSend我是慶愷。

這是一個程序員+運營新人的自媒體號，記錄着自己的一路成長，如果你覺得這篇文章對您有幫助，我會覺得，這世界上至少有人因為我而得到改變。

原創文章，轉載請標明出處。謝謝。

作者：頭條號 / 慶愷的筆記

鏈接：http://toutiao.com/a6323673596863578370/

來源：頭條號(今日頭條旗下創作平台)

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。