Ajax之XMLHttpRequst对象

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

　　Ajax请求和响应过程如下：

网页调用JavaScript 程序
JavaScript利用浏览器提供的XML对象向Web服务器发送请求
请求的URL资源处理后返回结果给浏览器的XMLHTTP对象
XMLHTTP对象调用实现设置的处理方法
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：

 package org.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 CheckUser extends HttpServlet {

     @Override

     protected void doGet(HttpServletRequest req, HttpServletResponse resp)

             throws ServletException, IOException {

         // TODO Auto-generated method stub

         doPost(req, resp);

     }

     @Override

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         response.setContentType("text/html");

         PrintWriter out = response.getWriter();

         //为方便起见，这里假设数据库中有这些学号

         //在实际应用中应该是从数据库中查询得来的

         String[] xhs = {"01001","01002","01003"};

         //取得用户填写的学号

         String xh = request.getParameter("xh");

         //设置响应内容

         String responseContext = "true";

         for (int  i= 0;  i< xhs.length; i++) {

             //如果有该学号，修改响应内容

             if (xh.equals(xhs[i])) {

                 responseContext="false";

             }

         }

         //将处理结果返回给客户端

         out.print(responseContext);

         out.flush();

         out.close();

     }

 }

web.xml

 <?xml version="1.0" encoding="UTF-8"?>

 <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">

   <display-name>AjaxTest</display-name>

   <servlet>

     <servlet-name>CheckUser</servlet-name>

     <servlet-class>org.servlet.CheckUser</servlet-class>

   </servlet>

   <servlet-mapping>

     <servlet-name>CheckUser</servlet-name>

     <url-pattern>/CheckUser</url-pattern>

   </servlet-mapping>

   <welcome-file-list>

     <welcome-file>index.jsp</welcome-file>

   </welcome-file-list>

 </web-app>

index.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <html>

   <head>

     <title>Ajax应用</title>

   </head>

       <script type="text/javascript">

           var xmlHttp;

           //创建XMLHttpRequest对象

           function createHttpRequest(){

               if(window.ActiveXobject){

               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

               }else if(window.XMLHttpRequest){

               xmlHttp = new XMLHttpRequest();

               }

           }

           function beginCheck(){

               //得到用户填写的学号

               var xh=document.all.xh.value;

               //如果为空

               if(xh==""){

               alert("对不起，请输入注册学号！");

               return ;

               }

           createHttpRequest();

           //将触发器绑定到一个函数

           xmlHttp.onreadystatechange=processor;

           //通过post方法向指定的URL，即Servlet对应URL建立服务器的调用

           xmlHttp.open("post","CheckUser?xh="+xh);

           //发送请求

           xmlHttp.send(null);

           }

           //处理状态改变函数

           function processor(){

           var responseContext;

           //如果响应完成

           if(xmlHttp.readyState==4){

                 //如果返回成功、

                         if (xmlHttp.status == 200) {

                             //取得响应内容

                             responseContext = xmlHttp.responseText;

                             //如果注册名检查有效

                             if (responseContext.indexOf("true")!=-1) {

                                 alert("恭喜你，该学号有效");

                             } else {

                                 alert("对不起，该学号已经被注册！");

                             }

                         }

                     }

                 }

             </script>

   <body>

           <form action="">

               <!-- 当输入框改变时执行bengincheck()函数 -->

                学号:<input type="text" name="xh" onchange="beginCheck()"/><br/>

                口令:<input type="password" name="kl"/>

                <input type="submit" value="注册"/>

           </form>

   </body>

 </html>

巴特西

Ajax之XMLHttpRequst对象

Ajax请求和响应过程如下：

建立项目名为AjaxTest：

最新文章

热门文章