Ajax简介和发送异步请求（四步操作）

1.什么是Ajax?

Asynchronous Javascript And XML：异步的Javascript和XML。即使用Javascript语言和服务器进行异步交互，Ajax还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。

2.同步交互和异步交互

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就能发出第二个请求；

3.Ajax常见应用场景

百度的搜索框，用户注册时（校验用户名是否被注册过），微博的实时更新评论等。

4.Ajax的优缺点

优点：

• Ajax使用Javascript技术向服务器发送异步请求；
• Ajax无须刷新整个页面；
• 因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高；

缺点：

• Ajax并不适合所有场景，很多时候还是要使用同步交互；
• Ajax虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
• 因为Ajax是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

5.Ajax的工作原理

通过XMLHttpRequest对象向服务器发送异步请求，从服务器获得数据，然后用Javascript操作DOM来刷新页面。

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

Ajax的核心是XMLHttpRequest对象，所有的异步交互都是使用XMLHttpRequest对象完成的。

6.1.第一步：创建异步对象（XMLHttpRequest对象）

各个浏览器对XMLHttpRequest的支持是不同的！为了处理浏览器兼容问题，给出下面的方法来创建XMLHttpRequest对象：

//1.创建异步对象(XMLHttpRequest对象)
function createXMLHttpRequest() {
    try {

        // 适用于大多数浏览器，以及IE7和IE更高版本
	return new XMLHttpRequest();
    } catch (e) {
        try {

	    // 适用于IE6.0
	    return new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
	    try {

		// 适用于IE5.5及更早版本
		return new ActiveXObject("Microsoft.XMLHTTP");
	    } catch (e) {
		throw e;
	    }
	}
    }
}

6.2.打开与服务器的连接（open方法）

当得到XMLHttpRequest对象后，就可以调用该对象的open()方法打开与服务器的连接了。

open()方法的参数如下：open(method, url, async)：

• method：请求方式，通常为GET或POST；
• url：请求的服务器地址，例如：，若为GET请求，还可以在URL后追加参数；
• async：这个参数可以不给，默认值为true，表示异步请求；

// 2.调用XMLHttpRequest对象的open()方法，打开与服务器的连接
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "", true);

6.3.发送请求

当使用open()方法打开与服务器的连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。

• 若是GET请求，需要在URL后连接参数。若没有参数，需要给出null为参数！若不给出null为参数，可能会导致FireFox浏览器不能正常发送请求！

// 3.调用XMLHttpRequest对象的send()方法，发送请求
// GET请求没有请求体，但也要给出null，不然FireFox浏览器不能正常发送请求！
xmlHttp.send(null);

• 若是POST请求，必须设置Content-Type请求头的值为application/x-www-form-urlencoded。当没有设置Content-Type请求头为application/x-www-form-urlencoded时，Web容器会忽略请求体的内容。所以，在使用Ajax发送POST请求时，需要设置这一请求头，然后使用send()方法来设置请求体内容。

// 2.调用XMLHttpRequest对象的open()方法，打开与服务器的连接
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "", true);
			
// 设置Content-Type请求头
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			
// 3.调用XMLHttpRequest对象的send()方法，发送请求,发送时指定请求体
xmlHttp.send("username=汪汪&password=allan");

6.4.接收服务器的响应

当请求发送出去后，服务器端Servlet就开始执行了，但服务器端的响应还没有接收到。下面我们来接收服务器端的响应。XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态：

• 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
• 1：请求已开始，open()方法已调用，但还没调用send()方法；
• 2：请求发送完成状态，send()方法已调用；
• 3：开始读取服务器响应；
• 4：读取服务器响应结束。

onreadystatechange事件会在状态为1、2、3、4时引发。但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

其实我们还要关心服务器响应的状态码是否为200，如果服务器响应为404，或500，那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

最后，我们还需要获取到服务器响应的内容，可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

//4.XMLHttpRequest对象的onreadystatechange事件，会在XMLHttpRequest对象的状态发生变化时被调用
xmlHttp.onreadystatechange = function() {
				
    // 双重判断
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

        // 5.通过XMLHttpRequest对象的responseText得到服务器的响应内容
	var text = xmlHttp.responseText;
					
	// 获取div元素
	var divEle = document.getElementById("div");
	divEle.innerHTML = text;
    }
};

7.Ajax实例之发送POST请求

AjaxServlet代码如下：

package cn.itcast.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class AjaxServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
	response.setContentType("text/html;charset=utf-8");
		
	// 获取请求参数
	String username = request.getParameter("username");
	String password = request.getParameter("password");
		
	System.out.println("POST请求:" + username + "---" + password);
	response.getWriter().write("POST请求:" + username + "---" + password);
    }
}

ajax.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>