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：

　　

 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对象的更多相关文章

  1. 使用原生JS编写ajax操作XMLHttpRequst对象

    ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便,但是也不能忘记原生的JS去编写ajax; 需要注意的是,很多人在写的时候喜欢只用XMLHttpRequest对象r ...

  2. Ajax的核心对象创建步骤

    * Ajax具有核心对象 * XMLHttpRequest对象 * 如何创建XMLHttpRequest对象 function getXhr(){ // 声明XMLHttpRequest对象 var ...

  3. ajax获取json对象

    ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...

  4. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  5. .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

    前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...

  6. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  7. ajax 传递JSON对象参数

    https://msdn.microsoft.com/zh-cn/library/cc836466(v=vs.94).aspx https://msdn.microsoft.com/zh-cn/lib ...

  8. 转:AJAX中xhr对象详解

    XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML ...

  9. ajax和json对象

    二维数组 首先是输出json字符串的php文件 header("Content-type: text/html; charset=utf-8"); //json设置utf-8 $a ...

随机推荐

  1. c3p0参数详解

    <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> <property name="acquireIncrement"& ...

  2. HDU_3732_(多重背包)

    Ahui Writes Word Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. HDU_1024_dp

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  4. Linux 报错 ifconfig command not found

    1.Linux 中输入ifconfig命令报错:ifconfig command not found 有可能是没有安装ifconfig,如果没有,安装上去 2.查看是不是缺少了ifconfig,它是在 ...

  5. 前端axios发送的数据后端接收不到（没有自动依赖注入）可能的原因

    前端请求头content-type没有进行正确设置,后端无法解析该类型数据,比如说: 后端若想接收json类型的数据,则需要配置相应的转换器,(spring中可使用@RequestBody注解),若没 ...

  6. 【转载】linux下的zookeeper启动

    zookeeper的安装目录:/usr/local/zookeeper-3.4.6/bin/zkServer.sh; 配置文件路径:../conf/zoo.cfg 端口 :2181: ZooKeepe ...

  7. 前端安全 xss

    整体的 XSS 防范是非常复杂和繁琐的,不仅需要在全部需要转义的位置,对数据进行对应的转义.而且要防止多余和错误的转义,避免正常的用户输入出现乱码. 虽然很难通过技术手段完全避免 XSS,但可以总结以 ...

  8. 04StringBuffer相关知识、Arrays类、类型互换、正则、Date相关

    04StringBuffer相关知识.Arrays类.类型互换.正则.Date相关-2018.7.12 1.StringBuffer A:StringBuffer的构造方法: public Strin ...

  9. CentOS \Linux 6版本系统命令及其使用详解

    概述 常用的linux命令,分为文件管理.磁盘管理.用户管理.软件管理.系统管理等. 文件管理 ls命令 使用权限:所有使用者 使用方式:ls [-alrtAFR] [name...] 说明:显示指定 ...

  10. 一篇入门MongoDB

    目录 1.MongoDB 基本介绍 2.MongoDB 基本概念 3.数据库操作 4.集合操作 5.文档操作 6.查询条件 7.索引 1.MongoDB 基本介绍 (1)安装 MongoDB 简单来说 ...