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. mysqlworkbench 执行update语句报错：You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column

    You are using safe update mode and you tried to update a table without a WHERE that uses a KEY colum ...

  2. pageHelper详解

    详见:https://github.com/pagehelper/Mybatis-PageHelper/edit/master/wikis/zh/HowToUse.md ## 使用方法 1. 引入分页 ...

  3. 【转载】Java下利用Jackson进行JSON解析和序列化

    参考资料: https://blog.csdn.net/sdut406/article/details/85647982 Java下常见的Json类库有Gson.JSON-lib和Jackson等,J ...

  4. enote笔记语言（2）（ver0.5）

    why not(whyn't)                    为什么不(与“why”相反对应,是它的反面.它的矛盾对立面)   how对策 how设计   key-memo:         ...

  5. UVA - 820 Internet Bandwidth（最大流模板题）

    题目: 思路: 直接套最大流的模板就OK了,注意一下输出的格式. 代码: #include <bits/stdc++.h> #define inf 0x3f3f3f3f #define M ...

  6. <SpringMvc>入门七 拦截器

    什么是拦截器 1.SpringMVC框架中的拦截器用于 对处理器 进行预处理和后处理的技术. 2.可以定义拦截器链,按照顺序执行. 3.拦截器和过滤器功能类似,区别在 拦截器 过滤器 过滤器是Serv ...

  7. 一篇入门MongoDB

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

  8. PM2 & chmod +x

    PM2 https://www.npmjs.com/package/pm2 https://github.com/Unitech/pm2 docs https://pm2.io/doc/en/runt ...

  9. Maven安装好后包下载的测试命令和配置变量的查看命令：mvn help:system

    mvn help:system 该命令会打印出所有的Java系统属性和环境变量,这些信息对我们日常的编程工作很有帮助.运行这条命令的目的是为了让Maven执行一个真正的任务.我们可以从命令行输出看到M ...

  10. Luca Canali

    https://github.com/LucaCanali http://cern.ch/canali/