XMLHttpRequest对象提供客户端与Http服务器异步通信的协议。通过该协议,Ajax可以使页面像桌面应用程序一样,只同服务器进行数据层的交换,而不用每次都刷新页面,也不用每次将数据处理工作提交给服务器来做,这样既减轻了服务器的负担又加快了响应速度,缩短了用户等待的时间。
Ajax请求和响应过程如下:
- 网页调用JavaScript 程序
- JavaScript利用浏览器提供的XML对象向Web服务器发送请求
- 请求的URL资源处理后返回结果给浏览器的XMLHTTP对象
- XMLHTTP对象调用实现设置的处理方法
- JavaScript方法解析返回的数据,利用返回的数据更新页面
abort() | 停止当前请求 |
getAllResponseHeader("header") | 将Http请求的所有响应首部作为键值对返回 |
open("method","url"[,"asyncFlag"[,"userName"[,"password"]]]) | asyncFlag=是否非同步标记 |
send(content) | 向服务器发送请求 |
setRequestHeader("header","value") | 把指定首部设置为所提供的值,在调用该方法之前必须先调用open方法 |
getResponseHeader("header") | 返回指定首部的字符串值 |
onreadystatechange | 状态该表触发器,每个状态改变都会触发这个事件触发器 |
readyState |
对象状态: 0=未初始化 1=正在加载 2=已加载 3=交互中 4=完成 |
responseText | 服务器的相应,字符串 |
responseXML | 服务器的相应,XML,该对象可以解析为一个DOM对象 |
status | 服务器返回的HTTP状态码 |
statusText | HTTP状态码的相应文本 |
建立项目名为AjaxTest:
编写Servlet 类 CheckUser:
1 package org.servlet;
2
3 import java.io.IOException;
4 import java.io.PrintWriter;
5
6 import javax.servlet.ServletException;
7 import javax.servlet.http.HttpServlet;
8 import javax.servlet.http.HttpServletRequest;
9 import javax.servlet.http.HttpServletResponse;
10
11 public class CheckUser extends HttpServlet {
12
13 @Override
14 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
15 throws ServletException, IOException {
16 // TODO Auto-generated method stub
17 doPost(req, resp);
18 }
19 @Override
20 public void doPost(HttpServletRequest request, HttpServletResponse response)
21 throws ServletException, IOException {
22 response.setContentType("text/html");
23 PrintWriter out = response.getWriter();
24 //为方便起见,这里假设数据库中有这些学号
25 //在实际应用中应该是从数据库中查询得来的
26 String[] xhs = {"01001","01002","01003"};
27 //取得用户填写的学号
28 String xh = request.getParameter("xh");
29 //设置响应内容
30 String responseContext = "true";
31 for (int i= 0; i< xhs.length; i++) {
32 //如果有该学号,修改响应内容
33 if (xh.equals(xhs[i])) {
34 responseContext="false";
35 }
36 }
37 //将处理结果返回给客户端
38 out.print(responseContext);
39 out.flush();
40 out.close();
41
42 }
43
44 }
web.xml
1 <?xml version="1.0" encoding="UTF-8"?>
2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
3 <display-name>AjaxTest</display-name>
4 <servlet>
5 <servlet-name>CheckUser</servlet-name>
6 <servlet-class>org.servlet.CheckUser</servlet-class>
7 </servlet>
8 <servlet-mapping>
9 <servlet-name>CheckUser</servlet-name>
10 <url-pattern>/CheckUser</url-pattern>
11 </servlet-mapping>
12 <welcome-file-list>
13 <welcome-file>index.jsp</welcome-file>
14 </welcome-file-list>
15 </web-app>
index.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2
3 <html>
4 <head>
5 <title>Ajax应用</title>
6 </head>
7 <script type="text/javascript">
8 var xmlHttp;
9 //创建XMLHttpRequest对象
10 function createHttpRequest(){
11
12 if(window.ActiveXobject){
13 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
14 }else if(window.XMLHttpRequest){
15 xmlHttp = new XMLHttpRequest();
16 }
17 }
18 function beginCheck(){
19 //得到用户填写的学号
20 var xh=document.all.xh.value;
21 //如果为空
22 if(xh==""){
23 alert("对不起,请输入注册学号!");
24 return ;
25 }
26 createHttpRequest();
27 //将触发器绑定到一个函数
28 xmlHttp.onreadystatechange=processor;
29 //通过post方法向指定的URL,即Servlet对应URL建立服务器的调用
30 xmlHttp.open("post","CheckUser?xh="+xh);
31 //发送请求
32 xmlHttp.send(null);
33 }
34 //处理状态改变函数
35 function processor(){
36 var responseContext;
37 //如果响应完成
38 if(xmlHttp.readyState==4){
39 //如果返回成功、
40 if (xmlHttp.status == 200) {
41 //取得响应内容
42 responseContext = xmlHttp.responseText;
43 //如果注册名检查有效
44 if (responseContext.indexOf("true")!=-1) {
45 alert("恭喜你,该学号有效");
46 } else {
47 alert("对不起,该学号已经被注册!");
48 }
49 }
50 }
51
52 }
53 </script>
54 <body>
55 <form action="">
56 <!-- 当输入框改变时执行bengincheck()函数 -->
57 学号:<input type="text" name="xh" onchange="beginCheck()"/><br/>
58 口令:<input type="password" name="kl"/>
59 <input type="submit" value="注册"/>
60 </form>
61 </body>
62 </html>