AJAX筆記

         AJAX筆記

1、同步和異步交互：不用刷新整個頁面邊能夠與服務器通信的辦法；

1．Flash

2．Java applet

3．框架 若是使用一組框架構造一個頁面，不用動整個頁面

4．隱藏的iframe

5．XML HttpRequest:該對象是對javaScript的一個擴展，能夠使頁面與服務器進行通訊。當成 xmlHttpRequest對象的代名詞。

 

2、AJAX工做原理 AJax在用戶與服務器之間引用一箇中間媒介，從而消除了網絡交互過程當中的處理-等待-處理-等待等缺點。瀏覽器在執行時裝載了AJAX引機。（包含：javascript css、dom、xml、和xmlHttprequest）

 核心的xmlHTTPRequst。是一種支持異步請求的技術。XmlHttpRequest使您能夠使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶。

3、請求方式：

一、創建xmlHttpRequest 返回 調用它的方法賦值。

二、鏈接服務器實現監控 返回值.onreadystatechange 經過xmlReq.status 能夠查看接收的5中狀態。If(xmlreq.readyState==4)//響應發送完畢{if(xmlReq.status==200||xmlreq.status==304){}}

三、Open(「post」,」路徑」,true);

四、Send(date)//通常爲空字符串。

4、status報錯：200一切正常，403禁止訪問 500空值內部服務器出錯 304源文件沒有被修改。

 

5、配置好服務端響應一次問題：點擊按鈕後因爲存在緩存，路徑沒有發生變法。只會響應一次請求。

解決：怎樣保存每次路徑發生變法 加一個時間變量。Open（「get」,」../testservlet?timesttamp=」+newDate().getTime()+」$a=9」,」true」）;//這裏還能接參數

客戶端用request.getParameter(「a」)接收

6、XMLHttpRequest對象屬性和open方法服務器的鏈接，發送方法send（date）：

l        Open（「methed」,」url」，asynch）;XMLHttpRequest對象的open方法容許程序員用一個AJAX調用向服務器發送請求。

Methed:請求類型，類型有「get」或」post」字符串。若只想從服務器檢索一個文件而不須要發送任何數據。使用GET。若須要向服務器發送數據。用post

Url：路徑字符串，指向你所請求的服務器上的那個文件，能夠是絕對路徑和相對路徑。（../servlet路徑）

Asynch：表示請求是否要異步傳輸。默認爲true

l        Send方法：可爲已經待命的請求發送指令。Data將要傳遞服務器的字符串

 

 

 

 

l          onreadystatechange:：該事件處理函數由服務器觸發，而不是用戶

 更新XMLHttpRequest對象的readyState來實現。

7、接收方法和屬性：

readyState :readyState 屬性表示Ajax請求的當前狀態，它的值yoga數字表示。

u      0表示未初始化，還麼有調用open方法

u      1表明正在加載，open方法已調用，單send方法尚未被調用

u      2表明已加載完畢。Send已被調用，請求已經開始

u      3表明交互中，服務器正在發送響應

u      4表明完成，響應發送完畢。

每次readState值的改變，都會觸發值改變

responseXML若是返回的是XML，那麼數據存在response中 要把字體改成text/xml

8、Ajax與服務器的創建方式：

l        Ajax與服務器的創建鏈接，接收服務器的請求，處理服務器返回的數據

開發步驟：

1．建立XMLHttpRequest對象

2．打開和服務器的鏈接

3．發送數據

4．接收服務器端的響應

l        處理事件單擊按鈕響應 鏈接一個js winow.onlaod 函數onclick響應事件

在函數中寫上面實現代碼。

怎樣建立XMLHttpRequest對象

Var xmlHttpReq=new ActiveXobject(‘MSXML2.XMLHTTP.3.O」);//

xmlHttpReq.open(」GET」,」http://localhost/books.xml」,false);

xmlHttpReq.send();

Alert(xmlHttpReq.responseText);

非IE瀏覽器

就是 var XmlHttpReq =new XMLHttpRequest();

 function ajaxHttpRequest()

 {

   var xmlHttp;

   try{

   xmlHttp=new XMLHttpRequest();  

   }catch(e)

   {

    try{

       xmlHttp=new ActiveXObject("Msxm12.XMLHTTP");

    }

    catch(e)

    {

      try{

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }catch(e){}

    }

  

   }

 

 }

jQuery不用寫上面這些代碼。

9、POST請求方式：

 

 

function ajaxFunction(){

    var xmlHttp;

    try {

        xmlHttp=new XMLHttpRequest();

    } catch (e) {

        try {

            xmlHttp=new ActiveXObject("Msxm12.XMLHTTP");

        } catch (e) {

            try {

                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

            } catch (e) {

            }

        }

    }

    return xmlHttp;

   

}

window.onload=function()

{/*

    <td><input type="text" name="username" value="" id="username">

    <div id="mydiv"> </div>

    <input type="button" name="checkname" value="查看用戶名" id="checkname">

 */

    document.getElementById("checkname").onclick=function()

    {

        //alert("aaa");

        var username=document.getElementById("username").value;

        //alert(username);

         var xmlReq=ajaxFunction();

         xmlReq.onreadystatechange=function()

         {

           //alert(xmlReq.readyState);

          if(xmlReq.readyState==4)

              {

              if(xmlReq.status==200||xmlReq.status==304)

                  {

                   var data=xmlReq.responseText;//相對於一個路徑的頁面內容。能夠直接在頁面中賦值給它響應頁面。

                   document.getElementById("mydiv").innerHTML=data;

                  }

              }

         }

           xmlReq.open("post","testServlet",true);

           xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

           xmlReq.send("username="+username);

 

    }

}

 

十、用AjAx經過服務器printwrint輸出out.print<province name=value>的建立步驟：

一、先經過getElmentsByTagName(「province」)得到元素。獲得數組

二、遍歷數組得到該元素的屬性：getAttribute（「name」）

三、用document,.createElment(「option」)//建立元素

四、給建立的元素設置value值setAttribute.

五、建立document.createTextNode(attriname)//文本節點給得到的getAttribute.

六、用建立的option.appendChild(text)文本節點。

代碼：

 var xmlDoc=xmlReq.responseXML;

                   //  document.getElementById("mydiv").innerHTML=data;

                       var prc=xmlDoc.getElementsByTagName("province");

                       for(var i=0;i<prc.length;i++)

                       {

                        var prcs=prc[i];

                        var attrname=prcs.getAttribute("name");

                        var province=document.createElement("option");

                        province.setAttribute("value", attrname);

                        var textElement=document.createTextNode(attrname);

                        province.appendChild(textElement);

                        var p=document.getElementById("select");

                        p.appendChild(province);

十一、Json數據格式3中格式返回XML HTML JSON

Json對象：是一個無序的「名稱/值/對」集合。一個對象以{左括號開始}右括號結束每一個名稱後跟一個冒號：（名稱/值）對直接使用，逗號分隔。

 

有8個包 加強包，json-lib-2 庫包裝好了Ext_js無刷新 www.open-open.com

 

 

 

 

 

 

這裏出現一個函數eval把一個字符串看成它的參數。

v       List集合轉換json對象

l        1、創建實體類構造方法

l        2、創建LIst集合添加實例化類的 把幾個實例化類添加到list集合中

l        3、直接用 JSONArray js=JSONArray.fromObject(list);

l        4、過濾JsonConfig config=new JsonConfig(); config.setExcludes(new  String[]{「pid」});過濾掉list集合中的Id不生成json

好處是能夠直接顯示出來 不用在jsp頁面中變量循環出來了。

v      一個對象轉換成Json對象。

Province p=new province(1,」吉林省」);

JSONObject jsonObject=JSonObject.fromObject(p);

 

JQuery中AJAX相關工具函數。

問題：元素進行遍歷、同時對一些特需的元素進行判斷如複選框和單選框按鈕。判斷他們是否被選中，判斷表單元素是否被禁用。

v      Serialize()方法 根據包裝集裏全部的成功表單元素，建立正確格式化的、通過URI編碼的查詢字符串。