資訊專欄INFORMATION COLUMN
摘要：技術(shù)核心對象簡稱?？梢詸z測對象的屬性，該屬性表示請求響應過程的當前活動階段。已經(jīng)接收到全部響應數(shù)據(jù)。獲取同步發(fā)送請求返回的數(shù)據(jù)使用和實現(xiàn)局部刷新
Ajax
概念理解
全稱：Ajax是對Asynchronous Javascript + XML的簡寫。
作用：能夠向服務器請求額外的數(shù)據(jù)而無須卸載頁面，會帶來更好的用戶體驗。
技術(shù)核心：XMLHttpRequest對象（簡稱XHR）。XHR為向服務器發(fā)送請求和解析服務器響應提供了流暢的接口。能夠以異步方式從服務器取得更多信息，意味著用戶單擊后，可以不必刷新頁面也能取得新數(shù)據(jù)。即可以使用XHR對象取得新數(shù)據(jù)，然后再通過DOM將新數(shù)據(jù)插入到頁面中。
數(shù)據(jù)格式：雖然名字中包含XML的成分，但Ajax通信與數(shù)據(jù)格式無關(guān)。這種技術(shù)就是無須刷新頁面即可從服務器取得數(shù)據(jù)，但不一定是XML數(shù)據(jù)。
創(chuàng)建Ajax
創(chuàng)建XMLHttpRequest對象
var xhr;
if (window.XMLHttpRequest){ //IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}else{ // 兼容 IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
對于異步請求，不必等待服務器響應，JS代碼繼續(xù)執(zhí)行。
可以檢測XHR對象的readyState屬性，該屬性表示請求/響應過程的當前活動階段。
0:未初始化。尚未調(diào)用open()方法。 1:啟動。已經(jīng)調(diào)用open()方法，尚未調(diào)用send()方法。 2:發(fā)送。已經(jīng)調(diào)用send()方法，尚未接收響應。 3:接收。已經(jīng)接收到部分響應。 4:完成。已經(jīng)接收到全部響應數(shù)據(jù)。
只要readyState屬性的值由一個值變成另一個值，就會觸發(fā)onreadyStatechange事件，利用這個事件來檢測每次狀態(tài)變化后readyState值，獲取服務器的響應也在這個事件中處理。
xhr.onreadyStatechange = function(){
If(xhr.readyState == 4){
if(xhr.status >=200 && xhr.status = 304){
alert(xhr.responseText);
}else{
alert(“Request was unsuccessful: ”+ xhr.status);
}
}
};
創(chuàng)建一個新的HTTP請求,并指定請求的方法、URL及異步(true)/同步(false)
xhr.open(method,url,async);
注意：open 的參數(shù)要牢記，很多面試官愛問這樣的細節(jié)
1)method：請求的類型；GET 或 POST
2)url：文件在服務器上的位置
3)async：true（異步）或 false（同步）
注意：post請求一定要設(shè)置請求頭的格式內(nèi)容
xhr.open("post","ajax_test.html",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //使用XHR模仿表單提交
xhr.send("fname=Henry&lname=Ford");
發(fā)送HTTP請求
xmlhttp.send(); 若是post請求，參數(shù)為作為請求主體發(fā)送的參數(shù)。 若是get請求，參數(shù)為null。
獲取同步發(fā)送請求返回的數(shù)據(jù)
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert(“Request was unsuccessful: ”+ xhr.status);
}
使用JavaScript和DOM實現(xiàn)局部刷新
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/94636.html
摘要：最近在全力整理高性能的文檔，并重新學習一遍，放在這里方便大家查看并找到自己需要的知識點。 最近在全力整理《高性能JavaScript》的文檔，并重新學習一遍，放在這里方便大家查看并找到自己需要的知識點。 前端開發(fā)文檔 高性能JavaScript 第1章：加載和執(zhí)行 腳本位置 阻止腳本 無阻塞的腳本 延遲的腳本 動態(tài)腳本元素 XMLHTTPRequest腳本注入 推薦的無阻塞模式...
摘要：當前有一個需求前端對當前頁面的數(shù)據(jù)做篩選之后需要將其導出至文件且發(fā)送的請求需傳入需驗證的參數(shù)如頁面信息嘗試了提交及其他方法后出現(xiàn)亂碼等問題最后用成功完成了導出。直接貼代碼下面是解釋這段代碼不加會導致導出的出現(xiàn)亂碼問題。 當前有一個需求 前端對當前頁面的數(shù)據(jù)做篩選之后需要將其導出至excel文件且發(fā)送的請求需傳入需驗證的參數(shù)如頁面token信息嘗試了form提交及其他方法后出現(xiàn)excel...
摘要：稱為測試用例，表示一個單獨的測試，是測試的最小單位。它使用的瀏覽器環(huán)境，通過事件監(jiān)聽的方式檢測測試的執(zhí)行過程。前端的自動化測試還需慢慢探索，任重而道遠。前端技術(shù)交流群歡迎加入 安裝 npm i -g mocha npm i chai -D //斷言庫 模塊測試 比如有一個add函數(shù) //add.js function add(a, b){ return a + b } modu...
摘要：最新的提交初始化請求對象它是瀏覽器具有主動請求數(shù)據(jù)的核心對象開始請求是方法銘文請求方式表單請求加密方式方法兩個參數(shù)請求方式，請示地址打開通道獲取數(shù)據(jù)后的回調(diào)即請求完成后在請求完成后返回的數(shù)據(jù)會在屬性中這個屬性是個字符串 Document #demo { font-family: Helvetica, Arial, sans-serif; ...
閱讀 1744·2019-08-30 12:51
閱讀 731·2019-08-29 17:30
閱讀 3790·2019-08-29 15:17
閱讀 908·2019-08-28 18:10
閱讀 1460·2019-08-26 17:08
閱讀 2240·2019-08-26 12:16
閱讀 3517·2019-08-26 11:47
閱讀 3565·2019-08-23 16:18
