異步請求

一、什麼是？

   原理性。

 

1.    $.ajax({               ----jQuery中封裝好的異步請求
2.       type:"post",
3.       url:"add.do",
4.       cache:"false",
5.       dataType:"json",
6.       success:function(msg){
7.        //請求成功後執行的語句。
8.          }
9.     });

 

  沒有封裝的狀況下的異步請求。

   ajax=異步（asynchronours） 的  javaScript and  xml

   本質: 異步請求不是語言，建立更好，更快以及交互性更強的web應用。

  實質就是javaScript技術

---

 

一、什麼是異步？

   Asynchronous:是否是一門語言，而是爲了解決一個問題所出現的技術, 爲了建立更好，更快，交互性更強的web應用。

 

二、異步和同步？

   進程

   線程同步：

             多個線程公用一個資源-----臨界資源。

   解決出現的這種問題的技術------線程同步。

     int count=1; --k8554--5--14

     public void  maipiao(){

       if(count>0){

          //容許買-----程序在處理數據的時候，

                       須要時間1秒。

          count--;

        }

     }

   問題：爲何須要線程同步這個技術？

   線程異步：

       由於線程的異步性，致使了須要線程同步技術。

       兩我的能夠同步幹一件事情，異步。

       異步：兩我的都有權操做同一個資源。

   網頁中的同步和異步：

       請求：用戶請求----服務器---解析請求---查----把結果集轉變成字節碼--響應--瀏覽器解析，顯示。---正在呈現：正在接收響應,--- 等待呈現：白屏

 

三、異步出現的意義？

   用戶體驗的角度：

     同步：當響應的呈現以前，頁面的狀態是白色，處於半呈現狀態。第一個請求在沒有響應結束以前，用戶點擊第二個。

     異步：2005年的時候，異步出名---google suggest 兩個請求同步走，互不干涉。

           異步時空：註冊--

     特色：局部刷新數據，同步異步請求，建立快速交互頁面。

     總結：是一個實現交互性更強的技術實現了局部刷新數據的功能。

四、代碼？

   XMLHttpRquest對象能夠實現異步請求的發送。

   主流瀏覽器大部分都支持該對象。

   主流：IE，火狐，chrome,opera,safari。。。

             IE5，6---不支持該對象。

   IE5,6：ActiveXObjecct對象發送異步請求。

 

使用異步請求的步驟：

 

第一步：建立XMLHttpRequest  xhr引擎對象

     var xhr;

     if(window.XMLHttpRequest){

        xhr=new XMLHttpRequest();      //判斷所使用的遊覽器

     }else{

        xhr=new ActiveXObject("Microsoft.XMLHTTP");       //IE瀏覽器使用的對象

     }

 

第二步：構建異步請求：

     url="add.do?user_id=1001&user_name=湯曉春" +Math.random();  //減小緩存 

     xhr.open("get/post",url,true/false);

     什麼狀況下用get，什麼狀況下用post

第三步：設置服務器處理返回結果方法。

     xhr.readyState（返回服務器響應用戶的狀態）

          0：請求未初始化,

          1：與服務器創建鏈接,

          2：接收開始,

          3：處理中,

          4：處理完畢。

     xhr.status==200/404

if(xhr.readyState==4&&xhr.status==200){

  //程序返回的結果

  xhr.responseText:response.getWrite().print("1");//獲得String類型的返回值。

  xhr.responseXML:獲得xml樣式的返回值。須要特殊的方式解析。

   if（1）{

 

   }else{

 

  }

}

第四步：發送請求

        xhr.send(String);String 用戶post請求。

 

 

 

案例1:判斷註冊的用戶名，是否已經被使用了。使用了提示使用了，紅色。不然：能夠用。綠色。

 

四、注意點

   一、ajax也能夠發送同步請求，實質上沒有什麼意義？

   二、在發送前就知道怎麼回來，去哪裏。誰發送，誰接受。

 

 

代碼案例部分(註冊界面)：

 

 

< script type= "text/javascript" >       var xhr;       function checked1() {             //建立異步引擎對象；             var username=document.getElementById("username" ).value;             if (window.XMLHttpRequest) {                 xhr = new XMLHttpRequest();            } else if (window.ActiveXObject) {                 xhr = new ActiveXObject( "Microsoft.XMLHTTP" );            }             //構建異步請求             var url = "vali.do?username=" + username;            xhr.open( "get", url, true);             //處理服務器返回結果方法            xhr.onreadystatechange = chuli;             //發送異步請求            xhr.send( null);      }       function chuli() {             if (xhr.status == 200 && xhr.readyState == 4) {                  var v = xhr.responseText;                  if (v == "0") {                      document.getElementById( "msg").innerHTML = ("該用戶名可用" );                      document.getElementById( "msg").style.color = "green" ;                 } else if (v == "1") {                      document.getElementById( "msg").innerHTML = ("該用戶名不可用" );                      document.getElementById( "msg").style.color = "red" ;                 }            }      } </ script> </ head> < body>       <input type = "text" id= "username" onkeyup= "checked1()" />       <span id = "msg"></ span>< br>       <input type = "submit"  value= "登陸"> </ body> </ html>