[01] AJAX

1、概述

AJAX，“Asynchronous JavaScript And XML”的简称，即“异步的JavaScript和XML”。AJAX的作用在于页面中，它可以异步提交请求，避免整个刷新整个页面。

我们常见的某些网站的注册，在输入用户名之后，明明还没有点击注册按钮，可能会看到页面显示“用户名已存在”之类的字眼，就是因为在你输完用户名之后，页面已经异步将你的用户名发送到服务器进行查重，并将结果返回，在页面进行局部显示，而你悄然不知已经完成了一次请求，页面也没有刷新。

2、XMLHttpRequest对象

要想使用AJAX技术，那么就要用到对象XMLHttpRequest，异步请求的发送和响应的接收，都是由该对象完成的。XMLHttpRequest对象是浏览器内建对象，而我们可以通过JavaScript代码进行创建和使用：

xmlHttp = new XMLHttpRequest();
//老版本IE（IE5/IE6）xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

由上可知，不同的浏览器对该对象的实现也有所不同，在IE中微软使用ActiveX对象实现，而其他浏览器厂商则将其作为一个本地JavaScript对象实现。所以在使用AJAX时，考虑到浏览器兼容的问题，往往也按照以下方式判断创建：

if(window.ActiveObject) {

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

} else if (window.XMLHttpRequest) {

    xmlHttp = new XMLHttpRequest();

}

if(window.ActiveObject) {

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

} else if (window.XMLHttpRequest) {

    xmlHttp = new XMLHttpRequest();

2.1 属性

XMLHttpRequest对象中封装了一系列属性：

属性名	说明	备注
readyState	返回当前状态	0-4共五个值 0：“未初始化”，表已经创建XMLHttpRequest对象，但尚未初始化请求对象 1：“打开”，已调用XMLHttpRequest的open()方法，准备好发送请求 2：“发送”，已调用XMLHttpRequest的send()方法，已发送请求，尚未收到响应 3："正在接收"，已收到响应头信息，消息体还没有完全接收 4：“已加载”，响应已完全接收
status	返回当前服务器状态	状态码详见《HTTP状态消息》
statusText	同status，但以文字表示	同上
onreadystatechange	事件触发器	readyState、status发生变化时会触发该项，往往指定为JS函数，如： xmlHttpRequest.onreadystatechange = callback;
responseText	接收服务器端返回的文本	返回内容以字符串形式存在
responseXML	接收服务器响应	响应内容若以XML存在，可解析为DOM对象，如： var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;

2.2 方法

XMLHttpRequest除了上述六个主要属性，还定义了一系列方法：

open(DOMString method, DOMString uri, boolean async, DOMString username, DOMString password)
send()
setRequestHeader(DOMString header, DOMString value)
getResponseHeader(DOMString header)
getAllResponseHeaders()
abort()

2.2.1 open

open(DOMString method, DOMString uri, boolean async, DOMString username, DOMString password)

method 指定请求方式，如GET/POST
uri 指定XMLHttpRequest对象请求的具体URI，绝对或相对URI均可
async 指定该请求是否异步，默认true
username/password 对于需要认证的服务器，可以提供该两项参数

open方法调用后，readyState属性将为1，并把responseText、responseXML、status、statusText属性设为初始值。open方法调用后，才能对请求头信息等进行设置。

var url = "validate?custname=" + escape(custname.value);

xmlHttp.open("GET", url, true);

var url = "validate?custname=" + escape(custname.value);

xmlHttp.open("GET", url, true);

如上述代码中，使用GET方式异步请求URL为validate的服务器资源，同时将参数custname编码后追加到URL中传递给服务器。注意，如果准备使用POST方式发送请求，需要调用setRequestHeader来设置请求头，设置Content-Type为application/x-www-form-urlencoded，表示内容以表单形式提交。

2.2.2 send

send方法用来将请求发送到服务器，其方法参数可选，如果要用send()发送POST请求并携带信息，则将信息作为参数传入。

xmlHttp.open("POST", "login", true);

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

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

xmlHttp.open("POST", "login", true);

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

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

如上述代码将username作为信息体，使用POST方法请求URL为login的服务器资源。如果不需要传递请求参数，则使用xmlHttp.send()或xmlHttp.send(null)即可。

2.2.3 其他方法

setRequestHeader(DOMString header, DOMString value)
用来设置请求头信息，参数分别为请求头名字和对应的值
该方法必须在open之后调用，否则会发生异常

getResponseHeader(DOMString header)
根据一个响应头的名字返回其对应的值
如果响应头信息没有返回客户端，则返回null

getAllResponseHeaders()
返回所有的响应头信息，使用键值对的形式表示名字和值

abort()
用来暂停一个与XMLHttpRequest对象联系的HTTP请求
将该对象恢复到未初始化状态

3、AJAX操作示例

现在使用AJAX，模拟用户名查重的功能，基本的思路是：

用户名的输入框设置onblur事件，触发用户名校验函数validate
validate中，先在请求发送前调用open，然后设置请求头和事件触发器onreadystatechange，再使用send发送请求
onreadystatechange则对应一个函数，判断响应正确后执行操作

效果示意图：

前端，index.jsp页面：

<%@page pageEncoding="utf-8" %>

<html>

<body>

<head>

    <script type="text/javascript">

        var xmlHttp;

        //创建

        function createXmlHttp() {

            if(window.ActiveObject) {

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

            } else if (window.XMLHttpRequest) {

                xmlHttp = new XMLHttpRequest();

            }

        }

        //验证用户名查重（发送请求）

        function validate(){

            createXmlHttp();

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

            var url = "doServlet";

            xmlHttp.open("POST", url, true);

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

            xmlHttp.onreadystatechange = callback;

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

        }

        //处理

        function callback() {

            if(xmlHttp.readyState == 4) {

                if(xmlHttp.status == 200) {

                    var result = xmlHttp.responseXML.getElementsByTagName("result")[0].firstChild.data;

                    document.getElementById("message").innerHTML = result;

                } else {

                    document.getElementById("message").innerHTML = xmlHttp.status + ":" + xmlHttp.statusText;

                }

            }

        }

    </script>

</head>

<h2>Hello World!</h2>

<div id="message"></div>

用户名：<input type="text" id="username" name="username" value="" onblur="validate()"><br>

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

</body>

</html>

<%@page pageEncoding="utf-8" %>

<html>

<body>

<head>

    <script type="text/javascript">

        var xmlHttp;

        //创建

        function createXmlHttp() {

            if(window.ActiveObject) {

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

            } else if (window.XMLHttpRequest) {

                xmlHttp = new XMLHttpRequest();

        //验证用户名查重（发送请求）

        function validate(){

            createXmlHttp();

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

            var url = "doServlet";

            xmlHttp.open("POST", url, true);

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

            xmlHttp.onreadystatechange = callback;

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

        //处理

        function callback() {

            if(xmlHttp.readyState == 4) {

                if(xmlHttp.status == 200) {

                    var result = xmlHttp.responseXML.getElementsByTagName("result")[0].firstChild.data;

                    document.getElementById("message").innerHTML = result;

                } else {

                    document.getElementById("message").innerHTML = xmlHttp.status + ":" + xmlHttp.statusText;

    </script>

</head>

<h2>Hello World!</h2>

<div id="message"></div>

用户名：<input type="text" id="username" name="username" value="" onblur="validate()"><br>

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

</body>

</html>

后端，MyServlet处理类，访问链接为/doServlet：

public class MyServlet extends HttpServlet {

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("doGet1() running...");

    }

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("doPost() running...");

        String[] usernames = {"zhangsan", "lisi", "wangwu", "zhaoliu"};

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

        String result = "用户名可用";

        if (Arrays.asList(usernames).contains(username)) {

            result = "用户名已存在";

        }

        response.setHeader("Cache-Control", "no-cache");

        response.setCharacterEncoding("UTF-8");

        PrintWriter out = response.getWriter();

        out.println("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");

        out.println("<response>");

        out.println("<result>" + result + "</result>");

        out.println("</response>");

        out.close();

    }

}

public class MyServlet extends HttpServlet {

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("doGet1() running...");

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("doPost() running...");

        String[] usernames = {"zhangsan", "lisi", "wangwu", "zhaoliu"};

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

        String result = "用户名可用";

        if (Arrays.asList(usernames).contains(username)) {

            result = "用户名已存在";

        response.setHeader("Cache-Control", "no-cache");

        response.setCharacterEncoding("UTF-8");

        PrintWriter out = response.getWriter();

        out.println("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");

        out.println("<response>");

        out.println("<result>" + result + "</result>");

        out.println("</response>");

        out.close();

注意，我们这里的请求使用了POST，所以需要设置请求头Content-Type为application/x-www-form-urlencoded，这个值表示以表单提交。而后端我们的响应返回了xml格式的内容，所以用到了responseXML对象，它可以解析其为DOM对象方便操作。

实际上，现在更多的AJAX已经不再使用XML作为传输格式了，因为过于笨重。现在普遍使用的是JSON格式，后端书写方便，前端又能使用JS直接解析使用。

[01] AJAX的更多相关文章

Ajax全解
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 我们先来看一些简单的方法,这些方法都是对jQuery.ajax( ...
Jquery Ajax时 error处理之 parsererror
Jquery Ajax时 error处理之 parsererror 01 $.ajax({ 02 type: "POST", 03 con ...
关于Ajax的type为post提交方式出现请求失效问题
最近碰到这样一个问题,原本一个ajax异步提交数据之前是很好的,很多系统都延用了均未出现任何问题.最近这个版本却出现ajax方式post数据不到后台程序,让我折腾了好几天.起初的ajax是这样写的: ...
Asp.net Ajax(ashx)
主要实现 ajax分页功能效果图后台方法代码展示 /// <summary> /// WebAjax处理类 /// </summary> public class WebA ...
PHP. 02®. Ajax异步处理、常见的响应状态、XMLHttpRequest对象及API、ajax的get/post方法、
异步对象 a)创建异步对象 b)设置请求的url等参数 c) 发送请求 d)注册时间 e)在注册的事件中获取返回的内容并修改页面显示的内容布尔类型不能直接用echo输出常见的响应状态 Ajax概 ...
跨域的另一种解决方案CORS（CrossOrigin Resource Sharing）跨域资源共享
在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片 ...
HTML笔记05------AJAX
AJAX初探01 AJAX概念概念:即"Asynchronous JavaScript And XML" 通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意 ...
编程从入门到放弃（Java）
1.Java入门篇 1.1 基础入门和面向对象 1.1.1 编程基础 [01] Java语言的基本认识 [02] 类和对象 [03] 类的结构和创建对象 [04] 包和访问权限修饰符 [05] 利 ...
PDF在线预览 (flexpaper+swftools+saveaspdfandxps)
1.使用SaveAsPDFandXPS将office文档转换成PDF http://www.microsoft.com/downloads/details.aspx?FamilyID=4d951911 ...

随机推荐

curl 发送 post 请求
curl -i -X POST -H 'Content-type':'application/json' -d '{"keyWord":"雅诗兰黛"," ...
api接口签名认证的一种方式
请求方 try { using (var client = new HttpClient()) { StringContent content = new StringContent(strParam ...
Linux 时间及时区设置
时间以及时区设置 by:授客 QQ:1033553122 1.首先确认使用utc还是local time. UTC(Universal Time Coordinated)=GMT(Greenwich ...
loadrunner 脚本开发-定义全局变量
脚本开发-定义全局变量 by:授客 QQ:1033553122 如果参数是全局的,在脚本中的任何一个Action中都可以使用,变量一般是局部的,如果跨Action调用会出现未声明的错误. 打开Scri ...
泛化之美--C++11可变模版参数的妙用
1概述 C++11的新特性--可变模版参数(variadic templates)是C++11新增的最强大的特性之一,它对参数进行了高度泛化,它能表示0到任意个数.任意类型的参数.相比C++98/03 ...
Expect 安装 on centos7
本文演示如何在CentOS7上安装和使用Expect. 使用场景在主机A上编写并且执行Shell脚本,Shell脚本中需要ssh到主机B上执行交互命令. 安装在主机A上安装expect: yum ...
[20170824]11G备库启用DRCP连接.txt
[20170824]11G备库启用DRCP连接.txt --//参考链接:http://blog.itpub.net/267265/viewspace-2099397/blogs.oracle.com ...
洗礼灵魂，修炼python（10）--有趣的判断分支+从实例中掌握循环语句
所有的编程语言里都有判断语句和循环语句. 判断语句则是用来分支程序流程的循环语句则是为了实现一个效果,让程序的规律性的重复操作不用说,分支和循环自然在python里也是有的一,条件判断:if,i ...
Calling Matlab function from python: “initializer must be a rectangular nested sequence”
I am writing a python script from which I hope to call the Matlab anovan function. I have attempted ...
Win10更换电脑，又不想重装系统的解决方法
问题描述: 在公司因为两年前用的i3的电脑很卡,然后想换i5的电脑,但是又不想重装系统,因为安装的东西太多了,重装很麻烦 Windows to go介绍: Windows To Go是Windows ...