Ajax原理和执行流程

同步交互与异步交互：
同步：
>发一个请求，就要等待服务器的响应结束，然后才能发出第二个请求！中间的时间只能等待。
>刷新的是整个页面！给用户带来不好的体验

异步：
>发一个请求后，无需等待服务器的响应，然后就可以发出第二个请求！
>可以使用js接收服务器的响应，然后使用js来局部刷新！

是什么ajax及其特点：
*asynchronous javascript and xml：异步的js和xml技术
*它能使js访问服务器，且是异步访问
*ajax由于只是局部刷新，服务器就不再响应整个页面，只是得到了服务器的数据，节约了资源。

数据交换格式：
>text：纯文本
>xml：xml文件
>json：它是js提供的数据交互格式

ajax应用场景：
>百度的搜索框
>用户注册时(效验用户名是否被注册过)

ajax的优缺点：
优点：
>异步交互：增强了用户的体验！
>性能：因为服务器无需响应整个页面，只需响应部分内容，服务器的压力减轻。
缺点：
>ajax无端的增多了对服务器的访问次数，给服务器带来了压力。

ajax发送异步请求步骤(四步操作)

1.第一步(得到XMLHttpRequest)
>获得XMLHttpRequest方式：

大多数游览器支持:var xmlHttp=new XMLHttpRequest();
IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以及更早的版本:var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

>编写创建XMLHttpRequest对象的函数：

function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActiveXObject("Xsxml2.XMLHTTP");
		}catch(e){
			try{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				alert("我们不在一个世界！");
			}
		}
	}
}

2.第二步(打开与服务器的连接)
xmlHttp.open("请求方式”,"请求URL","请求是否为异步(默认为false)")用来打开与服务器的连接，它需要三个参数：
>请求方式：可以是GET或者POST(两者在第二三步处理方式不同)
>请求的URL：指定服务器端的资源，例如：/day/AServlet
>请求是否为异步：如果为true表示发送异步请求，否则为同步。注：如果为同步则会等待服务器的响应，在执行后面的代码，如果为异步，则继续执行。

GET方式：
xmlHttp.open("GET","/day/AServlet",true);

POST方式：
xmlHttp.open("POST","/day/AServlet",true);
新增(手动设置头信息)：
请求元素不包含文件上传：xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
包含文件上传：xmlHttp.setRequestHeader("Content-Type","multipart/form-data"); 

3.第三步(发送请求)
GET方式：
xmlHttp.send(null):如果不给可能会造成部分游览器无法发送!
>参数：就是请求体内容！如果是GET请求，必须给出null

POST方式:
xmlHttp.send("username="+username.value()):手动设置响应体

4.第四步()
1）在xmlHttp对象的一个事件上注册监听器：onreadystatechange(复写：回调函数)。
2）回调函数接收xmlHttp对象的5个状态：
>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.responseXml; //得到服务器的响应的xml响应的内容！将自动解析为Document对象

xmlHttp.onreadystatechange = function(){ //xmlHttp的5种状态都会调用方法
    if(xmlHttp.readyState==4&&xmlHttp.status==200){ //双重判断：判断是否为4状态，而且还要判断是否为200
        //获取服务器的响应内容
        var text=xmlHttp.responseText;    
    } 
    
}