非常简单的Ajax请求实例附源码
Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过Ajax，您可以使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。您可以在不重载页面的情况与Web服务器交换数据。在本文的例子中，我们将演示当用户向一个标准的HTML表单中输入数据时网页如何与web服务器进行通信。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>简单的Ajax请求</title>
<scripttype="text/javascript">
varxmlHttp;
//创建XMLHttpRequest对象
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
elseif(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}
}
//整合url参数
functioncreateQueryString(){
varname=document.getElementById("txtName").value;
varsex=document.getElementById("txtSex").value;
varbirthday=document.getElementById("txtBirthday").value;
varqueryString="Name="+encodeURIComponent(name)+"&Sex="+encodeURIComponent(sex)+"&Birthday="+encodeURIComponent(birthday);
returnqueryString;
}
//按照Get方式传递参数
functiondoRequestUsingGET(){
createXMLHttpRequest();
varqueryString="AjaxServer.ashx?";
queryString=queryString+createQueryString()+"&timeStamp="+newDate().getTime();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET",queryString,true);
xmlHttp.send(null);
}
//按POST方式传递参数
functiondoRequestUsingPOST(){
createXMLHttpRequest();
varurl="AjaxServer.ashx?timeStamp="+newDate().getTime();
varqueryString=createQueryString();
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlHttp.send(queryString);
}
//回调函数
functionhandleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
parseResults();
}
}
}
//处理服务器响应内容
functionparseResults(){
varresponseDiv=document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()){
responseDiv.removeChild(responseDiv.childNodes[0]);
}
varresponseText=document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<formaction="#">
<h2>输入你的名字,性别,生日：</h2>
<table>
<tr><td>名字：</td><td><inputtype="text"id="txtName"/></td></tr>
<tr><td>性别：</td><td><inputtype="text"id="txtSex"/></td></tr>
<tr><td>生日：</td><td><inputtype="text"id="txtBirthday"/></td>
</tr>
</table>
<inputtype="button"value="用Get方式传参数"onclick="doRequestUsingGET();"/>
<br/><br/>
<inputtype="button"value="用POST方式传参数"onclick="doRequestUsingPOST();"/>
</form>
<br/>
<h3>服务器响应内容：</h3>
<divid="serverResponse"></div>
</body>
</html>
下面来详细说明每个JS函数的功能。
createXMLHttpRequest()用来创建XMLHttpRequest对象。
因为IE把XMLHttpRequest实现为一个ActiveX对象，其他浏览器(FF/Safari/Opera)把它实现为一个本地JavaScript对象。由于存在这些差别，JavaScript代码中必须包含有关的逻辑。
createQueryString()用来整理参数，将Ajax请求要传递的参数整理成一定的格式。
如果传递中文或非ASCII字符必须进行URL编码，本例使用JS的encodeURIComponent()函数进行参数URL编码。
doRequestUsingGET()以HTTPGET方式向服务器发送请求，并且传递参数。
XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数：一个是指示所使用的方法(通常是GET或POST)的串；一个是表示目标资源URL的串；一个是Boolean值，只是请求是否是异步的。
GET请求时，将传递的参数写到open方法的url参数中，此时send方法的参数为null。
在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果，把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。
本例服务器端代码使用的是asp.net(c#)。
doRequestUsingPOST()以HTTPPOST方式向服务器发送请求，并且传递参数。
确保open()中指定的方法是POST，需要设定Content-Type头信息，模拟HTTPPOST方法发送一个表单，这样服务器才会知道如何处理上传的内容。设置头信息前必须先调用open方法。
必须使用send方法传递参数。参数的提交格式和GET方法中url的写法一样。
handleStateChange() Ajax回调函数。
对于XMLHttpRequest对象，onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象内部状态发生变化时，就会调用这个回调函数。
parseResults()处理响应结果。
以上就是一个很简单的Ajax请求实例，欢迎大家学习，下载Ajax请求实例。