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() 处理响应结果。
上海岳城科技一个简单的Ajax请求例子
原文地址：http://www.cnblogs.com/lateliya/p/7494274.html