本文将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。
传统方式：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <form action="SayHello.jsp"> name:<input type="text" name="name"/> <input type="submit" name="submit"/> </form> <% if(request.getParameter("name")!=null&&request.getParameter("name").length()>0) out.print("Hello "+request.getParameter("name")); %> </body> </html>传统方式的实现方式是直接将表单提交到自身的页面，然后在服务器端经过编译后执行其中的Java代码。
Ajax方式（Servlet代码以及配置文件略）：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>SayHello</title> <script type="text/javascript"> //创建XMLHttpReques对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ //Mozilla浏览器 XMLHttpReq=new XMLHttpRequest(); }else{ //IE浏览器 if(window.ActiveXObject){ try{ XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP"); }catch(e){ try{ XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } } } //处理服务器响应结果 function handleResponse() { // 判断对象状态 if (XMLHttpReq.readyState == 4) { // 信息已经成功返回，开始处理信息 if (XMLHttpReq.status == 200) { var out = ""; var res = XMLHttpReq.responseXML; var response= res.getElementsByTagName("response")[0].firstChild.nodeValue; //5. 解析服务器返回的信息,更新用户界面 document.getElementById("Hello").innerHTML = response; } } } //发送客户端的请求 function sendRequest(url){ //1.创建XMLHttpRequest createXMLHttpRequest(); //2.设置回调函数 XMLHttpReq.onreadystatechange=handleResponse; //3.初始化XMLHttpRequest组建并发送请求 XMLHttpReq.open("GET",url,true); //发送请求 XMLHttpReq.send(null); } //开始调用Ajax的功能 function sayHello() { var name=document.getElementById("name").value; //发送请求 sendRequest("SayHell?name="+name); } </script> </head> <body> <font size="1"> name:<input type="text" id="name"/> <input type="button" value="提交" οnclick="sayHello()"/> <div id="Hello"></div> </font> </body> </html>代码解析：
1.创建XMLHttpRequest
2.设置回调函数
3.初始化XMLHttpRequest组建并发送请求
4. 服务器返回响应信息
5. 解析服务器返回的信息,更新用户界面
详细调用过程如下
最终Ajax方式处理请求的效果是通过XMLHttpRequest对象向服务器发送请求，在得到服务器的返回的处理结果以后，文本框中的用户输入信息依然存在，使用Ajax只是刷新了页面的局部区域，把处理的结果展示在页面的指定位置，对于页面的其他部分不会进行刷新。
下一篇：XMLHttpRequest常用方法属性解析
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
