诶债克斯

定义： 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。Ajax就是用 JS 发起一个请求，并得到服务器返回的内容。这跟以前的技术最大的不同点在于「页面没有刷新」，改善了用户体验，仅此而已。

get和post的异同
相同：
1.都是将数据提交到远程服务器上
不同：
1.提交数据存储的位置不同：get请求会把数据存放在url后面；post请求会把数据存放在请求头中
2.提交数据大小限制：get有大小限制；post没有大小限制
3.安全性：get适用于非敏感信息；post数据传输安全性较高

ajax的五部：
-----------GET

1.创建一个异步对象

 var xml = new XMLHttpRequest();

2.设置请求方式和请求地址

xml.open("GET","xxx.php",true);
					 // open参数有三个
                    // method：请求的类型：GET或POST
                    // url：文件在服务器的位置
                    // async：true(异步)

2.1 在发送请求地址方面，IE浏览器通过Ajax发送GET请求，那么IE浏览器会认为同一个URL只有一个结果，所以在url加上一个每次都不一样的参数，利用math.random或者Date日期getTime获取的秒数，也是每次都不一样的

//xml.open("GET","xxx.php",true);
xml.open("GET","xxx.txt?t="+(new Date().getTime()),true);

3.发送请求

xml.send();

4.监听状态的变化

xmlHttp.onreadystatechange = function(ev){.........}

5.处理返回的结果

                if(xmlHttp.readyState === 4){
                 // xmlHttp.status 说明请求已经完成，并不一定成功
                    if(xmlHttp.status >=200 && xmlHttp.status < 300 || xmlHttp.status ===304){
                        // 成功
                         console.log("接收到服务器返回的数据");
                    }else{
                        conso.log("没有接收到服务器返回的数据");
                    }
                }

readyState :存有XMLHttpRequest的状态，从0到4发生变化。判断请求有没有完成。并不代表请求成功，知识步骤走完，关于路径是否正确并不检查。
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
status：服务器返回的状态码
200：“ok”

-------------POST
1.生成一个新的异步请求

	var xhr;
    if (window.XMLHttpRequest){
    // 兼容： for IE7+, Firefox, Chrome, Opera, Safari
            xhr=new XMLHttpRequest();
        }else{
        //兼容： for IE6, IE5
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

2.与GET一致的，open方法

 xhr.open(type,url,true);

3.相比GET有个额外的操作，没有这个php会接收不到

  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4.与GET一致，send发送请求

xhr.send(str);

5.检测返回数值变化

 xhr.onreadystatechange = function(){
        if(xhr.readyState ===4){
            // 判断请求成功
            if(xhr.status >= 200 && xhr.status< 300 || xhr.status ===304){
                // 成功
                option.success(xhr);
            }else{
                // 失败
                option.error(xhr);
            }
        }
    }

拓展---------------ajax方法的封装
要素分析：1.需要数据获取的地址url 2.还有数据获取成功的执行语句和获取失败的执行语句。

function ajax(url,fnSccc,fnfail){
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    }else{
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    oAjax.open('GET',url,true);
    oAjax.send();
    oAjax.onreadystatechange = function(){
       if(oAjax.readyState==4){ 
       	  clearInterval(timer);
        if(oAjax.status == 200){
               fnSccc( xhr);
            }else{
                if(fnfail){
                    fnfail(oAjax.status);
                }
            }
        }
    }
}

在以上方法上，进行改进。将传入的参数单独设置。且设置为对象键值对的形式、

function obj2str(obj){
  // 把传入的参数从对象形式，改成字符串形式
    // "userName":"lnj","passWord":"123",.......
    obj.t = new Date().getTime();  
    //把时间戳也作为一个键值放入
    var res = [];
    for(var key in obj){
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));  //[userName=lnj,passWord=123]
    }
    return res.join("&");  //userName=lnj&passWord=123
    // join方法是把数组中的所有的元素放入一个字符串，&作为指定的分隔符传入
}
function ajax(url,obj,timeout,success,error){
    // 将对象转换成字符串
    var str = obj2str(obj);
    var xhr;
    if (window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open("GET",url+"?"+str,true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState ===4){
            // 判断请求成功
            if(xhr.status >= 200 && xhr.status< 300 || xhr.status ===304){
                // 成功
                success(xhr);
            }else{
                // 失败
                error(xhr);
            }
        }
    }
    // 判断外界是否传入超时时间
    if(timeout){
        timer = setInterval(function(){
            // 停止发送请求
            xhr.abort();
            // 清空定时器
            clearInterval(timer);
        },timeout);
    }
}

注意：
1.post传递的参数是不放在url后面的，那么之前封装的方法，将参数通过push与url合并成一个字符串的方法就不可行。对此，我们将参数单独拎出来，
2.这个封装是默认数据获取类型是get的，对照JQuery中Ajax方法，是可以识别大小写的，为此，在以上方法增加一个对数据识别方式的判断，并，利用toLowerCase()方法，将传入的type都转化成小写，与“get”对比。
3.encodeURIComponent 在提交请求的时候防止中文的出现。此方法会将字符串作为 URI 组件进行编码。在url只可以出现字母、数字、下划线、ASCΠ码值。

if(option.type.toLowerCase()==="get"){  
        // toLowerCase转换成小写，不管输入大写还是小写就都能识别
        // get请求方法
        xhr.open(option.type,option.url+"?"+str,true);
        xhr.send();
    }else{
        // post请求方式
        xhr.open(option.type,option.url,true);
    //   1 跟GET不一样的点
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //   2.不一样
        xhr.send(str);
    }

-----获取xml文件和json文件
1.xml与HTML一样，是由标签组成的。读取语句：.responseXML;
在success操作中：

	// var res = xhr.responseXML;
	// 找到标签
        // var title = res.querySelector("title").innerHTML;
       // var des = res.querySelector("des").innerHTML;
       // var image = res.querySelector("image").innerHTML;

2.textt中json数据
读取语句：.responseText，通过[]能直接找到子对象，在子对象中，类似调用属性的方法，直接. 就可以调用到需要的属性值。相较于xml简单。

  var obj = JSON.parse(xhr.responseText);
 // 测试：成功转化成对象格式数据
   console.log(obj);
   var name = self.getAttribute("name")
   // console.log(name);
   // 获取nz的一整条信息,即obj的一个子对象，
   var info_nz = obj[name];
   // 拿到nz里面的属性，直接用.就可以
   var title =info_nz.title;
   var des =info_nz.des;
   var image =info_nz.image;