Ajax不是一種新的編程語言,而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。通過Ajax,您可以使用 JavaScript的XMLHttpRequest對(duì)象來直接與服務(wù)器進(jìn)行通信。您可以在不重載頁面的情況與 Web 服務(wù)器交換數(shù)據(jù)。在本文的例子中,我們將演示當(dāng)用戶向一個(gè)標(biāo)準(zhǔn)的HTML表單中輸入數(shù)據(jù)時(shí)網(wǎng)頁如何與web服務(wù)器進(jìn)行通信。
!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>簡(jiǎn)單的Ajax請(qǐng)求/title>
script type="text/javascript">
var xmlHttp;
// 創(chuàng)建XMLHttpRequest對(duì)象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
// 整合url參數(shù)
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方式傳遞參數(shù)
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方式傳遞參數(shù)
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);
}
// 回調(diào)函數(shù)
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
parseResults();
}
}
}
// 處理服務(wù)器響應(yīng)內(nèi)容
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方式傳參數(shù)" onclick="doRequestUsingGET();"/>
br />br />
input type="button" value="用POST方式傳參數(shù)" onclick="doRequestUsingPOST();"/>
/form>
br />
h3>服務(wù)器響應(yīng)內(nèi)容:/h3>
div id="serverResponse">/div>
/body>
/html>
下面來詳細(xì)說明每個(gè)JS函數(shù)的功能。
createXMLHttpRequest() 用來創(chuàng)建XMLHttpRequest對(duì)象。
因?yàn)镮E把XMLHttpRequest實(shí)現(xiàn)為一個(gè)ActiveX對(duì)象,其他瀏覽器(FF/Safari/Opera)把它實(shí)現(xiàn)為一個(gè)本地JavaScript對(duì)象。由于存在這些差別,JavaScript代碼中必須包含有關(guān)的邏輯。
createQueryString() 用來整理參數(shù),將Ajax請(qǐng)求要傳遞的參數(shù)整理成一定的格式。
如果傳遞中文或非ASCII字符必須進(jìn)行URL編碼,本例使用JS的encodeURIComponent()函數(shù)進(jìn)行參數(shù)URL編碼。
doRequestUsingGET() 以HTTP GET方式向服務(wù)器發(fā)送請(qǐng)求,并且傳遞參數(shù)。
XMLHttpRequest對(duì)象的open()方法會(huì)指定將發(fā)出的請(qǐng)求。open()方法取3個(gè)參數(shù):一個(gè)是指示所使用的方法(通常是GET或POST)的串;一個(gè)是表示目標(biāo)資源URL的串;一個(gè)是Boolean值,只是請(qǐng)求是否是異步的。
GET請(qǐng)求時(shí),將傳遞的參數(shù)寫到open方法的url參數(shù)中,此時(shí)send方法的參數(shù)為null。
在某些情況下,有些瀏覽器會(huì)把多個(gè)XMLHttpRequest請(qǐng)求的結(jié)果緩存在同一個(gè)URL。如果對(duì)每個(gè)請(qǐng)求的響應(yīng)不同,這就會(huì)帶來不好的結(jié)果,把當(dāng)前時(shí)間戳追加到URL的最后,就能確保URL的惟一性,從而避免瀏覽器緩存結(jié)果。
本例服務(wù)器端代碼使用的是asp.net(c#)。
doRequestUsingPOST() 以HTTP POST方式向服務(wù)器發(fā)送請(qǐng)求,并且傳遞參數(shù)。
確保open()中指定的方法是POST,需要設(shè)定Content-Type頭信息,模擬HTTP POST方法發(fā)送一個(gè)表單,這樣服務(wù)器才會(huì)知道如何處理上傳的內(nèi)容。設(shè)置頭信息前必須先調(diào)用open方法。
必須使用send方法傳遞參數(shù)。參數(shù)的提交格式和GET方法中url的寫法一樣。
handleStateChange() Ajax回調(diào)函數(shù)。
對(duì)于XMLHttpRequest對(duì)象,onreadystatechange屬性存儲(chǔ)了回調(diào)函數(shù)的指針。當(dāng)XMLHttpRequest對(duì)象內(nèi)部狀態(tài)發(fā)生變化時(shí),就會(huì)調(diào)用這個(gè)回調(diào)函數(shù)。
parseResults() 處理響應(yīng)結(jié)果。
以上就是一個(gè)很簡(jiǎn)單的Ajax請(qǐng)求實(shí)例,歡迎大家學(xué)習(xí),下載Ajax請(qǐng)求實(shí)例。
您可能感興趣的文章:- AJAX中同時(shí)發(fā)送多個(gè)請(qǐng)求XMLHttpRequest對(duì)象處理方法
- Extjs ajax同步請(qǐng)求時(shí)post方式參數(shù)發(fā)送方式
- Jquery Ajax學(xué)習(xí)實(shí)例 向頁面發(fā)出請(qǐng)求,返回XML格式數(shù)據(jù)
- 基于Jquery 解決Ajax請(qǐng)求的頁面 瀏覽器后退前進(jìn)功能,頁面刷新功能實(shí)效問題
- 跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
- 多ajax請(qǐng)求的各類解決方案(同步, 隊(duì)列, cancel請(qǐng)求)
- Ajax請(qǐng)求中的異步與同步,需要注意的地方說明
- AJAX避免用戶重復(fù)提交請(qǐng)求實(shí)現(xiàn)方案
- JQuery的Ajax跨域請(qǐng)求原理概述及實(shí)例
- Js 代碼中,ajax請(qǐng)求地址后加隨機(jī)數(shù)防止瀏覽器緩存的原因
- 淺析ajax請(qǐng)求json數(shù)據(jù)并用js解析(示例分析)
- 如何將ajax請(qǐng)求返回的Json格式數(shù)據(jù)循環(huán)輸出成table形式
- AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法
- js每隔5分鐘執(zhí)行一次ajax請(qǐng)求的實(shí)現(xiàn)方法
- JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
- jquery跨域請(qǐng)求示例分享(jquery發(fā)送ajax請(qǐng)求)
- 使用jQuery中的when實(shí)現(xiàn)多個(gè)AJAX請(qǐng)求對(duì)應(yīng)單個(gè)回調(diào)的例子分享
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- Ajax請(qǐng)求內(nèi)嵌套Ajax請(qǐng)求示例代碼
- jquery ajax請(qǐng)求方式與提示用戶正在處理請(qǐng)稍等
- ajax請(qǐng)求成功后新開窗口window.open()被攔截解決方法