zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    C语言I博客作业02
    C语言II—博客作业01
    学期总结
    C语言I博客作业08
    C语言I博客作业07
    C语言I博客作业06
    C语言I博客作业05
    C语言I 博客作业04
    C语言II博客作业04
    C语言II博客作业03
  • 原文地址:https://www.cnblogs.com/the-wang/p/7772776.html
Copyright © 2011-2022 走看看