JS AJAX与JSON详解-优快云博客

js中不写兼容的ajax

function Ajax(_params) {
            //创建实例对象
            var _xhr = new window.XLMHttpRequest();
            // 如果存在就执行这个函数
            if(_xhr) {
                // 接受数据
                _xhr.onreadystatechange = function () {
                    if(_xhr.readyState==4) {//等于4表示服务器响应完成，一定要等服务器响应完成后才可以处理数据
                        _params.callback(_xhr.responseText);// 从服务器返回的数据
                    }
                    //_params.callback(_xhr.responseText);
                    /**
                     * 0、表示打开服务器连接之前
                     * 1、表示打开远程服务器
                     * 2、表示向服务器发送数据
                     * 3、表示服务器响应过程中
                     * 4、表示完成
                     */
                }
                // 连接服务器     get  地址  异步--ansyc为true时是异步
                _xhr.open(get,_params.url , _params.ansyc?_params.ansyc:true);
                // 发送
                _xhr.send(null);
            }
        }


//      Ajax({
//            method:"get",
//            url:"demo02event.html",
//            ansyc:true,
//            callback:function(data){ // 通过指针调用的函数统称为回调函数
//                alert(data);
//            }
//        });

兼容写法可直接替换XLMHttpRequest()

function createXHR() {
            try {
                return new window.XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("Microsoft.XMLHttpRequest");
                } catch (e) {
                    if (window.confirm("浏览器版本太低,是否要下载新版本的浏览器")) {
                        window.location.href = "http://download.firefox.com.cn/releases/firefox/48.0/zh-CN/Firefox-latest.dmg";
                    }
                }
            }
        }

Json表示一种数据格式。并非一种数据类型请牢记！！！

var _data={
“key0”:”value0”,
“key1”:”value1”
}

这种格式的数据统称为json格式的数据。
json格式的字符串强制转换成json格式的对象：
JSON.parse(_str);//推荐使用
window.eval(“(“+_str+”)”);

Jsonp是javascript一种非同源数据交互的协议。那么简单的说jsonp就是一种协议。跟json毫无关系

jQuery里面的ajax

$.ajax({
    url:"time_line.txt",
    type:"get",
    dataType:"json",

    success:function(data){// data是传过来的数据

    }
})

-------------------------------------------------------------------
$.getJSON("time_line.txt",function(data){//数据接口

})

在vue里面进行数据传输

var vm = new Vue({
        el: '#box',
        data: {
            arr: []
        },
        // create  mount
        beforeCreate(){
            this.$http.get(url).then(function (res) {
                // body...
                // console.log(res.data.data.commentList);
                this.arr = res.data.data.commentList;
            }).catch(function(){});
        }


    });

vue里面jsonp请求

this.$http.jsonp(url,{
    params:{
        word:this.word
    }
    emulateJSON: true
}).then(function(res){
    this.arr = res.data.s;
    console.log(this.arr);
},function(res){
    console.log(res.data);
})