AJAX：基于js和xml来实现异步请求

要谈AJAX，就不得不提同步与异步的概念了

同步交互：用户发送一个请求，在收到服务器的应答之前，不可以做任何操作。并且在收到应答后，会刷新整个页面。在网络不好的情况下用户体验不好。
异步交互：用户发送一个请求，在收到服务器的应答之前，可以向服务器发送新的请求。可以使用js接受服务器的响应，再利用js局部刷新页面。
同步好还是异步好：
    异步：用户体验好，不能适用于所有场景(例如使用支付软件付款时，必须等到支付成功才能开始新的支付操作)

    同步：用户体验不好，适用于所有场景。

AJAX不是一项新的技术，它是由asynchronous(异步代码块)、javascript and xml组成，它就是基于js和xml来实现异步请
求。它可以利用js来异步访问服务器。通常服务器给浏览器响应的是一个完整的页面，而在AJAX中，
由于是利用js接受响应，局部刷新页面，所以服务器不用给浏览器响应整个页面了，只返回数据就行了。
例如：你进入一个购物网站，出现了许多商品，你点击了一个按钮“按销量排序”，这时后台给服务器发送了一个AJAX请求，服务器接受请求后只返回了商品销量的数据(这些数据以xml结构或者json键值对表示)而不是整个页面，然后由javascript把这些商品的数据显示在了页面上。由于json表示的数据除了结构清晰外还更紧凑，在js中很受欢迎。

AJAX应用场景

百度的搜索框、注册用户时，校验用户名是否被注册过。

AJAX的优缺点：

优点：异步交互，提高了用户体验；服务器只响应部分数据，而不是整个页面，所以降低了服务器应答的压力(带宽)。
缺点：不能应用所有场景(支付)；会无端的增加访问服务器的次数，给服务器带来了接收请求的压力。

javascript实现AJAX的核心对象是XMLHttpRequest,实现步骤(只需四步)

第一步，获取XMLHttpRequest对象，直接new一个XMLHttpRequest对象, var xmlHttp = new XMLHttpRequest()(适用于IE7+、firefox、Chrome、Safari和Opera)，如果还有其他版本的浏览器，则会创建各自对应的对象。

第二步，打开与服务器的连接
xmlHttp.open(method,url,async);
method:请求方式，可以是GET或POST
url:所要访问的服务器中资源的路径 如servlet/AServlet
async:是否为异步传输，true表示为异步传输，一般都是true

第三步，发送请求 
xmlHttp-.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头，通知服务器发送的数据是请求参数
new XMLHttpRequest().send("xxxxx");//注意，如果不给参数，可能会造成部分浏览器无法发送请求
参数：如果是GET请求，可以是null,因为GET提交参数会拼接在url后面
如果是POST请求，传入的就是请求参数

第四步，注册监听
在XMLHttpRequest对象的一个事件上注册监听器：
onreadystatechange
一共有五个状态:(xmlHttp.readyState)
                0状态: 表示刚创建XMLHttpRequest对象, 还未调用open()方法
                1状态: 表示刚调用open()方法, 但是还没有调用send()方法发送请求 
                2状态: 调用完了send()方法了, 请求已经开始
                3状态: 服务器已经开始响应, 但是不代表响应结束 
                4状态: 服务器响应结束!(通常我们只关心这个状态)

//获取xmlHttp对象的状态:
var state = xmlHttp.readyState;//可能得到0, 1, 2, 3, 4 
//获取服务器响应的状态码
var status = xmlHttp.status;
//获取服务器响应的内容
var data = xmlHttp.responseText;//得到服务器响应的文本格式的数据  
//相当于每次状态改变时，都会调用这个function
xmlHttp.onreadystatechange = function(){
    //当服务器已经处理完请求之后
    if(xmlHttp.readyState == 4){
        //status是应答状态码，200说明服务器响应完成，而且状态OK
        if( xmlHttp.status == 200 ){
            //获取响应数据并执行局部刷新的逻辑
            var result = xmlHttp.responseText;
            result = xmlHttp.responseXML;
        }
    }
}

jQuery实现AJAX

1.$(selector).load方法

$(selector).load(url,data,callback);

selector：选择器，将从服务器获取到的数据加载到指定的元素中

例如jsp页面中的span标签，我们给了它一个id值为msg_username，用它来表示这个span标签，这样的话我们从后台获取的数据就可以显示在页面上了。

url：发送请求的url地址

data：可选，想服务器发送的数据 key/value数据 如：

{"username":"张三","psw":"123"}

如果提供了data参数，那么使用POST提交；如果没有提供data参数，而是将参数拼接在url后面，那么使用GET提交。

callback：可选，load方法完成后所执行的函数。

会自动将服务器返回的应答内容填充到selector选择的组件内部，相当于.html(result),可以省略掉callback。

示例：

$("#username_msg").load("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username});

2.$.get方法

$.get(url, [data], [callback]);

使用get请求

url：发送请求的URL地址

data：可选, 向服务器发送的数据

callback：可选, 请求成功后所执行的函数

示例：

$.get("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username}, function(result){
					$("#username_msg").html("<font style='color:red'>"+result+"</font>");
				});

3.$.post方法

使用post请求

$.post(url, [data], [callback]);

url：发送请求的URL地址

data：可选, 向服务器发送的数据

callback：可选, 请求成功后所执行的函数

//由于是post请求，所以不需要再后面拼接参数
var url2="/AJAXCheckUsernameServlet";
var data={"username":$(this).val()};
$.post(url2,data,function(result){
	//result就是服务器返回的应答内容
	// 将应答内容添加到username对应的span中
	$("#msg_username").html(result);
});

4.$.ajax方法

$.ajax(url, [data], [async], [callback]);

url：发送请求的URL地址

data：可选, 发送至服务器的key/value数据

async：可选, 默认为true, 表示异步交互

type：可选, 请求方式 , 默认为"GET"。

success：可选, 请求成功后执行的函数, 函数参数:

result：服务器返回的数据

示例：

$.ajax({
    "url" : "<%= request.getContextPath() %>/AjaxCheckUsernameServlet",
    "data" : {"username": username},
    "async" : true,
    "type" : "POST",
    "success" : function(result){
    $("#username_msg").html("<font style='color:red'>"+result+"</font>")
			    }
});