1 <script> 2 // 封裝通用的xhr對象,兼容各個版本 3 function creatXHR() { 4 // 判斷瀏覽器是否將XMLHttpRequest作為本地對象實現(xiàn),針對IE7,firefox, opera等 5 if (typeof XMLHttpRequest != "undefined") { 6 return new XMLHttpRequest(); 7 } 8 else if (typeof ActiveXObject != "undefined") { 9 // 將所有可能出現(xiàn)的ActiveXObject版本放在一個數(shù)組中 10 var xhrArr = [ 11 'Microsoft.XMLHTTP', 12 'MSXML2.XMLHTTP.6.0', 13 'MSXML2.XMLHTTP.5.0', 14 'MSXML2.XMLHTTP.4.0', 15 'MSXML2.XMLHTTP.3.0', 16 'MSXML2.XMLHTTP.2.0' 17 ]; 18 // 遍歷創(chuàng)建XMLHttpRequest對象 19 var xhr; 20 for (let i = 0; i < array.length; i++) { 21 try { 22 // 創(chuàng)建XMLHrrpRequest對象 23 xhr = new ActiveXObject(xhrArr[i]); 24 break; 25 } catch (error) { 26 27 } 28 29 } 30 return xhr; 31 } 32 else{ 33 throw new Error('不支持XMLHttpRequest對象'); 34 } 35 } 36 // 創(chuàng)建xhr 37 var xhr = creatXHR(); 38 // 存儲獲取到的數(shù)據(jù) 39 var data; 40 41 // 響應(yīng)XMLHttpRequest對象狀態(tài)變化的函數(shù),onreadystatechange在readyState屬性發(fā)生改變時觸發(fā) 42 xhr.onreadystatechange = function (/* callback */) { 43 // 異步調(diào)用成功,響應(yīng)內(nèi)容解析完成,可以在客戶端調(diào)用 44 if (xhr.readyState == 4) { 45 // 200 OK,304 讀取緩存 46 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { 47 // 獲取服務(wù)器返回的數(shù)據(jù) 48 // 數(shù)據(jù)以字符串類型存放在 xhr.responseText 49 // json序列化解析xhr.responseText 50 // 將ajax獲取到的數(shù)據(jù)傳遞出去 51 data = JSON.parse(xhr.responseText); 52 // 或者在參數(shù)中傳入callback,在此處執(zhí)行回調(diào)函數(shù) 53 // callback && callback(); 54 } 55 } 56 }; 57 58 59 // 創(chuàng)建請求,這里只是創(chuàng)建,并不發(fā)送 60 xhr.open("get", "./xxx.json", true); 61 62 // 發(fā)送請求 63 xhr.send(null); 64 65 /* 使用post方法,傳參方式 66 // 創(chuàng)建請求,這里只是創(chuàng)建,并不發(fā)送 67 xhr.open("post", "./xxx.json", true); 68 // 設(shè)置http頭部信息 69 xhr.setRequestHeader("Content-type", "application/x-www-form-urlcoded"); 70 xhr.send({param1:'strrr', param2:789}); 71 */ 72 </script>
想不起來Ajax實現(xiàn),就來看看。
聯(lián)系客服