一：得到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. Isomorphic Strings leetcode

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  2. 算法模板——线段树6（二维线段树：区域加法+区域求和）（求助phile）

    实现功能——对于一个N×M的方格,1:输入一个区域,将此区域全部值作加法:2:输入一个区域,求此区域全部值的和 其实和一维线段树同理,只是不知道为什么速度比想象的慢那么多,求解释...@acphile ...

  3. Python--校园网爬虫记

    查成绩,算分数,每年的综合测评都是个固定的过程,作为软件开发者,这些过程当然可以交给代码去做,通过脚本进行网络请求获取数据,然后直接进行计算得到基础分直接填表就好了,查成绩再手动计算既容易出错也繁琐, ...

  4. ST 单元测试之maven安装

    junit是用于单元测试的jar包,可以直接下载然后粘贴至lib目录,maven是专门的包管理工具,所以尝试安装maven. 安装maven之前需要先安装好java以及eclipse,在相应的官网下载 ...

  5. Archlinux 升级 pacman 时遇到的问题及其解决

    这是 Archlinux 升级时经常碰到的老问题.提示如下 问题来了 # yaourt -Syua ==> 警告:使用 root 用户构建软件包存在风险. 请使用非特权用户运行 yaourt . ...

  6. 学生选课数据库SQL语句45道练习题整理及mysql常用函数（20161019）

    学生选课数据库SQL语句45道练习题: 一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四 ...

  7. 基于Spring Cloud和Netflix OSS构建微服务，Part 2

    在上一篇文章中,我们已使用Spring Cloud和Netflix OSS中的核心组件,如Eureka.Ribbon和Zuul,部分实现了操作模型(operations model),允许单独部署的微 ...

  8. ubuntu14.04下chrome浏览器的安装

    ubuntu 64位 1.下载chrome安装包: sudo wget https://dl.google.com/linux/direct/google-chrome-stable_current_ ...

  9. CDN，你了解多少？

    大家对CDN并不陌生,工作中或多或少都有所接触,最近也有人问到,在此对CDN相关概念和流程做下总结,希望还能对其他朋友也有所帮助. 一.什么是CDN 维基百科上是这样定义的: CDN:内容分发网络(C ...

  10. centos下美团sql优化工具SQLAdvisor的安装

    1.克隆代码 cd /usr/local/src/git clone https://github.com/Meituan-Dianping/SQLAdvisor.git 2.安装依赖(ubuntu下 ...