Ajax

Ajax知识点；

AJAX是一种用于创建快速动态网页的技术；
从后台提取数据利用创建动态节点，把后台数据展示在页面中。
Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。
　　XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
来源： http://kb.cnblogs.com/page/150964/

通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新（不重新加载页面的情况下更新网页）

    XMLHttpRequest对象；
创建XHR对象：
var XHR = new  XMLHttpRequest();
   兼容浏览器
    var xhr;
        //1.2根据标准的浏览器是否支持标准的创建方法来创建对象
        //先判断浏览器是否具备XMLHttpRequest()方法；
        if(window.XMLHttpRequest){
            //有，表示当前是标准浏览器；
             xhr = new XMLHttpRequest(); // 支持IE8，9；w3c标准。
        }else{
            //无，表示不是标准浏览器, 是IE5,6,7;
            //在IE5,6,7这些老版的浏览器中，Ajax组件是放在ActiveXObject组件库中的，需要传入Micrsoft.XMLHTTP 这个参数才能返回出这个组件。
             xhr = new ActiveXObject('Micrsoft.XMLHTTP');
        }
创建的XHR对象
    在使用XHR对象时，要调用的第一个方法时open();三个参数：
发送请求的类型？：post   or  get；
请求的URL；

表示是否异步发送请求的布尔值；
    <script type="text/javascript">
        //1创建Ajax对象
        //1.1 定义变量 用来保存创建出的对象（XMLHttpRequest这个对象）;
        var xhr;
        //1.2根据标准的浏览器是否支持标准的创建方法来创建对象
        //判断浏览器是否具备XMLHttpRequest()方法；
        if(window.XMLHttpRequest){
            //有，表示当前是标准浏览器；
             xhr = new XMLHttpRequest(); // 支持IE8，9；w3c标准。
        }else{
            //无，表示不是标准浏览器, 是IE5,6,7;
            //在IE5,6,7这些老版的浏览器中，Ajax组件是放在ActiveXObject组件库中的，需要传入Micrsoft.XMLHTTP 这个参数才能返回出这个组件。
             xhr = new ActiveXObject('Micrsoft.XMLHTTP');
        }
            //2 配置请求信息
        /*
           open函数中的三个参数
             1 设置请求方式 GET ， POST;
             2 设置请求的数据接口地址；
             3 设置请求是否是异步请求(异步请求当请求发送出去后，不在等待请求的数据而是先执行其他任务，当数据到达本地后再处理，默认请求时异步；)
        */  
        // xhr.open("POST","JSON.html",true);
        
        /*GET请求
            如果有参数，则把请求参数直接拼接在url之后；
        */
        xhr.open('GET','JSON.html',true);   
        /*
        3 发送请求：
        GET 请求send()参数可以不写,最好在send(null)参数中写上null；
        */
        xhr.send();
        /*POST参数问题
             把post请求所需要的参数放在send方法中
        */
        // xhr.send('user='+encodeURI('张三')+'&password=1234567');
        // post请求参数中如果有中文字符，则需要对中文符号进行编码操作 转成unicode编码
        
        // $tempInfo_post();  php中接受post的请求参数
        /*
        4 监听数据传输情况：
        */
        xhr.onreadystatechange = function(){
            // console.log(xhr.readystate);
            if(xhr.readystate == 4 && xhr.status ==200){
                console.log('拿到数据');
                
            }
        }
        xhr.status = 200;
    </script>

避免缓存问题：

Paste_Image.png

JSON:
json是一个轻量级的数据格式，可以简化表示复杂数据结构的工作量，JSON使用javascript语法的子集表示对象，数组。字符串，数值，布尔值及null；即使XML也能表示同样的复杂数据结果，但是JSON没有那么多的繁琐，而且在javascript中使用很便利；
ECMAScript5 定义了一个原生的JSON队形，可以用来将对象序列化为JSON字符转或者将JSON数据解析为Javascript对象，JSON.stringify（）和JSON.parse（）方法分别用来实现上面的两个功能，这两个方法都设有一些选项，通过他们可以改变过滤的方式，或者 改变序列变化的过程；

Paste_Image.png