一個簡單的Ajax請求例子
Ajax不是一種新的程式語言,而是一種用於建立更好更快以及互動性更強的Web應用程式的技術。通過Ajax,您可以使用 JavaScript的XMLHttpRequest物件來直接與伺服器進行通訊。您可以在不過載頁面的情況與 Web 伺服器交換資料。在本文的例子中,我們將演示當使用者向一個標準的HTML表單中輸入資料時網頁如何與web伺服器進行通訊。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一個簡單的Ajax請求例子 - Admin10000.com </title> <script type="text/javascript"> var xmlHttp; // 建立XMLHttpRequest物件 function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } // 整合url引數 function createQueryString() { var name = document.getElementById("txtName").value; var sex = document.getElementById("txtSex").value; var birthday = document.getElementById("txtBirthday").value; var queryString = "Name=" + encodeURIComponent(name) + "&Sex=" + encodeURIComponent(sex) + "&Birthday=" + encodeURIComponent(birthday); return queryString; } // 按照Get方式傳遞引數 function doRequestUsingGET() { createXMLHttpRequest(); var queryString = "AjaxServer.ashx?"; queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", queryString, true); xmlHttp.send(null); } // 按POST方式傳遞引數 function doRequestUsingPOST() { createXMLHttpRequest(); var url = "AjaxServer.ashx?timeStamp=" + new Date().getTime(); var queryString = createQueryString(); xmlHttp.open("POST", url, true); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); xmlHttp.send(queryString); } // 回撥函式 function handleStateChange() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { parseResults(); } } } // 處理伺服器響應內容 function parseResults() { var responseDiv = document.getElementById("serverResponse"); if (responseDiv.hasChildNodes()) { responseDiv.removeChild(responseDiv.childNodes[0]); } var responseText = document.createTextNode(xmlHttp.responseText); responseDiv.appendChild(responseText); } </script> </head> <body> <form action="#"> <h2>輸入你的名字,性別,生日:</h2> <table> <tr><td>名字:</td><td><input type="text" id="txtName" /></td></tr> <tr><td>性別:</td><td><input type="text" id="txtSex" /></td></tr> <tr><td>生日:</td><td><input type="text" id="txtBirthday" /></td> </tr> </table> <input type="button" value="用Get方式傳引數" onclick="doRequestUsingGET();"/> <br /><br /> <input type="button" value="用POST方式傳引數" onclick="doRequestUsingPOST();"/> </form> <br /> <h3>伺服器響應內容:</h3> <div id="serverResponse"></div> </body> </html>
下面來詳細說明下上例的每個JS函式的功能。
createXMLHttpRequest() 用來建立XMLHttpRequest物件。
因為IE把XMLHttpRequest實現為一個ActiveX物件,其他瀏覽器(FF/Safari/Opera)把它實現為一個本地JavaScript物件。由於存在這些差別,JavaScript程式碼中必須包含有關的邏輯。
createQueryString() 用來整理引數,將Ajax請求要傳遞的引數整理成一定的格式。
如果傳遞中文或非ASCII字元必須進行URL編碼,本例使用JS的encodeURIComponent()函式進行引數URL編碼。
doRequestUsingGET() 以HTTP GET方式向伺服器傳送請求,並且傳遞引數。
XMLHttpRequest物件的open()方法會指定將發出的請求。open()方法取3個引數:一個是指示所使用的方法(通常是GET或POST)的串;一個是表示目標資源URL的串;一個是Boolean值,只是請求是否是非同步的。
GET請求時,將傳遞的引數寫到open方法的url引數中,此時send方法的引數為null。
在某些情況下,有些瀏覽器會把多個XMLHttpRequest請求的結果快取在同一個URL。如果對每個請求的響應不同,這就會帶來不好的結果,把當前時間戳追加到URL的最後,就能確保URL的惟一性,從而避免瀏覽器快取結果。
本例伺服器端程式碼使用的是asp.net(c#)。
doRequestUsingPOST() 以HTTP POST方式向伺服器傳送請求,並且傳遞引數。
確保open()中指定的方法是POST,需要設定Content-Type頭資訊,模擬HTTP POST方法傳送一個表單,這樣伺服器才會知道如何處理上傳的內容。設定頭資訊前必須先呼叫open方法。
必須使用send方法傳遞引數。引數的提交格式和GET方法中url的寫法一樣。
handleStateChange() Ajax回撥函式。
對於XMLHttpRequest物件,onreadystatechange屬性儲存了回撥函式的指標。當XMLHttpRequest物件內部狀態發生變化時,就會呼叫這個回撥函式。
parseResults() 處理響應結果。
下載本例完整原始碼: AjaxDemo
資源下載:XMLHttp物件中文參考手冊
相關文章
- 一個簡單的「IOC」例子
- 擼一個簡單的MVVM例子MVVM
- ajax請求
- 一個最簡單的 Github workflow 例子Github
- 一個簡單的netty通訊的例子Netty
- 用原生js封裝一個ajax請求方法JS封裝
- JUnit概述及一個簡單例子單例
- ajax請求 juery
- WebRTC:一個視訊聊天的簡單例子Web單例
- 一個簡單的生活例子,感受TRIZ的魅力!
- axios躺坑之路:cookie,簡單請求與非簡單請求。iOSCookie
- 一個簡單的例子瞭解async跟defer
- 一個簡單的例子教會您使用javapJava
- 原生ajax請求&JSONPJSON
- 封裝ajax、axios請求封裝iOS
- springmvc處理ajax請求SpringMVC
- Unity如何連線伺服器: 一個簡單的例子Unity伺服器
- 如何傳送請求以及AJAX
- Ajax請求後臺資料
- ajax請求servlet返回資料Servlet
- KKB : Jquery實現Ajax請求jQuery
- ajax跨域請求之CORS的使用跨域CORS
- 基於jQuery的三種AJAX請求jQuery
- 簡單的實現jsonp跨域請求JSON跨域
- spring 簡單的使用 Hikari連線池 和 jdbc連線mysql 的一個簡單例子SpringJDBCMySql單例
- ajax中POST請求與引數(請求體)設定
- ajax中設定請求頭和自定義請求頭
- python+flask 編寫一個簡單的登入介面例子PythonFlask
- python+flask編寫一個簡單的登入介面例子PythonFlask
- SAP MM採購定價過程的一個簡單例子單例
- 判斷請求是否為Ajax請求的小妙招
- 多個ajax axios請求,呼叫按照順序執行iOS
- 一個簡單的例子理解Kubernetes的三種IP地址型別型別
- 通過一個簡單的例子,瞭解 Cypress 的執行原理
- 簡單使用spring cloud 服務註冊做一個請求轉發中心SpringCloud
- vue2.0 axios post請求傳參問題(ajax請求)VueiOS
- 解決 Laravel 接收非簡單請求時,只有收到 OPTIONS 請求的問題Laravel
- python-對requests請求簡單的封裝Python封裝
- ajax的post或者get伺服器請求伺服器