jQuery ajax

ajax的介绍
AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

案例：新浪微博、Google 地图、开心网等等。

GET 请求

• open(method,url,async)
• 规定请求的类型、URL 以及是否异步处理请求。
• method：请求的类型；
• GET 或 POSTurl：文件在服务器上的位置
• async：true（异步）或 false（同步）

GET 和POST 两种基本请求的区别：

• GET请求在URL中传送的参数是有长度限制的，而POST没有。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• GET参数通过URL传递，POST放在Request body中。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET产生的URL地址可以被Bookmark，而POST不可以。
• GET在浏览器回退时是无害的，而POST会再次提交请求。

 $(function(){
                $("button").eq(0).click(function(){
                    /*
                    $.ajax({
                        type: "get",
                        url: "1.get.php",
                        data: {
                            username: "钢铁侠",
                            password: "123abc",
                            age: 40
                        },
                        success: function(result){
                            alert(result);
                        },
                        error: function(msg){
                            console.log(msg);
                        }
                    })
                    */
                    $.get("demo.text", function(body, textStatus, xhr){
                        /*
                            body  下载到的数据
                            textStatus  当前网络状态  文本的形式
                            success
                            error
                            xhr  ajax对象
                        */
                        alert(body);
                        alert(textStatus + ", " + xhr.status);
                    })
                })
                $("button").eq(1).click(function(){
                    /*
                    $.ajax({
                        type: "post",
                        url: "1.post.php",
                        data: {
                            username: "钢铁侠",
                            password: "123abc",
                            age: 40
                        },
                        success: function(result){
                            alert(result);
                        },
                        error: function(msg){
                            console.log(msg);
                        }
                    })
                    */

GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

POST 请求

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：
$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.asp”)。
然后我们连同请求（name 和 city）一起发送数据。
“demo_test_post.asp” 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。
第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

     
  $.post("1.post.php", {
                        username: "钢铁侠",
                        password: "123abc",
                        age: 40
                    }, function(body, textStatus, xhr){
                        /*
                            body  下载到的数据
                            textStatus  当前网络状态  文本的形式
                            success
                            error
                            xhr  ajax对象
                        */
                        alert(body);
                        alert(textStatus + ", " + xhr.status);
                    })
                })

load

load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。
注意：还存在一个名为 load 的 jQuery 事件方法。
调用哪个，取决于参数

语法
$(selector).load(url,data,function(response,status,xhr))

url必需。规定您需要加载的 URL。

data可选。规定连同请求发送到服务器的数据。

function(response,status,xhr)可选。规定 load() 方法完成时运行的回调函数

额外的参数：
response - 包含来自请求的结果数据
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr - 包含 XMLHttpRequest 对象

              $("button").eq(2).click(function(){
                    $("div").load("demo.text")
                    /*
                        将数据下载完毕以后，再将数据填充到div里面
                    */
                })

jsonp

                //JQ对象下载数据，会自动数据转成对应的结构。
                $("button").eq(3).click(function(){
                    $.ajax({
                        url: "https://api.asilu.com/weather/?city=" + "拉萨",
                        dataType: "jsonp",
                        success: function(data, textStatus, xhr){
                            console.log(data);
                        },
                        error: function(msg){
                            console.log(msg);
                        }
                    })
                })
            })

逆战班 有前端有兴趣的同学可以通过链接观看视频还可以拿的代码
https://www.bilibili.com/video/av78804411?from=search&seid=12507842672442972460