成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Ajax小結(jié)

Anchorer / 2910人閱讀

摘要：技術(shù)核心對(duì)象簡(jiǎn)稱?？梢詸z測(cè)對(duì)象的屬性，該屬性表示請(qǐng)求響應(yīng)過程的當(dāng)前活動(dòng)階段。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)。獲取同步發(fā)送請(qǐng)求返回的數(shù)據(jù)使用和實(shí)現(xiàn)局部刷新

Ajax

概念理解

全稱：Ajax是對(duì)Asynchronous Javascript + XML的簡(jiǎn)寫。

作用：能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無須卸載頁面，會(huì)帶來更好的用戶體驗(yàn)。

技術(shù)核心：XMLHttpRequest對(duì)象（簡(jiǎn)稱XHR）。XHR為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口。能夠以異步方式從服務(wù)器取得更多信息，意味著用戶單擊后，可以不必刷新頁面也能取得新數(shù)據(jù)。即可以使用XHR對(duì)象取得新數(shù)據(jù)，然后再通過DOM將新數(shù)據(jù)插入到頁面中。

數(shù)據(jù)格式：雖然名字中包含XML的成分，但Ajax通信與數(shù)據(jù)格式無關(guān)。這種技術(shù)就是無須刷新頁面即可從服務(wù)器取得數(shù)據(jù)，但不一定是XML數(shù)據(jù)。

創(chuàng)建Ajax

創(chuàng)建XMLHttpRequest對(duì)象

   var xhr;  
   if (window.XMLHttpRequest){  //IE7+, Firefox, Chrome, Opera, Safari  
         xhr=new XMLHttpRequest();  
    }else{  // 兼容 IE6, IE5  
         xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    }

對(duì)于異步請(qǐng)求，不必等待服務(wù)器響應(yīng)，JS代碼繼續(xù)執(zhí)行。
可以檢測(cè)XHR對(duì)象的readyState屬性，該屬性表示請(qǐng)求/響應(yīng)過程的當(dāng)前活動(dòng)階段。

   0:未初始化。尚未調(diào)用open()方法。
   1:啟動(dòng)。已經(jīng)調(diào)用open()方法，尚未調(diào)用send()方法。
   2:發(fā)送。已經(jīng)調(diào)用send()方法，尚未接收響應(yīng)。
   3:接收。已經(jīng)接收到部分響應(yīng)。
   4:完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)。

只要readyState屬性的值由一個(gè)值變成另一個(gè)值，就會(huì)觸發(fā)onreadyStatechange事件，利用這個(gè)事件來檢測(cè)每次狀態(tài)變化后readyState值，獲取服務(wù)器的響應(yīng)也在這個(gè)事件中處理。

   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)建一個(gè)新的HTTP請(qǐng)求,并指定請(qǐng)求的方法、URL及異步(true)/同步(false)

   xhr.open(method,url,async);  
   注意：open 的參數(shù)要牢記，很多面試官愛問這樣的細(xì)節(jié)
       1)method：請(qǐng)求的類型；GET 或 POST
       2)url：文件在服務(wù)器上的位置
       3)async：true（異步）或 false（同步）
   注意：post請(qǐng)求一定要設(shè)置請(qǐng)求頭的格式內(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請(qǐng)求

   xmlhttp.send(); 
   若是post請(qǐng)求，參數(shù)為作為請(qǐng)求主體發(fā)送的參數(shù)。
   若是get請(qǐng)求，參數(shù)為null。

獲取同步發(fā)送請(qǐng)求返回的數(shù)據(jù)

   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
       alert(xhr.responseText);
   }else{
       alert(“Request was unsuccessful: ”+ xhr.status);
   }

使用JavaScript和DOM實(shí)現(xiàn)局部刷新

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94636.html

相關(guān)文章

  • 高性能JavaScript（文檔）

    摘要：最近在全力整理高性能的文檔，并重新學(xué)習(xí)一遍，放在這里方便大家查看并找到自己需要的知識(shí)點(diǎn)。 最近在全力整理《高性能JavaScript》的文檔，并重新學(xué)習(xí)一遍，放在這里方便大家查看并找到自己需要的知識(shí)點(diǎn)。 前端開發(fā)文檔 高性能JavaScript 第1章：加載和執(zhí)行 腳本位置 阻止腳本 無阻塞的腳本 延遲的腳本 動(dòng)態(tài)腳本元素 XMLHTTPRequest腳本注入 推薦的無阻塞模式...

    RayKr 評(píng)論0 收藏0

  • ajax post導(dǎo)出excel小結(jié)(解決亂碼問題)

    摘要：當(dāng)前有一個(gè)需求前端對(duì)當(dāng)前頁面的數(shù)據(jù)做篩選之后需要將其導(dǎo)出至文件且發(fā)送的請(qǐng)求需傳入需驗(yàn)證的參數(shù)如頁面信息嘗試了提交及其他方法后出現(xiàn)亂碼等問題最后用成功完成了導(dǎo)出。直接貼代碼下面是解釋這段代碼不加會(huì)導(dǎo)致導(dǎo)出的出現(xiàn)亂碼問題。 當(dāng)前有一個(gè)需求 前端對(duì)當(dāng)前頁面的數(shù)據(jù)做篩選之后需要將其導(dǎo)出至excel文件且發(fā)送的請(qǐng)求需傳入需驗(yàn)證的參數(shù)如頁面token信息嘗試了form提交及其他方法后出現(xiàn)excel...

    tanglijun 評(píng)論0 收藏0

  • 前端測(cè)試框架mocha使用小結(jié)

    摘要：稱為測(cè)試用例，表示一個(gè)單獨(dú)的測(cè)試，是測(cè)試的最小單位。它使用的瀏覽器環(huán)境，通過事件監(jiān)聽的方式檢測(cè)測(cè)試的執(zhí)行過程。前端的自動(dòng)化測(cè)試還需慢慢探索，任重而道遠(yuǎn)。前端技術(shù)交流群歡迎加入 安裝 npm i -g mocha npm i chai -D //斷言庫 模塊測(cè)試 比如有一個(gè)add函數(shù) //add.js function add(a, b){ return a + b } modu...

    asoren 評(píng)論0 收藏0

  • ajax 入門小結(jié) 代碼注釋解析

    摘要：最新的提交初始化請(qǐng)求對(duì)象它是瀏覽器具有主動(dòng)請(qǐng)求數(shù)據(jù)的核心對(duì)象開始請(qǐng)求是方法銘文請(qǐng)求方式表單請(qǐng)求加密方式方法兩個(gè)參數(shù)請(qǐng)求方式，請(qǐng)示地址打開通道獲取數(shù)據(jù)后的回調(diào)即請(qǐng)求完成后在請(qǐng)求完成后返回的數(shù)據(jù)會(huì)在屬性中這個(gè)屬性是個(gè)字符串 Document #demo { font-family: Helvetica, Arial, sans-serif; ...

    SwordFly 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Anchorer

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<