Ajax用法簡單教程

非同步互動和同步互動

• 要說Ajax就不得不說，非同步傳輸和同步傳輸了。

• 非同步是值：發送方發出資料後，不等接收方發迴回應，接著發送下一個資料包的通訊方式。

• 同步是指：發送方發出資料後，等待接收方傳回回應以後才發送下一個資料包的通訊方式。

• 也可以理解為：

• 非同步傳輸：你傳吧，我去做我的事了，傳輸完了告訴我一聲。

• 同步傳輸：你現在傳輸，我要看著你傳輸完成，去做別的事。

什麼是Ajax？

• Ajax被認為是(Asynchronous JavaScript and Xml)的縮寫。

• 現在，允許瀏覽器與伺服器通訊而無須刷新目前頁面的技術成為Ajax。

Ajax的工作原理。

• Ajax的核心是JavaScript物件XmlHttpRequest。該物件在Internet Explorer5首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest可讓您使用JavaScript向伺服器提出請求並處理回應，而不會阻塞使用者。

• Ajax採用非同步互動過程。 Ajax在使用者與伺服器之間引入一個中間媒介，從而取消了網路互聯過程中的處理-等待-處理-等待缺點。

• 使用者的瀏覽器在執行任務時即載入了Ajax引擎。 Ajax引擎使用JavaScript語言編寫，通常藏在一個隱藏的框架中。它負責編譯使用者介面與伺服器之間的互動。

• Ajax引擎允許使用者與應用軟體之間的互動過程非同步進行，獨立於使用者與網路伺服器間的交流。現在，可以用JavaScript呼叫Ajax引擎來取代產生一個HTTP的使用者動作，記憶體中的資料編輯，頁面導航，資料校驗這些不需要重新載入整個頁面的需求可以交給Ajax來執行。

• 使用Ajax，可以為Jsp，開發人員，終端使用者帶來可見的便捷。

Ajax包含的技術：

• Ajax並不是一項新技術，其實是多種技術的綜合，包含JavaScript，XHtml和CSS，Dom，Xml和XmlHttpRequest技術。

• 伺服器端語言：伺服器需要具備向瀏覽器傳送特定訊息的能力。 Ajax與伺服器端語言無關。

• Xml(可擴展標記語言)是描述資料的格式。 AJAX 程式需要某種格式化的格式來在伺服器和用戶端之間傳遞訊息，XML 是其中的一種選擇。

• XHTML（eXtended Hypertext Markup Language,使用擴充超媒體標記語言）和 CSS（Cascading Style Sheet,級聯樣式單）標準化呈現。
  

• DOM（Document Object Model,文件物件模型）實作動態顯示與互動。
  

• 使用XMLHTTP元件XMLHttpRequest物件進行非同步資料讀取。
  

• 使用JavaScript綁定和處理所有資料。
  

Ajax的缺陷：

• Ajax並不是完美的技術，也有缺陷：

• ##AJAX大量使用了Javascript和AJAX引擎，而這個取決於瀏覽器的支援。 IE5.0以上、Mozilla1.0、NetScape7以上版本才支持，Mozilla雖然也支援AJAX，但提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程式必須測試針對各個瀏覽器的相容性。
  

• AJAX更新頁面內容的時候並沒有刷新整個頁面，因此，網頁的後退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新的。這個就需要在明顯位置提醒用戶「數據已更新」。 
  

• 對串流媒體的支援沒有FLASH、Java Applet好。
  

Ajax的核心XMLHttpRequest物件：

• XMLHttpRequest是XMLHTTP元件的對象，透過這個對象，AJAX可以像桌面應用程式一樣只同伺服器進行資料層面的交換，而不用每次都刷新介面，也不用每次將資料處理的工作都交給伺服器來做；這既減輕了伺服器負擔又加快了回應速度、縮短了使用者等待的時間。 
  

• XMLHttpRequest最早是在IE5中以ActiveX元件的形式實現的。非W3C標準。
  

• 建立XMLHttpRequest物件(由於非標準所以實作方法不統一)：

• #Internet Explorer把XMLHttpRequest實作為一個ActiveX物件。
  

• 其他瀏覽器（Firefox、Safari、Opera…）把它實作為一個本地的JavaScript物件。
  

• XMLHttpRequest在不同瀏覽器上的實作是相容的，所以可以用同樣的方式存取XMLHttpRequest實例的屬性和方法，而不管這個實例創建的方法是什麼。
  

• 初始化程式碼如下：

  function   createXmlHttpRequest(){
     var xmlHttp;
     try{    //Firefox, Opera 8.0+, Safari
             xmlHttp=new XMLHttpRequest();
      }catch (e){
             try{    //Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }catch (e){
                    try{
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e){}  
             }
      }
     return xmlHttp;
   }

XMLHttpRequest物件方法：

• abort()：停止目前請求。

• getAllResponseHeader()：把HTTP請求的所有回應首部當作key/value對回傳。

• getResponseHeader("headerLabel")：傳回指定首部的字串值。

• open("method","url")：建立對伺服器的調用，method參數可以是GET，POST。 url參數可以是相對url或絕對url。這個方法還包含3個可選參數。

• send(content)：傳送請求給伺服器。

• setRequestHeader("label","value")：把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open()方法。

XMLHttpRequest物件屬性：

• onreadystatechange：状态改变的事件触发器。

• readyState：对象状态：

• 0=未初始化

• 1=读取中

• 2=已读取

• 3=交互中

• 4=完成

• responseText：服务器进程返回数据的文本版本。

• responseXML：服务器进程返回数据的 兼容DOM的Xml文档对象。

• status：服务器返回的状态码，如404=“文件未找到”，200=“成功”。

• statusText：服务器返回的状态文本信息。

发送请求的属性和方法(重要)，使用以下3个关键部分:

• openreadystatechange事件处理函数。

• 该事件处理函数由服务器触发，而不是用户。

• 在Ajax执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。

• 每次 readyState 属性的改变都会触发 readystatechange事件，这个是核心。
  

• open(method, url, asynch)方法。

• XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
  

• method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
  

• 在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。

  var url = "GetAndPostExample?timeStamp=" + new Date().getTime();

• url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
  

• asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

• send(data)方法。

• open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令。
  

• data：将要传递给服务器的字符串。
  

• 若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null);
  

• 当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
  

• 完整的 Ajax 的 GET 请求示例：

  //创建Ajax引擎
  var xmlHttpReq = createXmlHttpRequest();  
                  xmlHttpReq.onreadystatechange=function(){  
                      if(xmlHttpReq.readyState==4){  
                          if(xmlHttpReq.status==200){  
                              document.getElementById("info").innerHTML=xmlHttpReq.responseText;  
                          }  
                      }  
                  }  
  
  xmlHttpReq.open("post","/webLogic/test_test.do",true);

• setRequestHeader(header,value)：
  

• 当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。
  

• Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成。
  

• 参数header： 首部的名字; 参数value：首部的值。
  

• 如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。
  

• 该方法必须在open()之后才能调用.
  

• 完整的 Ajax 的 POST 请求示例：

  var xmlHttpReq = createXmlHttpRequest();
  				xmlHttpReq.onreadystatechange=function(){
  					if(xmlHttpReq.readyState==4){
  						if(xmlHttpReq.status==200){
  							document.getElementById("info").innerHTML=xmlHttpReq.responseText;
  						}
  					}
  				}
  				
  				xmlHttpReq.open("post","/webLogic/test_test.do",true);
  				xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  				xmlHttpReq.send("username="+"德玛"+"&pwd="+"123");

接受--方法和属性介绍：

• 用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中，XMLHttpRequest 的如下属性可被服务器更改：
  

• 如果服务器返回的是 XML， 那么数据将储存在 responseXML 属性中。
  

• 只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml。
  

• XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
  

• 当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。

  if(xmlHttpReq.readyState==4){
  						if(xmlHttpReq.status==200){
  							document.getElementById("info").innerHTML=xmlHttpReq.responseText;
  						}
  					}

• 服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
  

• 常用状态码及其含义：
  

• 在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应
  

• 404 没找到页面(not found)
  

• 403 禁止访问(forbidden)
  

• 500 内部服务器出错(internal service error)
  

• 200 一切正常(ok)
  

• 304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
  

• readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
  

• 每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。
  

• readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4
  

• 0 代表未初始化。 还没有调用 open 方法
  

• 1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
  

• 2 代表已加载完毕。send 已被调用。请求已经开始
  

• 3 代表交互中。服务器正在发送响应
  

• 4 代表完成。响应发送完毕
  

• readyState
  

• status
  

• responseText
  

• responseXML
  

Ajax的具体使用：

• AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：
  

• responseText：将传回的信息当字符串使用；
  

• responseXML：将传回的信息当XML文档使用，可以用DOM处理。

  function processResponse(){
     if(XMLHttpReq.readyState==4){ //判断对象状态 4代表完成
             if(XMLHttpReq.status==200){ //信息已经成功返回，开始处理信息
                    document.getElementById("chatArea").value=XMLHttpReq.responseText;
            }
     }
        }

• 响应需要做什么：

• 处理响应处理函数都应该做什么。
  　　首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
  if (http_request.readyState == 4) {
  // 信息已经返回，可以开始处理
  } else {
  // 信息还没有返回，等待
  }
  　　服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
  if (http_request.status == 200) {
  // 页面正常，可以开始处理信息
  } else {
  // 页面有问题
  }
  

• 向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。 http_request.open('GET', 'http://www.example.org/some.file', true);
  http_request.send(null)
  

• 按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。
  

• 注意:如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：
  

• http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
  这时资料则以查询字符串的形式列出，作为send的参数，例如：
  name=value&anothername=othervalue&so=on

  //发送请求
  function sendRequest(){
  //获取文本框的值
  var chatMsg=input.value;
  var url="chatServlet.do?charMsg="+chatMsg;
  //建立对服务器的调用
  XMLHttpReq.open("POST",url,true);
  //设置MiME类别,如果用 POST 请求向服务器发送数据，
  //需要将"Content-type" 的首部设置为 "application/x-www-form-urlencoded".
  //它会告知服务器正在发送数据，并且数据已经符合URL编码了。
  XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  //状态改变的事件触发器,客户端的状态改变会触发readystatechange事件,
  //onreadystatechange会调用相应的事件处理函数
  XMLHttpReq.onreadystatechange=processResponse;
  //发送数据
  XMLHttpReq.send(null);
  }

• 对象初始化

  function   createXmlHttpRequest(){
     var xmlHttp;
     try{    //Firefox, Opera 8.0+, Safari
             xmlHttp=new XMLHttpRequest();
      }catch (e){
             try{    //Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }catch (e){
                    try{
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e){}  
             }
      }
     return xmlHttp;
   }

• 发送请求
  

• 服务器接收
  

• 服务器响应
  

• 客户端接收，返回两种格式：
  

• 修改客户端页面内容。
  

• 只不过这个过程是异步的。
  

• 完整的如下：

  var xmlHttpReq = createXmlHttpRequest();
  				xmlHttpReq.onreadystatechange=function(){
  					//为4表示请求和响应结束
  					if(xmlHttpReq.readyState==4){
  						//200表示响应成功
  						if(xmlHttpReq.status==200){
  							//在div上添加action返回的值
  							document.getElementById("info").innerHTML=xmlHttpReq.responseText;
  						}
  					}
  				}
  				//这是get方式发送数据，中文记得在接受时进行编码
  				xmlHttpReq.open("post","/webLogic/test_test.do?username=aaa",true);
  				//post请求时一定要加这个请求头
  //				xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  //				xmlHttpReq.send("username="+"德玛"+"&pwd="+"123");//这是post请求的发送数据方法
  				//get方式send(null)，写了也没用
  				xmlHttpReq.send(null);

以上是Ajax用法簡單教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn