ajax的封装

AJAX是什么？
AJAX是一种网页异步加载技术,也就是说在不加载整个页面的情况下，加载某一更新的部分。
AJAX的核心技术是XMLHTTPRequest，我们来看一下如何创建及封装一个AJAX。
创建一个ajax，只需要new一个xhr对象，但存在兼容问题，主要针对IE浏览器的兼容。

下面我们举两个例子，一个是加载本地数据，一个是加载服务器的数据。首先我们看一个加载本地数据的例子/*  * 函数名：createXHR * 作用：创建XHR对象时，兼容IE浏览器 * 参数：无 */ function createXHR(){    if( window.XMLHttpRequest ){        return new XMLHttpRequest();    }else{        return new ActiveXObject( Microsoft.XMLHTTP );    } } /*  * 函数名：ajax  * 作用：加载本地数据  * 无参数：  */  function ajax(url){    //1.创建xhr对象    var xhr = createXHR();    //2.建立连接    xhr.open("GET/POST","url",false/true);    参数1：请求方式    参数2：请求地址(这里是一个本地数据)    参数3: 同步/异步    //3.发送请求    xhr.send(null);    //4.对接受到的数据进行处理    xhr.onreadystatechange = function(){        //readyState 代表的是状态 有5种状态        if( xhr.readyState == 4){            console.log(xhr.responseText);        }    }  }  ajax('http://datainfo.duapp.com/shopdata/userinfo.php');

第二种加载服务器的数据：

/* * 函数名：createXHR * 作用：创建XHR对象，兼容IE8浏览器 * 参数：无 */function createXHR(){    if( window.XMLHttpRequest ){        return new XMLHttpRequest();    }    return new ActiveXObject( Microsoft.XMLHTTP );}/* * 函数名：ajax * 作用：加载服务器的数据 * 参数： * url：加载数据的地址 * */ function ajax(url){    //1.创建xhr对象    var xhr = createXHR();    //2.向服务器请求数据    xhr.open("get/post",url,false/true);    //3.发送数据    xhr.send(null);    //4.对请求到的数据进行处理    xhr.onreadystatechange = function(){        if( xhr.status==200 && xhr.readyState == 4 ){            var script = document.createElement("script");            document.body.appendChild(script);            var callbackname = 'callback';            script.src = url + "?" + '&callBack'+callbackname;            window['callback'] = function(data){                console.log("data",data);                document.body.removeChild(script);            }        }    } } ajax('http://datainfo.duapp.com/shopdata/userinfo.php');