ajax优劣分析及封装

优势

1.实现无刷新更新数据
2.能够实现异步与服务器通信
3.前后端负载平衡，减轻了服务器端的压力
4.被广泛的支持

缺点

1.安全性能不强
2.浏览器的机制被破坏无法前进后退
3.对于搜索引擎支持弱
4.破坏了程序异常的处理机制
5.对于移动端不能很好的支持

ajax使用

 使用ajax一共有4个步骤：1.创建ajax、2.连接服务器、3.发送请求、4.接受返回值。

环境兼容判断
对于浏览器的兼容：
IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject(“Microsoft.XMLHTTP”)
判断语句：

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else{
    xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}

创建

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else{
    xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}false

连接服务器

xhr.open（"请求方式（GET/POST）"，url路径，“true/false”）
//携带请求参数时
xhr.open（"请求方式（GET/POST）"，url路径 + “？”请求数据 +  ，“true/false”）
//其中第三参数true/false为是否时异步请求

发送请求

//get
xhr.send()
//post
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        
xhr.send(请求数据)

接收返回值

	ajax可以通过readystatechange事件来执行一些基于响应的操作。当readystatechange改变的时候，就会触发这个事件执行。
	其中readyState：请求的状态，返回的是状态码（0 - 4）5个状态：
0（未初始化）open还没有调用、1（载入）已经调用了send（）正在发送请求、2（载入完成）send方法已经完成  已经收到了全部的响应内容、3（解析）正在解析响应内容、4（完成）响应内容解析完成。
	status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）
	我们可以通过 responseText属性接收返回的内容。

封装

function ajax(options){
	//首先定义一个请求参数转换函数
	function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
    
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接服务器
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
}

//示例：

ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
        name : "张三",
        age : 18，
        sex : "man"
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})