学习AJAX(一)

1.什么是ajax?

     ajax与服务器进行交互的技术，载体是JavaScript，最大的特点是页面不刷新，官方名称为：XMLHttpRequest。

2.创建ajax对象

       由于ajax的对象在不同浏览器是不一样的，主要分为主流浏览器(火狐、谷歌等)和IE浏览器(6/7/8)，所以在创建对象时，要区分浏览器(IE浏览器(6/7/8)没有XMLHttpRequest对象)，为ajax创建不同的对象。

(1)主流浏览器

var  xhr = new XMLHttpRequest();

(2)IE浏览器（6/7/8）

var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //最原始的ajax对象
var xhr = new ActiveXObject('Msxml2.XMLHTTP'); //升级
var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0'); //升级
var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0'); //最高版本，停止维护

(3)判读是否为主流浏览器

if (typeof  XMLHttpRequest != 'undefined'){
    //1.主流浏览器
    var  xhr = new XMLHttpRequest();
}else {
    //IE浏览器（6/7/8）
    var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //最原始的ajax对象
    var xhr = new ActiveXObject('Msxml2.XMLHTTP'); //升级
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0'); //升级
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0'); //最高版本，停止维护
}

3.创建http请求

//创建http请求，这里的xhr为上面的ajax对象
xhr.open("GET/POST","请求路径",true/false); //true为异步请求，false为同步请求，不设置默认true

4.发送请求

//发送请求，这里的xhr为ajax对象
xhr.send(null); //GET请求，如果是GET请求请用这句
xhr.send(DATAS); //POST请求,DATAS为post请求的数据，如果是POST请求请用这句

5.得到服务器响应的数据

//得到服务器响应的数据
/**
 * ajax在发起请求时，要随时感知状态。
 * onreadystatechange事件，用来感知ajax的状态的变化，并且这个事件要写在创建请求和发送请求之前。
 * readyState属性，表示了ajax的请求状态，它有五种状态，
 *      0-->创建ajax对象完毕
 *      1-->有调用open方法
 *      2-->有调用send方法
 *      3-->服务器的数据只返回了一部分
 *      4-->服务器数据全部返回，ajax请求完毕。
 * responseText属性，以字符串的形式接收服务器端返回的信息
 * responseXML属性，以xml形式接收服务器端返回的信息
 * status 服务器的响应状态码，200表示成功响应
 */
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
        console.log(xhr.responseXML);
    }
}

6.一个简单完整的ajax请求

//创建对象
if (typeof  XMLHttpRequest != 'undefined'){
    //1.主流浏览器
    var  xhr = new XMLHttpRequest();
}else {
    //IE浏览器（6/7/8）
    var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //最原始的ajax对象
    var xhr = new ActiveXObject('Msxml2.XMLHTTP'); //升级
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0'); //升级
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0'); //最高版本，停止维护
}
//感知ajax请求的状态，如果readyState的值为4，服务器响应状态码status为200，请求完毕
//这个事件要写在open方法跟send方法之前，为了感知其状态
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
        console.log(xhr.responseXML);
    }
}
//创建http请求
xhr.open("GET","register.do",true); //true为异步请求，false为同步请求，不设置默认true

//发送请求，这里的xhr为ajax对象
xhr.send(null);