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. Windows提高_2.1第一部分：线程

    第一部分:线程 什么是线程? 线程其实可以理解为一段正在执行中的代码,它最少由一个线程内核对象和一个栈组成. 线程之间是没有从属关系的,同一进程下的所有线程都可以访问进程内的所有内容. 主线程其实是创 ...

  2. java虚拟(一)--java内存区域和常量池概念

    一.java运行时数据区 也可以称为java内存区域,和java内存模型不是一回事,不要弄混,这里基于jdk1.8之前 1.1.方法区 线程共享,类装载过程中产生的java.lang.Class对象保 ...

  3. break和continue在多重循环中使用

    break和continue在多重循环中使用 关于break和continue在java中,break的作用是跳出循环,continue的作用是跳出本次循环. 我们一般情况下,这样使用: public ...

  4. 00Cascading Style Sheet

    Cascading Style Sheet CSS(Cascading Style Sheet)即层叠样式表,简称样式表.要理解层叠样式表的概念先要理解样式的概念.样式就是对网页中的 元素(字体.段落 ...

  5. UVA 674 Coin Change （完全背包）

    解法 dp表示目前的种数,要全部装满所以f[0]=1其余为0的初始化是必不可少的 代码 #include <bits/stdc++.h> using namespace std; int ...

  6. TestNG多线程测试-用xml文件实现

    MultiThreadOnXml类: package com.janson.multiThread; import org.testng.annotations.Test; public class ...

  7. 长久不用的mysql报错ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

    mac上安装过mysql: 然而,尝试连接时报错: $ mysql -u root -p Enter password: ERROR 2002 (HY000): Can't connect to lo ...

  8. 腾讯云，体验域名注册解析与SSL证书

    体验域名注册解析与SSL证书 购买域名 任务时间:30min ~ 60min 在腾讯云上购买域名 首先需要在腾讯云上购买域名, 点击以下链接可以观看购买操作的指引 如何在腾讯云上购买域名 域名解析 域 ...

  9. saltstack(六) saltstack Job管理

    一,简介 Jid: job id 格式为%Y%m%d%H%M%S%f master在下发指令消息时,会附带上产生的jid,minion在接收到指令开始执行时,会在本地的cachedir(默认是/var ...

  10. https://gitee.com/tomsun28/bootshiro-------需要研究的项目

    https://gitee.com/tomsun28/bootshiro-------需要研究的项目