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. Xcode 6 Beta 高速官方下载地址

    推荐迅雷下载: http://adcdownload.apple.com//wwdc_2014/xcode_6_beta_ie8g3n/xcode_6_beta.dmg

  2. 梦想CAD控件网页版文字样式

    增加文字样式 用户可以增加文字样式到数据库,并设置其字体等属性,具体实现js代码如下: function CreateText(){ //返回控件的数据库对象 var database =mxOcx. ...

  3. RabbitMQ系列(八)--顺序消费模式和迅速消息发送模式

    MQ使用过程中,有些业务场景需要我们保证顺序消费,而如果一个Producer,一个Queue,多个Consumer的情况下是无法保证顺序的 举例: 1.业务上产生三条消息,分别是对数据的增加.修改.删 ...

  4. python logger日志

    直接上代码 import logging import logging.handlers import datetime import time import threading from conf. ...

  5. Oracle 数据库启动与关闭 各种方式详解整理

    概述 只有具备sysdba和sysoper系统特权的用户才能启动和关闭数据库. 在启动数据库之前应该启动监听程序,否则就不能利用命令方式来管理数据库,包括启动和关闭数据库. 虽然数据库正常运行,但如果 ...

  6. Hdu 5806 NanoApe Loves Sequence Ⅱ(双指针) （C++,Java）

    Hdu 5806 NanoApe Loves Sequence Ⅱ(双指针) Hdu 5806 题意:给出一个数组,求区间第k大的数大于等于m的区间个数 #include<queue> # ...

  7. 勇者斗恶龙 UVA 11292

    Once upon a time, in the Kingdom of Loowater, a minor nuisance turned into a major problem. The shor ...

  8. saltstack(三) grains、pillar的使用

    一,grains grains: 这个跟puppet的facter功能一样.主要负责采集客户端一些基本信息, 这个也完全可以自定义,可以在客户端自定义,然后自动汇报上来:也可以从服务器端定义然后推下去 ...

  9. log 框架 之间的关系

    日志框架分为两大部分 一部分是日志框架的抽象层,一部分是日志框架的具体实现 slf4j: 日志框架的抽象层 log4j,logback 日志框架的具体实现 如上图所示: slf4j的具体实现是:slf ...

  10. 【codeforces 3C】Tic-tac-toe

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 写一个函数判断当前局面是否有人赢. 然后枚举上一个人的棋子下在哪个地方. 然后把他撤回 看看撤回前是不是没人赢然后没撤回之前是不是有人赢了. ...