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請求/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() 處理響應結果。
以上就是一個很簡單的Ajax請求實例，歡迎大家學習，下載Ajax請求實例。
您可能感興趣的文章:- AJAX中同時發送多個請求XMLHttpRequest對象處理方法
- Extjs ajax同步請求時post方式參數發送方式
- Jquery Ajax學習實例 向頁面發出請求，返回XML格式數據
- 基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進功能，頁面刷新功能實效問題
- 跨域請求之jQuery的ajax jsonp的使用解惑
- 多ajax請求的各類解決方案(同步, 隊列, cancel請求)
- Ajax請求中的異步與同步，需要注意的地方說明
- AJAX避免用戶重復提交請求實現方案
- JQuery的Ajax跨域請求原理概述及實例
- Js 代碼中,ajax請求地址后加隨機數防止瀏覽器緩存的原因
- 淺析ajax請求json數據并用js解析(示例分析)
- 如何將ajax請求返回的Json格式數據循環輸出成table形式
- AJAX跨域請求json數據的實現方法
- js每隔5分鐘執行一次ajax請求的實現方法
- JQuery的Ajax請求實現局部刷新的簡單實例
- jquery跨域請求示例分享(jquery發送ajax請求)
- 使用jQuery中的when實現多個AJAX請求對應單個回調的例子分享
- jquery的ajax異步請求接收返回json數據實例
- Ajax請求內嵌套Ajax請求示例代碼
- jquery ajax請求方式與提示用戶正在處理請稍等
- ajax請求成功后新開窗口window.open()被攔截解決方法
