Ajax的掌握

---

---

ajax:是前后端交互的重要手段或桥梁

    ##js交互：

            1.人机：行为，事件

            2.数据：前后端，ajax

    ajax：a 异步，j：异步，a:and；x：xml=>json数据（服务端的数据）

 

    特点：无刷新加载页面，

          破坏了历史记录，网络优化SEO(爬虫读取是前端一开始展现的网站内容，

          不会爬JS引起的变化);

 

    组成：1.异步JS（事件）[请求成功事件]

         2.其他JS（处理解析数据）

         3.XML对象（前后端链接的载体）（XHR对象）

         4.数据（txt,html,json,xml）[必须都是字符，因为安全性]

var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);[其中url应写绝对地址]
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
    xhr.send();
    //（xhr.readyState：0：客户端未做请求，1：前端收到请求，向后端发送，2：后端成功收到请求，分析，接受，3：解析相应代码内容，4：解析完成，可以在客户端调用）

 

 

封装ajax-get

document.onclick = function() {
        var url = "*****";
        ajaxGet(url, function(res) {
            alert(res);
        },{
            user:"123",
            pass:"123"
        })
    };

    function ajaxGet(url,cb,data) {
        //data是对象
        data = data || {};                  //解决bug，undefined不能被for,in
        //1.解析要发送的数据
        var str = '';
        for(var i in data) {
            str += `${i}=${data[i]}&`;
        }
        //2.拼接url
        var d = new Date();
        url = url + "?" + str + "__gjt=" + d.getTime();             //浏览器缓存导致不刷新后端改变内容，解决bug：欺骗浏览器，修改请求地址，但是需要后端不读取添加的数据，缺点：会降低性能，增加后端压力；
        //3.准备ajax过程
        var xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                cb(xhr.responseText);
            }
        }
        xhr.send();
    }
   // !!!get发送：固定要求：在url身上拼接?字段名=字段值&字段名=字段值；

封装ajax-post：

function ajaxPost(url,cb,data) {
            //data是对象
            data = data || {};                  //解决bug，undefined不能被for,in
            //1.解析要发送的数据
            var str = '';
            for(var i in data) {
                str += `${i}=${data[i]}&`;
            }
            //(不存在浏览器缓存问题，所以不用加时间戳，也不用添加url的内容)
            //2.准备ajax过程
            var xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    cb(xhr.responseText);
                }
            }
            //3.发送前设置发送数据格式：表单格式
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(str);
        }

Bug跨域问题:

ajax的跨域问题：不同源  是浏览器提出的，基于安全考虑        同源（同服务，同地址，同接口）

        例：localhost 和 127.0.0.1并不能访问拿到同一服务器下数据

        解决办法：JSONP

                    是程序员提出的，并不是官方支持的解决办法

                    因为js中script标签可以跨域引入

        jsonp的封装：(data是必传参数，其中有callback属性，属性值是后端返回值执行函数名，data中必须有columnName属性，其属性值为回调函数的名字[callback字段名])

function jsonp(url, callback, data) {
        var str = '';
        for(var i in data) {
            str += `${i}=${data[i]}&`;
        }
        url = url + "?" +str.slice(0,str.length-1);
        var script = document.createElement('script');
        script.src = url;
        document.body.appendChild(script);

        window[data[data.columnName]] = function(res){
            callback(res);
        }
    }

 

 

 

---