jQuery中的AJAX

JQ中的AJAX

基础层
$.ajax();

中间层
$("div").load()
$.get();
$.post();

最高层
$.getJSON();// 加载json文件
$.getScript();// 加载script文件

ajax最高层

// 加载json文件
json文件
{
    "a":1,
    "b":2,
    "c":[1,2,3,4],
    "d":10
}

// 函数里面三个参数返回的值、请求状态、XMLHttpRequest对象
$.getJSON("./a.json",function(response,statas,xhr){
    console.log(response);// 直接返回对象{a: 1, b: 2, c: Array(4), d: 10}
    console.log(statas);// success 成功状态
    console.log(xhr);// XHR对象
})
// 加载script文件
script文件
function abc(){
    console.log("aaa");
}

// 加载进来后执行函数
$.getScript("./js/a.js",function(data){
    abc();
})

ajax中间层

<div class="div1"></div>

/* var xhr=new XMLHttpRequest();
// 在整个AJAX的通信中属于全过程监听，当状态改变时，触发该函数
xhr.addEventListener("readystatechange",readyStateHandler);
xhr.open("GET","http://localhost:8000?a=3&b=4");
xhr.send();

function readyStateHandler(e){
    // 状态下载操作已完成和请求成功
    if(xhr.readyState===4 && xhr.status===200){
        // 服务端发回来的消息
        console.log(xhr.response);
    }
} */

// get写法
$.get("http://localhost:8000?a=3&b=4",function(data,statas,xhr){
    console.log(data);
})

var obj={a:1,b:2};
$.get("http://localhost:8000",obj,function(data){
    console.log(data);
})

$.get("http://localhost:8000","a=1&b=2",function(data){
    console.log(data);
})


// post写法
$.post("http://localhost:8000",{a:1,b:2},function(data){
    console.log(data);
})

$.post("http://localhost:8000","a=10&b=20",function(data){
    console.log(data);
})

$.post("http://localhost:8000",function(data){
    console.log(data);
})


// post
$(document).load("http://localhost:8000",{a:10,b:20},function(data,success,xhr){
    console.log(data);
})

// get
$(document).load("http://localhost:8000?a=20&b=30",function(data,success,xhr){
    console.log(data);
})


// 服务器发过来的数据加载放在div里
$("div").load("http://localhost:8000?a=20&b=30");

$("div").load("http://localhost:8000?a=20&b=30",function(data){
    // return "aaa";//这个函数仅用于处理接收的数据，return没有返回给内容
});
// 写入文档就是都不接受
$(document).load("http://localhost:8000?a=20&b=30")

// 加载网页
$(".div1").load("./2、插件使用.html");
// 加载json文档
$(".div1").load("./a.json");
// 加载文本文档
$(".div1").load("a.text");

重写get方法

$.extend({
    // url 是发送地址
    // data 是发送给服务器的参数
    // fn是接收到数据的回调函数
    get1:function(url,data,fn){
        // 有时候data参数没有，直接第二参数就是接收到数据后的回调函数
        if(data.constructor===Function){
            // 判断第二个参数是不是函数
            // 参数fn变量等于data
            fn=data;
        // 如果第二个参数给入的是字符串，将字符串附带到url后面
        }else if(data.constructor===String){
            url=url.indexOf("?")>-1 ? url+data : url+"?"+data;
        // 如果第二个参数是对象，这种情况就把对象变成a=1&b=2这种字符串
        }else if(data.constructor===Object){
            var str="";
            for(var prop in data){
                str+=prop+"="+data[prop]+"&";
            }
            // 将字符串中最后一个&符号去掉
            str=str.slice(0,-1);
            // 并且附在url的？后面
            url=url.indexOf("?")>-1 ? url+str : url+"?"+str;
        }
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("readystatechange",function(){
            if(xhr.readyState===4 && xhr.status===200){
                fn(xhr.response,"success",xhr);
            }
        })
        xhr.open("GET",url);
        xhr.send();
    }
})

$.get1("http://localhost:8000?a=3&b=4",function(data,success,xhr){
    console.log(data);
})

var obj={a:5,b:2};
$.get1("http://localhost:8000",obj,function(data){
    console.log(data);
})

$.get1("http://localhost:8000","a=10&b=2",function(data){
    console.log(data);
})

重写post方法

$.extend({
    post1:function(url,data,fn){
        // 有时候data参数没有，直接第二参数就是接收到数据后的回调函数
        if(data.constructor===Function){
            // 判断第二个参数是不是函数
            // 参数fn变量等于data
            fn=data;
        }else if(data.constructor===String){
            // 如果第二个参数给入的是字符串，将字符串附带到url后面
            url=url+data; 
        }else if(data.constructor===Object){
            // 如果第二个参数是对象，这种情况就把对象变成a=1&b=2这种字符串
            var str="";
            for(var prop in data){
                str+=prop+"="+data[prop]+"&";
            }
            str=str.slice(0,-1);
            // 并且附在url的？后面
            url=url+str;
        }
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("readystatechange",function(){
            if(xhr.readyState===4 && xhr.status===200){
                fn(xhr.response,"success",xhr);
            }
        });
        xhr.open("POST",url);
        xhr.send();
    }
})

ajax底层

// 最简便写法
$.ajax({
    url:"http://localhost:8000?a=20&b=50",
    success:function(data){
        console.log(data);
    }
})

// 将发送的数据独立到data属性
$.ajax({
    url:"http://localhost:8000",
    data:"a=30&b=60",
    success:function(res){
        console.log(res);
    }
})

$.ajax({
    url:"http://localhost:8000",
    data:{a:1,b:2},
    success:function(res){
        console.log(res);
    }
})


// method属性默认是get方式发送，如果写入post即为post发送
// type属性同理
$.ajax({
    url:"http://localhost:8000",
    data:{a:1,b:2},
    method:"POST",
    success:function(res){
        console.log(res);
    }
})

$.ajax({
    url:"http://localhost:8000",
    data:"a=30&b=60",
    method:"POST",
    success:function(res){
        console.log(res);
    }
})

// url 必须带有HTTP协议以及端口号
$.ajax({
    url:"http://localhost:8000",
    data:"a=30&b=60",
    method:"POST",
    success:function(res){
        console.log(res);
    }
})

// dataType json表示返回数据类型是json类型，可以自动将json字符串解析成对象
$.ajax({
    url:"http://localhost:8000",
    data:"a=30&b=60",
    type:"POST",
    dataType:"json",
    success:function(res){
        console.log(res);
    }
})

// 当数据返回错误时，执行error的函数
$.ajax({
    url:"http://localhost:8000",
    data:"a=30&b=60",
    type:"POST",
    dataType:"json",
    success:function(res){
        console.log(res);
    },
    error:function(){

    }
})

// cache 是浏览器缓存响应
// 如果开启了cache，浏览器在访问同一个地址时，不去重复访问，直接从缓存中获取
$.ajax({
    url:"./a.json",
    data:"a=30&b=60",
    // 加载本地使用GET方法
    type:"GET",
    dataType:"json",
    // 默认是true服务器拿取数据，false缓存拿取数据
    cache:true,
    success:function(res){
        console.log(res);
    },
    error:function(){

    }
})


// 发送给php的post请求时的请求头
$.ajax({
    url:"http://localhost:8000",
    data:"a=30&b=60",
    type:"POST",
    dataType:"json",
    contentType:"application/x-www-form-urlencoded",
    success:function(res){
        console.log(res);
    },
    error:function(){

    }
})

// 如果遇到中文时，设置utf-8不起作用
// 浏览器编码格式会将中文转换为编码%
// 为了防止中文乱码，需要把发送的数据先通过encodeURIComponent转换为编码格式
// 然后服务器收到数据后，再将它转换为中文字符decodeURIComponent
console.log(encodeURIComponent("中国"));// 转换为编码
console.log(decodeURIComponent("%E4%B8%AD%E5%9B%BD"));// 转换为汉字

// processData默认是true，也就是默认转换为编码格式
$.ajax({
    url:"http://localhost:8000",
    data:"a=30&b=60",
    type:"POST",
    dataType:"json",
    contentType:"application/x-www-form-urlencoded",
    processData:true,
    success:function(res){
        console.log(res);
    },
    error:function(){

    }
})


var obj={a:1,b:2,c:[1,2,3,4]};
$.ajax({
    url:"http://localhost:8000",
    data:JSON.stringify(obj),
    type:"GET",
    dataType:"json",
    // 默认fasle
    traditional:true,
    success:function(res){
        console.log(res);
    },
    error:function(){

    }
})

​