jQuery中的Ajax

原生的Ajax

    // 01 创建xhr对象 --XMLHttpRequest
    var xhr = new XMLHttpRequest(); //0

    // new ActiveXobject("Microsoft.HTTP")
    // 02 初始化
    xhr.open("get","test.txt",true); //1
    // 03 发送
    xhr.send(); //2
    // 04 监听事件
    xhr.onreadystatechange = function(){
        if (xhr.readyState==4) {
            if (xhr.status>=200&&xhr.status<300) {
                console.log(xhr.responseText);
            }
        }
    }
    // 同源策略：同协议 同域名 同端口
    // http://10.0.150.120:80

Ajax之load

    // 01 ajax之load()
    // 经常用于加载一段html代码
    $("button").click(function(){
        // $obj.load(url)
        // url指的是服务器的一个html文件
        // 功能：向服务器请求一段html代码加载到(appendTo)$obj
        // $("#cont").load("load.html");

        // $obj.load(url,回调函数)
        // 回调函数可以在数据加载完毕之后进行一些处理
        $("#cont").load("load.html",function(){
            //给请求到的li添加边框
            $("li").css("border","1px solid red");
        })
    })

Ajax之$.get()

    //$.get() 全局函数
    //$().css() $obj.load()

    // jQuery $ 是构造函数
    // 构造函数可以来创建实例
    /*
    function Dog(){
        this.name = "旺财";
    }
    Dog.prototype.bark = function(){
        console.log("汪汪汪");
    }
    var d = new Dog();
    d.name;
    d.bark();//原型方法 是可以对Dog的实例使用的 实例函数

    // 函数也是一个对象
    Dog.fn1 = function(){
        console.log("我是添加到Dog这个函数上的属性");
    }//fn1就是一个全局函数 静态属性（在其他面向对象语言中：类函数 类方法 ）

    Dog.fn1();
    d.fn1();//报错

    function jQuery(){

    }
    $("#id").css() .attr() .prop() .children
    $("#id").load()//jQuery的实例 jQuery对象

    jQuery.get() 
    $.get() 全局函数 静态属性
    $.post()
    $.getScript()
    $.getJSON()
    $.ajax()
    */
    
    /* 以“get”的方式向服务器请求数据

    $.get(url,[data],[fn],[dataType])
    url:请求文件的地址
    data:请求参数{"userId":"123","pwd":"111"};
    fn:回调函数
        function(data,textStatus,jqxhr){}
    dataType: "html|xml|json|script|text"

    */

    /*
    $.get("test.txt",function(data,textStatus,jqxhr){
        // console.log(data);
        // console.log(textStatus);//success |error |not found|notModified(没有修改)
        // console.log(jqxhr);
        if (textStatus=="success") {
            console.log(data);
        }
    },"text");
    */
    // t.php?id="1234"&pwd="123456"
    /*
    $("button").click(function(){
        $.get(
        "get_html.php",
        {
        "username":$("#name").val(),
        "content":$("#cont").val()
        },
        function(data,textStatus,jqxhr){
            if (textStatus=="success") {
                $(data).appendTo("#msg");
            }
        },
        "html"
        );
    })
    */
    $("button").click(function(){
        $.get(
        "get_json.php",
        {
        "username":$("#name").val(),
        "content":$("#cont").val()
        },
        function(data,textStatus,jqxhr){
            if (textStatus=="success") {
                console.log(data);
                console.log(jqxhr);
                $("<p>"+data.username+"</p>").appendTo("#msg");
                $("<p>"+data.content+"</>").appendTo("#msg");
                // $(data).appendTo("#msg");
            }
        },
        "json"
        );
    })


    // $.post(url,data,fn,dataType)

get与post方式的区别：
1.安全性。post的安全性高于get;如果以get方式请求，请求参数拼接 到url的后面，安全性低；以post方式请求，请求参数会包裹请求体中，安全性更高。
2.数量级的区别。get方式传输的数据量小，规定不能超过2kB,post方式请求数据量大，没有限制。
3.传输速度。get的传输速度高于post。

Ajax之$.getScript()

$.getScript(url,fn)
向服务器请求脚本文件
url:地址
fn:回调函数
function(){
//脚本文件加载完毕之后会调用
}
<script src="XX.js"></>

    $("button").click(function(){
        $.getScript("randomColor.js",function(){
            $("body").click(function(){
                $(this).css("background-color",randomColor());
            })
        })
    })

Ajax之$.getJson()

    // 请求json数据
    // $.getJSON("url",data,fn)
    // $.getJSON("ajaxTest.json",function(data){
    //  console.log(data);
    // })
    // js原生的jsonp 跨域请求
    // 扩展的json --- json padding
    // 第一步
    var sc = document.createElement("script");
    sc.setAttribute("type","text/javascript");

    //  cb=test "cb" 是跟服务器商量好的 test是自己定义函数名 注意=左右不可以加空格
    sc.src = "http://localhost/day05Ajax/jsonp.php?cb=test"
    document.body.appendChild(sc);u

    // 第二步
    function test(data){
        console.log(data);
    }
    //jQuery的jsonp "cb"是和服务器商量好的 ?固定写就可以 
    $.getJSON("http://localhost/day05Ajax/jsonp.php?cb=?",function(data){
        console.log(data);
    })

Ajax之$.ajax

    $.ajax({
        url:请求地址,
        type:"get|post|put|delete" 默认是get,
        data: 请求参数 {"id":"123","pwd":"123456"},
        dataType:请求数据类型"html|text|json|xml|script",
        success:function(data,dataTextStatus,jqXhr){},
        error:function(jqXhr,textStatus,error){}
    })

    同源请求
$.ajax({
    url:"my1.php",
    type:"get",
    dataType:"text",
    success:function(data,textStatus,jqXhr){
        console.log("____________成功_________");
        console.log(data);
        console.log(textStatus);
        console.log(jqXhr);
        console.log("______________________");
    },
    error:function(jqXhr,textStatus,error){
        console.log("*************失败*********");
        console.log(jqXhr);
        console.log(textStatus);
        console.log(error);
        console.log("**************************");
    }
})
// 不同源
$.ajax({
    url:"http://localhost/day05Ajax/jsonp.php",
    type:"get",
    dataType:"jsonp",//使用jsonp 该项必须写
    jsonp:"cb",//跟服务器端商量的key值
    success:function(data,textStatus,jqXhr){
        console.log(data);
    },
})