一：得到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. C#：判断100--999之前的水仙花数

    //判断100--999之前的水仙花数.水仙花数举例:153=13+53+33. using System;public class Program  {    public static void ...

  2. wemall app商城源码Android之支付宝通知处理类

    wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之处 ...

  3. ansj 2.0.7 错误例子分析

    我在做一个solr的项目,分词选定了ansj分词. 选择ansj的原因: 1)身边若干朋友的念叨,说是效果不错 2)网上看了若干评论,说是不错 3)自己尝试了一些case,觉得确实不错. 好了,项目中 ...

  4. windows phone 8.1开发：socket通信聊天

    本例用WPF程序做服务器端,windows phone程序做客户端.我们使用基于UDP协议的Socket通信.更多关于socket信息请查看:http://msdn.microsoft.com/zh- ...

  5. 类string解析

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5645248.html 在涉及字符串的时候,我们可以定义字符数组或指针,其实还有一个类,专门是为字符 ...

  6. iOS开发之UIView的常见属性

    1.所有控件都继承自UIView,UIView的常见属性如下: @property(nonatomic,readonly) UIView *superview;获得自己的父控件对象 @property ...

  7. 手动es6编译es5（命令行）

    package.json:"devDependencies": { "babel-cli": "^6.18.0", "babel- ...

  8. ajax使用及代码表示

    最近学习了ajax,记录一下学习写过的代码和一些问题 一.原生ajax var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpReq ...

  9. JDBC（与Oracle的连接）(转)

    JDBC编程步骤:----java与Oracle数据的连接(lomboz_eclipse环境下)  1.在Oracle数据库安装文件夹中找到jdbc文件夹→lib文件夹→classesl2.jar  ...

  10. 【VB超简单入门】六、基本数据类型

    接下来要介绍VB的基本数据类型,为接下来学习变量和常量准备. 计算机只能处理二进制的数据,所以无论什么数据,在CPU里面处理都是一样的,类似101010这样的机器代码,但是让我们直接去写机器代码程序, ...