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>
