異步請求

1、什么是？

   原理性。

 

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技術

---

 

1、什么是異步？

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

 

2、異步和同步？

   進程

   線程同步：

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

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

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

     public void  maipiao(){

       if(count>0){

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

                       需要時間1秒。

          count--;

        }

     }

   問題：為什么需要線程同步這個技術？

   線程異步：

       因為線程的異步性，導致了需要線程同步技術。

       兩個人可以同步干一件事情，異步。

       異步：兩個人都有權操作同一個資源。

   網頁中的同步和異步：

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

 

3、異步出現的意義？

   用戶體驗的角度：

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

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

           異步時空：注冊--

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

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

4、代碼？

   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:判斷注冊的用戶名，是否已經被使用了。使用了提示使用了，紅色。否則：可以用。綠色。

 

4、注意點

   1、ajax也可以發送同步請求，實質上沒有什么意義？

   2、在發送前就知道怎么回來，去哪里。誰發送，誰接受。

 

 

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

 

 

< 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>