Ajax工作原理简单示例
在本节中将通过两个示例来看一下传统的请求方式和使用AJAX的请求方式有什么不同。
传统的请求响应方式
在传统的方式中，用户通过表单向服务器提交用户信息的，服务器端处理接收到的信息，并把处理结果返回给用户，在这个过程中需要刷新整个页面才能得到服务器返回的结果。
在下面这个示例程序中，向服务器提交一个简单的表单，其中处理这个表单的就是SayHello.jsp这个页面自身。具体的处理方法如下。
<%@ page language=“java” import=“java.util.*” pageEncoding=“gb2312”%>
<html>
<head>
<title>Say Hello--传统请求响应方式</title>
</head>
<body>
<font size=“1”>
<form action=“SayHello.jsp”>
name：<input type=“text” name=“name”/>
<input type=“submit” value=“提交”/>
</form>
<%
if(request.getParameter(“name”)!=null&&
request.getParameter(“name”).length()>0)
out.print(“Hello “+request.getParameter(“name”));
%>
</font>
</body>
</html>
在上面这段程序实现的功能非常简单，仅仅是取出表单的内容，然后生成新的字符串，并在页面中打印生成的字符串。在提交表单以后，整个页面都会刷新。并且从显示结果可以看出，在得到服务器处理结果的同时，文本框中的输入内容已经被刷新，这就是传统请求响应的基本处理方式。
使用Ajax的请求方式
在本节中将展示Ajax处理请求响应的方式。此方式不会对整个页面进行刷新，用户的输入信息并不依靠表单来提交，而是通过XMLHttpReques对象传递给服务器。下面就是使用Ajax向服务器进行交互的JSP页面。
<%@ page language=“java” import=“java.util.*” pageEncoding=“gb2312”%>
<html>
<head>
<title>Say Hello--Ajax请求响应方式</title>
<script language=“javascript”>
//创建XMLHttpReques对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
//Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
} else{
// IE浏览器
if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject(“Msxml2.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;
document.getElementById(“hello”).innerHTML = response;
}
}
}
//发送客户端的请求
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open(“GET”, url, true);
//指定响应函数
XMLHttpReq.onreadystatechange = handleResponse;
// 发送请求
XMLHttpReq.send(null);
}
//开始调用Ajax的功能
function sayHello()
{
var name = document.getElementById(“name”).value;
//发送请求
sendRequest(“SayHello?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>
在上面这个JSP页面中，使用JavaScript创建了XMLHttpRequest对象，通过这个对象把用户的输入信息作为参数传递给服务器。并且在JSP页面中，还接受服务器返回的处理结果，并在指定的区域中显示处理的结果。
此处采用Servlet接受来自客户端的请求。在Servlet中，接收XMLHttpRequest对象传递过来的参数，并且根据处理的结果生成XML文档，然后把这个XML文档返回到JSP页面，下面就是这个Servelet的具体代码。
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SayHello extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置生成文件的类型和编码格式
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
String output = "";
//处理接收到的参数，生成响应的XML文档
if(request.getParameter("name")!=null
&&request.getParameter("name").length()>0)
output="<response>Hello"+request.getParameter("name")+"</response>";
out.println(output);
out.close();
}
}
上面这个Servlet需要在web.xml中进行如下配置，然后才可以在JSP页面中进行访问。
<servlet>
<servlet-name>SayHello</servlet-name>
<servlet-class>servlets.SayHello</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SayHello</servlet-name>
<url-pattern>/SayHello</url-pattern>
</servlet-mapping>
上面这个示例程序的运行结果如图8.2所示。在图中可以看出，得到服务器返回的处理结果以后，文本框中的用户输入信息仍然存在，使用AJAX只是刷新了页面的局部区域，把处理的结果展示在页面的指定位置，对于页面的其他部分不会进行刷新。
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
