Ajax的核心是JavaScript对象的XMLHttpRequest。它提供了异步发送请求的能力。简而言之，使用XMLHttpRequest，可以通过JavaScript向服务器发送请求，并能够处理服务器响应，避免阻塞用户的动作。通过使用XMLHttpRequest对象，浏览器通过客户端脚本与服务器交换数据，而Web页面无须频繁的重新加载，Web页面的内容也由客户端脚本动态更新。
整个Ajax应用的工作过程如下：
1、JavaScript脚本使用XMLHttpRequest对象向服务器发送请求。发送请求时，既可以发送GET请求，也可以发送POST请求。
2、JavaScript脚本使用XMLHttpRequest对象解析服务器响应数据。
3、JavaScript脚本通过DOM动态更新HTML页面。也可以为服务器响应数据增加CSS样式表，在当前网页中的某个部分加以显示。
<h3>聊天页面</h3> <p> <textarea id="chatArea" name="chatArea" cols="90" rows="30" readonly="readonly"></textarea> </p> <div align="center"> <input id="chatMsg" name="chatMsg" type="text" size="90" onkeypress="enterHandler(event);"/> <input type="button" name="button" value="提交" onclick="sendRequest();"/> </div>首先要创建XMLHttpRequest对象，使用XMLHttpRequest对象，必须先创建XMLHttpRequest对象，创建XMLHttpRequest的代码如下：
var input = document.getElementById("chatMsg");
input.focus();
var XMLHttpReq;
// 创建XMLHttpRequest对象
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
// DOM 2浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// IE浏览器
try
{
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
}
上面的程序中的代码可以在Internet Explorer、Firfox、Opera等浏览器中创建XMLHttpRequest对象。因为XMLHttpRequest对象在不同的浏览器中实现方式不同，因而在不同的浏览器中创建XMLHttpRequest对象的方式也略有不同。
一旦XMLHttpRequest对象创建成功，系统可以使用XMLHttpRequest发送请求，XMLHttpRequest请求与传统的请求不同，传统的发送请求是提交表单，或者请求新的网络页面——浙江导致浏览器重新发送请求，重新加载新的页面。
而在XMLHttpRequest发送请求则通过JavaScript代码完成，这就避免了页面的刷新——这也是异步发送请求的核心。XMLHttpRequest对象包含send方法用于发送请求。在发送请求之前，应先于请求的URL取得连接，XMLHttpRequest通过open方法打开与请求的URL连接，下面是使用XMLHttpRequest发送请求的JavaScript代码：
// 发送请求函数 function sendRequest() { // input是个全局变量，就是用户输入聊天信息的单行文本框 var chatMsg = input.value; // 完成XMLHttpRequest对象的初始化 createXMLHttpRequest(); // 定义发送请求的目标URL var url = "chat.do"; // 通过open方法取得与服务器的连接 // 发送POST请求 XMLHttpReq.open("POST",url,true); // 设置请求头-发送POST请求时需要该请求头 XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 指定XMLHttpRequest状态改变时的处理函数 XMLHttpReq.onreadystatechange = processResponse; // 清空输入框的内容 input.value = ""; // 发送请求，send的参数包含许多的key-value对。 // 即以：请求参数名=请求参数值 的形式发送请求参数。 XMLHttpReq<span style="font-family: Arial,Helvetica,sans-serif; background-color: rgb(255,255,255);">.send("chatMsg=" + chatMsg);</span>
<span style="font-family: Arial,255);"> }</span>
上面的程序第一行粗体字代码使用open方法打开与请求资源的连接，因为本系统采用POSt方式发送请求参数，因此在请求里增加了Content-Type请求头，并将该发送的请求头的值设为application/x-www-form-urlencoded,这是为了保证请求参数采用合适的格式发送。程序中的代码是发送POST请求的完整过程。
一般而言，使用XMLHttpRequest发送请求应按如下步骤进行：
1、使用open方法连接服务器URL
2、调用setRequestHeader方法为请求设置合适的请求头。根据不同的请求，可能需要设置不同的请求头。
3、制定回调函数。所谓回调函数就是用于检测XMLHttpRequest状态的函数（类似于事件监听器），当XMLHttpRequest的状态发生改变时，该回调函数将被触发而自动执行。
通过上面的 程序中我们发现，在采用Ajax发送请求时，发送请求比传统的Web应用略显复杂。传统的Web应用发送请求有两种形式：
1、在浏览器的地址栏中输入请求的地址后按回车键发送GET请求。
2、提交表单发送POST或GET请求，具体发送何种请求取决于表单元素的method属性。
上面的发送请求的方式都比较简单，基本无须编写任何程序代码。在改为使用Ajax请求后，需要先创建XMLHttpRequest对象。再使用该对象来发送异步请求。
// 处理返回信息函数 function processResponse() { // 当XMLHttpRequest读取服务器响应完成 if (XMLHttpReq.readyState == 4) { // 服务器响应正确（当服务器响应正确时，返回值为200的状态码） if (XMLHttpReq.status == 200) { // 使用chatArea多行文本域显示服务器响应的文本 document.getElementById("chatArea").value = XMLHttpReq.responseText; } else { // 提示页面不正常 window.alert("您所请求的页面有异常。"); } } }
跳转到 chat.do的URL其实为Servlet页面，代码如下：
@WebServlet(urlPatterns={"/chat.do"}) public class ChatServlet extends HttpServlet { public void service(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException { // 设置使用GBK字符集来解析请求参数 request.setCharacterEncoding("utf-8"); String msg = request.getParameter("chatMsg"); if ( msg != null && !msg.equals("")) { // 取得当前用户 String user = (String)request.getSession(true) .getAttribute("user"); // 调用ChatService的addMsg来添加聊天消息 ChatService.instance().addMsg(user,msg); } // 设置响应内容的类型 response.setContentType("text/html;charset=GBK"); // 获取页面输出流 PrintWriter out = response.getWriter(); // 直接生成响应 out.println(ChatService.instance().getMsg()); } }
整个Ajax过程就如上面所述，遇到具体问题，即可修改部分代码 原文链接：https://www.f2er.com/ajax/163377.html