AJAX

同步请求和异步请求

同步请求是指当浏览器发出请求后，只有当服务端完成后响应回来，才能看到响应结果，这个过程中，浏览器不能做其它事情，只能等待服务端的响应。 异步请求是指当浏览器发出请求后，等待服务端的响应，在此期间，浏览器不阻塞，你可以去做其它的事情，直到服务端的响应结束，通知你回来。 （本质是浏览器支持多线程）

所以，我们看到的同步请求就是整个浏览器的页面都会刷新一次。 而异步请求是局部刷新，它不会整体刷新页面。 本质来说，异步请求就是由浏览器开启一个新线程去发送请求到服务端，而主线程该干嘛就干，不受影响，直到这个异步线程从服务端响应回来，然后，主线程就要针对这个回来的响应进行处理。

AJAX的对象

XMLHttpRequest对象，专门用来发送异步请求的对象，当然，也可以发送同步请求（同步写超链接就可以）。 这个对象从IE7以后，IE的所有版本都是支持此对象的。而FF, safari, chrome都是支持的。

AJAX代码编写的步骤

1.创建XMLHttpRequest对象

var xmlhttp;
function ajax_demo(){
	//1.
    if(window.XMLHttpRequest){
    //IE7+, FF, Chrome, Safari, Opera, ..
    	xmlhttp = new XMLHttpRequest();
    } else{
    	//IE5, IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
}

2.注册回调函数。

var xmlhttp;
function ajax_demo(){
	//1.
    if(window.XMLHttpRequest){
    //IE7+, FF, Chrome, Safari, Opera, ..
    	xmlhttp = new XMLHttpRequest();
    } else{
    	//IE5, IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    //2.
    xmlhttp.onreadystatechange = function(){
    	//执行你的异步的代码逻辑
        //..
        //..
    }
}
    

3.建立与服务端的连接（http的连接属于short connection, 与jdbc不同。）

var xmlhttp;
function ajax_demo(){
	//1.
    if(window.XMLHttpRequest){
    //IE7+, FF, Chrome, Safari, Opera, ..
    	xmlhttp = new XMLHttpRequest();
    } else{
    	//IE5, IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    //2.
    xmlhttp.onreadystatechange = function(){
    	//执行你的异步的代码逻辑
        //..
        //..
    }
    //3.
    xmlhttp.open("POST|GET", "目标URL", true|false); //true 表示异步，false 表示同步
}

4.发送请求

var xmlhttp;
function ajax_demo(){
	//1.
    if(window.XMLHttpRequest){
    //IE7+, FF, Chrome, Safari, Opera, ..
    	xmlhttp = new XMLHttpRequest();
    } else{
    	//IE5, IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    //2.
    xmlhttp.onreadystatechange = function(){
    	//执行你的异步的代码逻辑
        //当这个readyState的值变为4的时候，我们才有兴趣去处理。其他的情况我们不关心。
        if(xmlhttp.readyState == 4){
        	//..
            if(xmlhttp.status == 200){
				// 表示服务端正常响应客户端
                ...
                var str = xmlhttp.responseText;
                // 如果服务端传递过来的是json字符串，则我们可以通过如下方法把它解析成JSON对象
                var json = JSON.parse(str);
            }
        }
        //..
    }
    //3.
    xmlhttp.open("POST|GET", "目标URL", true|false); //true 表示异步，false 表示同步
    xmlhttp.send(); //如果要传递数据给服务器，把数据作为参数传过去
}

XMLHttpRequest对象的属性

1.readyState属性 (请求状态变化）

此属性0-4的值，共计5种状态
0 表示请求未初始化
1 服务器连接已建立
2 请求已接受
3 请求处理中
4 请求已完成，且响应已就绪

2.status 属性 （响应状态变化）

响应的状态码，这个状态码也有5种类型的值，分别是：
1xx  ...
2xx  代表服务端正常响应
3xx  代表服务端资源没有发生改变
4xx  代表资源错误
5xx  代表服务端错误

3. responseText和responseXML

responseText表示以文本的信息获取服务端的响应，获取的就是字符串。
responseXML 当服务端以xml格式返回给客户端时，则使用此属性去接受，获取的就是DOM对象。（现在用的很少）

• JSON.parse(str)

  JSON字符串解析成对象

• JSON.stringify(obj)

  对象格式化为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原

4. 使用POST提交请求要设置请求头

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