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/
來源:頭條號(今日頭條旗下創作平台)
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。