JQuery Ajax补充

Ⅰ- 壹 - JQuery Ajax

一 JQuery中的ajax分为三层

• 最顶层

  $.getScript() $.getJSON();

• 中间层
  $(“elem”).load() $.get() $.post()

• 最基础层

  $.ajax();

二 最顶层 $.getScript() $.getJSON()

1 $.getScript()

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

 $.getScript("./js/a.js",function(res){
            // var script=document.createElement("script");
            // script.innerHTML=res;
            // document.body.appendChild(script);
            // abc();
            //进行转移处理,res回调函数的数值
            $("<script><\/script>").appendTo("body").html(res);
            abc();
        }) 

添加多个

var arr=["./js/a.js","./js/b.js","./js/c.js"];
        var script= $("<script><\/script>").appendTo("body");
        getScriptFile();
        function getScriptFile(){
            var url=arr.shift();
            if(url){
                $.getScript(url,function(res){
                    script.html(script.html()+res);
                    getScriptFile();
                });
                return;
            }
            fn();
        } 

2 $.getJSON()

getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

   $.getJSON("./package.json",function(res){
            console.log(res);
        }) 

三 中间层 $("elem").load()、$.get()、$.post()

1 load()

load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。

1. 可以用于两个页面的衔接

$("body").load("./a.html")  加载页面

2. 加载json

$("div").load("./package.json");

$(document).load("./package.json",function(res){
            console.log(res);
        }) 

3. 传数据

$("div").load("http://127.0.0.1:8001/?a=3&b=4");

GET和POST方式

 // ______
    $(document).load("http://127.0.0.1:8001/","a=3&b=4",function(res){
        console.log(res);
    }) 
     $(document).load("http://127.0.0.1:8001/","a=3&b=4",function(res,success,xhr){
        console.log(res,success,xhr);
    }) 
    // ________以上两种写法都是GET方式通信

    // ——————————下面这种是POST方式通信
     $(document).load("http://127.0.0.1:8001/",{a:3,b:4},function(res,success,xhr){
        console.log(res,success,xhr);
    }) 

2 POST()

 $.post("http://127.0.0.1:8001/",{a:10,b:20},function(res){
            console.log(res);
        });

3 GET()

$.get("http://127.0.0.1:8001/",{a:10,b:50},function(res){
            console.log(res);
        })

四 最基础层 Ajax

Ajax方法参数：

参数	类型	说明
	String	发送请求的地址
type	String	get/post 默认get方式
dataType	String	设置数据类型比如html、xml、json 等 dataType:“json”
data	Object或String	发送到服务器的数据，键值对字符串或对象
success	Function	请求成功后调用的回调函数
async	Boolean	是否异步处理。默认为true, false 为同步处理
timeout	Number	设置请求超时的时间(亳秒)
jsonp	String	指定-一个查询参数名称来覆盖默认的jsonp回调参数名callback.

默认使用方法

$.ajax({
            // type： get/post  默认get方式
    		// dataType:"json", 设置数据类型
            url:"http://127.0.0.1:8001/",
            data:{a:10,b:20},
            success:function(res){
                console.log(res);
            }
        })

自定义方式

$.ajax({
            type:"post",
            dataType:"json",
            // dataType:"jsonp",
            url:"http://127.0.0.1:8001/",
            data:{a:10,b:20},
            success:function(res){
                console.log(res);
            }
        })

例子：百度

$.ajax({
            dataType:"jsonp",
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            data:"wd=谢天&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback",
            jsonp:"callback"
        })
        function callback(data){
            console.log(data);
        }