00 00Java Web之Ajax学习一

1 ajax简介（异步与同步）

1、ajax是什么？
（1）asynchronous javascript and xml：异步的js和xml
（2）它能使用JS访问服务器，而且是异步访问。
（3）服务器给客户端的响应一般是整个页面，一个html完整页面，但在ajax中因为是局部刷新，那么服务器就不用在响应整个页面，而只是数据。
|——text：纯文本
|——xml：数据交换格式
|——json：它是js提供的数据交互格式，它在ajax中最受欢迎。
2、异步交互和同步交互
（1）同步
|——发一个请求，就要等待服务器响应结束，然后才能发第二个请求，中间这段时间就一个字“卡”。
|——刷新的是整个页面
（2）异步
|——发一个请求后，无需等待服务器的响应，然后就可以发送第二个请求
|——可以使用js接收服务器的响应，然后使用js来局部刷新

2 异步与同步交互图

3 ajax的应用场景和优缺点

1、ajax应用场景

当我们在bing中输入白字时，就会出现下拉列表。
（1）整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
（2）当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应。

注册用户时，光标移动后自动出现提示信息。
（1）整个过程页面没有刷新，只是局部刷新了。
（2）在请求发出后，浏览器不再等待服务器响应结果就可以进行其他操作。

2、ajax的优缺点
（1）优点
|——异步交互：增强了用户的体验。
|——性能：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器压力减轻了。
（2）缺点
|——ajax不能应用在所有场景
|——ajax无端的增多了对服务器的访问次数，给服务器带来了压力

4 ajax四步操作

1、第一步（得到XMLHttpRequest）
（1）ajax其实只需要学习一个对象：xmLHttpRequest，如果掌握了它，就掌握了ajax。
（2）得到XMLHttpRequest
|——大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();
|——IE 6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
|——IE 5.5及更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
（3）编写创建XMLHttpRequest对象函数

function createXMLHttpRequest(){
	try{
	    var xmlHttp = new XMLHttpRequest();
	}catch(e){
	    try{
	        var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	    }catch(e){
	        try{
	            var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	        }catch(e){
	            alert("What!!!");
	            throw e;
	        }
	    }
	}
}

2、第二步（打开与服务器的连接）
（1）xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：
|——请求方式：可以是GET或POST
|——请求的URL：指定服务器端资源，例如：/lks/AServlet
|——请求是否为异步：如果为true表示发送异步请求，否则是同步请求。
（2）xmlHttp.open("GET", "/lks/AServlet", true)
3、第三步（发送请求）
（1）xmlHttp.send(null)：如果不给可能会造成部分浏览器无法发送
|——参数：就是请求体内容，如果是GET请求，必须给出null。
4、第四步
（1）在xmlHttp对象的一个事件上注册监听器：onreadystatechange()
（2）xmlHttp对象一共有五个状态：

状态码	状态描述
0	刚创建，还没有调用open()方法
1	请求开始，调用了open()方法，但还没有调用send()方法
2	调用完了send()方法
3	服务器已经开始响应，但并不代表响应结束
4	服务器响应结束（通常只关心这个状态）

（3）得到xmlHttp对象的状态：
|——var state = xmlHttp.readyState(); 可能是0、1、2、3、4
（4）得到服务器响应的状态码
|——var status = xmlHttp.status(); 例如为200、404、500
（5）得到服务器响应内容
|——var content = xmlHttp.responseText;：得到服务器的响应的文本格式的内容
|——var content = xmlHttp.resonseXML：得到服务器的响应的xml内容，它是Document对象。

xmlHttp.onreadystatechange = function(){
    if( xmlHttp.readyState() == 4 && xmlHttp.status() == 200 ) { //双重判断
        var content = xmlHttp.responseText;
    }
}