一：得到XMLHttpRequest对象

　　ajax其实只需要学习XMLHttpRequest一个对象

　　大多数浏览器都支持：　　

var xmlHttp = new XMLHttprequest();

　　IE 6.0:

var mltHttp = new ActiveXObject("Msxml2.XMLHTTP");

　　IE 5.5 及更早的IE

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

　　* 编写创建XMLHttpRequest对象函数　　

function createXMLHttpRequest(){

            try{

           return  new XMLHttpRequest();

     }catch(e){

            try{

                  return new ActiveXObject("Msxml2.XMLHTTP");

           }catch(e){

                    try{

                           return new ActiveXObject(Microsoft.XMLHTTP');

                   }catch(e){

                           throw e；

                   }

          }

    }

}

二：打开与服务器的链接

　　xmlHttp.open()用来打开与服务器的链接

　　参数：请求方式，请求URL，请求是否为异步

xmlHttp.oprn("GET","/AServlet",true);

三：发送请求　

xmlHttp.send(null);//如果不写null可能导致部分浏览器无法使用

GET请求必须写null

四：

　　要在xmlHttp对象的一个事件上注册监听器：onreadystatechange

　　得到xmlHttp对象的状态：

var state = xmlHttp.readyState;//可能是0、1、2、3、4

　　得到服务器响应的状态码

var status = xmlHttp.status;//例如200、404、500

　　得到服务器响应的内容

var content = xmlHttp.responseText;//得到服务器响应的文本格式的内容

var content = xmlHttp.responseXML;//得到服务器响应的XML响应内容，它是Document对象了
xmlHttp.onreadystatechange = function(){//xmlHttp的5种状态都会调用本方法

    if(xmlHttp.readyState ==4 && xmlHttp.status ==200){//双重判断，既要响应成功，又要服务器响应结束

    //获取服务器响应的内容

        var text = xmlHttp.responseText;

    }

};

五：POST(如果发送请求时带有参数，一般使用POST请求）

　　open　:

xmlHttp.open("POST");

　　添加一步：设置Content-Type请求头

xmlHttp.setRequestHeander("Content-Type","application/x-www-form-urlencoded");

　　send:

xmlHttp.send("username=xxx&password=xxx");

jsp

<%--

  Created by IntelliJ IDEA.

  User: YuWenHui

  Date: 2017/4/20 0020

  Time: 19:12

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>

  <head>

    <title>AJAX</title>

      <script type="text/javascript">

          function createXMLHttpRequest() {

              try {

                    return new XMLHttpRequest();

              }catch (e){

                  try {

                         return new ActiveXObject("Msxml2.XMLHTTP");

                  }catch (e){

                      try {

                            return new ActiveXObject("Microsoft.XMLHTTP");

                      }catch (e){

                            throw e;

                      }

                  }

              }

          }

          window.onload = function () {

              var username = document.getElementById("username");

              username.onblur=function () {

                  var xmlHttp = createXMLHttpRequest();

                  xmlHttp.open("POST","<c:url value='/ValidateUsenameServlet'/> ",true);

                  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                  xmlHttp.send("username="+username.value);

                  xmlHttp.onreadystatechange=function () {

                      if(xmlHttp.readyState==4 && xmlHttp.status ==200){

                          var span = document.getElementById("errorSpan");

                          if(xmlHttp.responseText == 1){

                             span.innerHTML="该用户名已被注册";

                          }else {

                              span.innerHTML="";

                          }

                      }

                  }

              }

          }

      </script>

  </head>

  <body>

    <h1>测试用户名是否被注册</h1>

    <form action="" method="post">

        用户名：<input type="text" name="username" ><span name="errorSpan"></span><br/>

        密  码：<input type="password" name="password"><br>

        <input type="submit" value="登陆">

    </form>

  </body>

</html>

sevlet

package servlet;

import java.io.IOException;

/**

 * Created by YuWenHui on 2017/4/20 0020.

 */

public class ValidateUsenameServlet extends javax.servlet.http.HttpServlet {

    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");

        request.setCharacterEncoding("utf-8");

        String name = request.getParameter("username");

        if ("yuwenhui".equalsIgnoreCase(name) || "余文辉".equalsIgnoreCase(name)){

            response.getWriter().print("1");

        }else {

            response.getWriter().print("0");

        }

    }

}

ajax发送异步请求的更多相关文章

  1. AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  2. AJAX发送异步请求教程详解

    AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...

  3. JQ+AJAX 发送异步请求

    1. load() ; 作用:通过ajax 请求从服务器加载数据,并添加到符合要求的节点上 用法:$node.load(请求地址,请求参数) 请求参数写法: --"username=admi ...

  4. Ajax发送异步请求（四步操作）

    1.第一步(得到XMLHttpRequest) *ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!! *得到XMLHttpRequest >大多数浏 ...

  5. 使用AJAX技术发送异步请求，HTTP服务端推送

    使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...

  6. 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送

    1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...

  7. Ajax发送POST请求SpringMVC页面跳转失败

    问题描述:因为使用的是SpringMVC框架,所以想使用ModelAndView进行页面跳转.思路是发送POST请求,然后controller层中直接返回相应ModelAndView,但是这种方法不可 ...

  8. 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  9. MVC的Ajax的异步请求

    MVC的Ajax的异步请求 在这里小写一下MVC的异步请求的一点小总结. 个人认为是有两种的,一种就是跟webform一样的,依旧是使用jQuery的$.get()方法,只是请求地址不同,webfor ...

随机推荐

  1. 【转】请求处理机制其二：Django中间件的解析

    Middleware 开始工作了 get_response 做的第一件事就是遍历处理器的 _request_middleware 实例变量并调用其中的每一个方法,传入 HttpRequest 的实例作 ...

  2. JavaScript实现常见排序算法

    列表 冒泡排序 选择排序 插入排序 快速排序 希尔排序 归并排序 冒泡排序 // 输入:[5, 6, 3, 4, 8, 0, 1, 4, 7] // 输出:[0, 1, 3, 4, 4, 5, 6, ...

  3. java 反射与常用用法

    java通常是先有类再有对象,有对象我就可以调用方法或者属性. 反射其实是通过Class对象来调用类里面的方法.通过反射可以调用私有方法和私有属性.大部分框架都是运用反射原理. 如何获得Class对象 ...

  4. WPF+AE开发小结--TOCControl右键菜单删除图层

    1.WPF项目中添加toccontrol控件,如何添加,网上有很多方法,可自行搜索,这里不再赘述,代码如下 <Window x:Class="AE.MainWindow" x ...

  5. 直接在CMake项目中编译GoogleTest和GoogleMock作为项目的一部分

    直接在CMake项目中编译GoogleTest和GoogleMock作为项目的一部分 本文是关于如何将GoogleTest和GoogleMock在没有预先编译安装在机器的情况下,直接在项目中作为项目的 ...

  6. 第六章:3D向量类

    第一节:类接口的设计 1.好的类在设计之前首先要回答下列问题:“这些类将包含哪些数据?”,“这个类将提供什么样的操作?”,“在哪些数据上执行操作?”. 我们已经知道我们要设计的是3D向量类,用来存储x ...

  7. JS——控制标记的样式

    1.定义一个div,宽度为100px,高度为100px,背景色为粉色. 定义一个事件,鼠标移入时背景色变为蓝色,宽度变为200px. 定义一个事件,鼠标移出时背景色变为红色. html文件: < ...

  8. jQuery Ajax 实例 全解析(转)

    1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...

  9. linux监控流量脚本

    #!/bin/bashRx=`ifconfig eno16777736 | grep RX | grep packets | awk '{print $5}'`Tx=`ifconfig eno1677 ...

  10. js获取url中的参数方法

    直接调用函数即可,函数如下: function getURLParam(name) { return decodeURIComponent((new RegExp('[?|&]' + name ...