Ajax之XMLHttpRequst对象

　　XMLHttpRequest对象提供客户端与Http服务器异步通信的协议。通过该协议，Ajax可以使页面像桌面应用程序一样，只同服务器进行数据层的交换，而不用每次都刷新页面，也不用每次将数据处理工作提交给服务器来做，这样既减轻了服务器的负担又加快了响应速度，缩短了用户等待的时间。

　　Ajax请求和响应过程如下：

  1. 网页调用JavaScript 程序
  2. JavaScript利用浏览器提供的XML对象向Web服务器发送请求
  3. 请求的URL资源处理后返回结果给浏览器的XMLHTTP对象
  4. XMLHTTP对象调用实现设置的处理方法
  5. JavaScript方法解析返回的数据，利用返回的数据更新页面
XMLHttpRequest对象的方法
abort() 停止当前请求
getAllResponseHeader("header") 将Http请求的所有响应首部作为键值对返回
open("method","url"[,"asyncFlag"[,"userName"[,"password"]]]) asyncFlag=是否非同步标记
send(content) 向服务器发送请求
setRequestHeader("header","value") 把指定首部设置为所提供的值，在调用该方法之前必须先调用open方法
getResponseHeader("header") 返回指定首部的字符串值

 

XMLHttpRequest对象的属性
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>

 

posted @ 2017-11-02 16:39  千彧  阅读(615)  评论(0)  编辑  收藏  举报