ajax
是用來處理前后端交互的技術，可以改善用戶體驗，其本質是
XMLHttpRequest，異步訪問服務器并發送請求數據，服務器返回響應的數據，以頁面無刷新的效果改變頁面中的局部內容
同步：任務一個一個的執行，只有前面的任務執行完才會執行下一個任務，如果前面的任務是耗時操作，則需要一直等待
異步：多條任務并發執行，也就是一個任務的開啟，不需要等待其他任務執行結束，效率較高
ajax的語言載體是JavaScript，最大的特點是頁面不刷新
1、獲取ajax對象
主流瀏覽器獲取方式:火狐、谷歌、safari、opera、IE7以上
var xhr = new XMLHttpRequest();
IE7以下
var xhr = new ActiveXObject("microsoft.XMLHttp");
2、發起請求
創建請求：xhr.open(請求方式get/post,請求地址);
發送請求：xhr.send(post請求數據/get設置null);
3、接收數據
ajax可以接收字符串、html標簽、css樣式、xml、json
通過監聽onreadystatechange事件。來接收ajax狀態的變化（readyState屬性）
readyState:
-0:表示未初始化，對象已經建立，但是沒調用onen方法
-1：對象已建立，但是未調用send方法
-2：發送數據，已調用send方法，但當前狀態及http頭未知
-3：已接收部分數據，但是數據不全
-4：數據接收完畢
4、常用屬性和方法
屬性：
-responseText：將響應的數據作為字符串返回，只讀
-responseXML:將響應的數據格式化為xml格式并返回，只讀
-status：當前請求的http狀態碼
方法：
-open
-send
-setRequestHeader：設置請求頭
get請求
url以字符串形式傳遞數據，對中文、&、=需要特殊處理，可以使用encodeURIComponent()方法進行編碼，編碼后的內容在服務端不需要解碼，可以正常接收,get多個參數之間用&連接，參數名和參數值用=連接
var xhr = null; //獲取ajax對象 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } xhr.onreadystatechange = function(){ console.log(xhr.readyState); switch (xhr.readyState){ case 0: console.log("尚未初始化"); break; case 1: console.log("尚未建立連接"); break; case 2: console.log("正在發送數據"); break; case 3: console.log("正在接受數據"); break; case 4: console.log("數據接收完成"); //處理接到的數據,這下面是重點 var text = xhr.responseText; break; } } //創建請求 xhr.open('get','http://localhost/PHP/ajax01.php?sel=4'); xhr.send(null);post請求
-給服務器傳參數，需要將參數寫在send方法中：參數1=值1&參數2=值2...
-需要調用setRequestHeader()方法，把傳送的參數封裝成xml格式（模仿form表單提交數據：application/x-www-form-urlencoded）;
-傳遞的中文、特殊符號都需要編碼
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4) { console.log("登陸成功:"+xhr.responseText); } } //等到輸入的用戶名和密碼， var uname = "uname="+ encodeURIComponent(document.getElementById("uname").value); var pwd = "pwd="+encodeURIComponent(document.getElementById("pwd").value); xhr.open("post","http://localhos/PHP/ajax01.php"); //設置頭信息，需要在open方法之后設置 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //設置參數 var str = uname+"&"+pwd; xhr.send(str);get/post的區別：
-請求數據量，get最多2k，post沒有限制
-安全方面，post更安全
-傳遞數據的形式：get是url和參數一起發送，post是參數單獨發送
jquery ajax請求
//AJAX $.ajax({ url:"data.txt", type:'get', dataType:'json', data:null, async:true, timeout:1000,//設定超時時間 一般都是3000毫秒 cache:false,//設定GET請求的時候不走 緩存數據，原理其實就是在URL末尾加隨機數，默認是true success:function(data){ console.log(data) }, }) //JSONP //JSONP都是GET和異步請求的，不存在其他的請求方式和同步請求，而且jquery默認會給JSONP的請求清楚緩存 $.ajax({ url:"http://matchweb.sports.qq.com/kbs/calendar?columnId=100000", type:'get', dataType:'jsonp', jsonpCallback:"fn",//自定義傳遞給服務器的函數名，而不是使用jquery自動生成的 jsonp:'cb',//把傳遞函數名的那個形參callBack變為cb success:function(data){ console.log(data) }, })以上這篇原生js jquery ajax請求以及jsonp的調用方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
