AJAX概述

ajax是在浏览器端进行网络编程（发送请求、接受响应）的技术方案，可以通过 js 直接获取服务端最新的内容而不用重新加载页面，让web更接近桌面应用的用户体验。

• Ajax 就是浏览器提供的一套 API，可以通过JavaScript调用，从而实现通过代码控制请求与响应。实现通过JavaScript进行网络编程。

• 免费接口：https://jsonplaceholder.typicode.como/

jQuery中的AJAX

• 语法：$.ajax({ url: "获取数据的接口", type: "GET/POST", dataType: "json", data: {"id": 1}, success: function(data) {console.log(data)} })
• 说明：
  • url：表示获取数据的接口，字符串形式写入。
  • type：表示请求方式，GET、POST等。
  • dataType：表示规定返回数据的数据类型，json的数据结构。
  • data：表示对返回数据的过滤条件，只返回复合data中条件的数据。
  • success：表示发送请求成功，执行对应的功能函数。data表示接口返回的数据。

原生ajax

发送ajax请求步骤：

1、创建XMLHttpRequest类型的对象。
2、准备发送，打开与一个网址之间的连接。
3、执行发送动作。
4、指定xhr状态变化事件处理函数。

// 创建 XMLHttpRequest 对象
const xml = new XMLHttpRequest();
// 准备发送数据
xml.open("GET", "https://jsonplaceholder.typicode.com/users");
// 发送请求
xml.send(null);
// 指定处理xml状态变化的处理函数 
// onreadystatechange 事件函数
xml.onreadystatechange = function() {
    // xml.readyState 请求状态 4表示请求成功
    if(xml.readyState === 4) {
        // xml.responseText 响应数据
        console.log(xml.responseText)
    }
}

XMLHttpRequest 类型对象

AJAX API中核心提供的是一个XMLHttpRequest类型，所有的ajax请求都需要用到这个类型。

var xht = new XMLHttpRequest();

IE6 兼容
var xht = new ActiveXObject("Microsoft.XMxLHTTP");

兼容写法：

// 兼容写法
let xhr = null;
if (window.XMLHttpRequest) {
    // 标准浏览器
    xhr = new XMLHttpRequest();
} else {
    // 兼容 IE6
    xhr = ActiveXObject("Microsoft.XMLHTTP");
}

open()方法开启请求

• 本质上XMLHttpRequest就是JavaScript在Web平台中发送HTTP请求的手段，所以我们发出去的请求仍然是HTTP请求，同样符合http约定的格式。
• 语法：xhr.open("method", "url")
• method：要使用的HTTP的方法，比如"GET"、"POST"、"PUT"、"DELETE"等方法。
• url：发送请求的url地址，字符串格式。

send() 发送请求

• 用于发送 HTTP 请求
• 语法：xhr.send(body)
• body：在XHR请求中要发送的数据体，根据请求头中的类型进行传参。如果是GET请求，无需设置请求体，可以传递null或者不传参数。

setRequestHeader()方法设置请求头

• 此方法必须在open()和send()方法之间进行调用。
• 语法：xhr.setRequestHeader(header, value);
• header：一般设置Content-Type，传输数据类型，即服务器需要我们传输的数据类型。
• value：具体的数据类型，常用application/x-www-form-urlencoded和application/json。

// post请求
xhr.open("POST", "https://jsonplaceholder.typicode.com/users");
// 设置请求体
xhr.sendRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送post请求
xhr.send("name=Tom&age=20");

响应状态 onreadystatechange事件

当xhr响应的readystate发生变化的时候会触发onreadystatechange事件。

readyState属性返回一个XMLHttpRequest代理当前所处的状态，由于onreadystatechange事件是在xhr对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会触发多次。

同步和异步

同步：一个人在同一个时刻只能做一件事情，在执行一些耗时的操作时，只有等待这个事情处理完成才去处理接下来的事情。
异步：再执行一下耗时的操作时同时也去做比的事情，而不是等待。

Ajax中的实现：

• xhr.open()方法的第三个参数要求传入的是一个boolean值，其作用就是设置此次请求是否采用异步方式执行。
• 默认为true异步请求，如果需要同步执行可以通过传递false实现。
• 如果采用同步方法执行，则代码会卡死在send()这一步。

JSON数据类型

json格式的数据与js对象的区别

• 1.json数据不需要存储到变量中。
• 2.结束时不需要添加分号。
• 3.json 数据中的属性名必须添加分号。

JSON对象的转换：

• 在es5中，提供了一个JSON对象，JSON对象有两个方法，parse()和stringify()。
• 语法：JSON.parse()/JSON.stringify()
• parse()表示将json格式的字符串转换成对象格式，转换后的结果具有了属性和方法，方便在js中使用数据。
• stringify()表示将json格式的对象转换成字符串格式。

json-server

• json-server是一个node模块，运行Express服务器，可以指定一个json文件作为api的数据源。
• 使用网址：https://github.com/typicode/json-server

GET 请求

• 通常在一次 GET 请求过程中，传递的参数都是通过url地址中的?后面传递参数。
• 一般在GET请求中，无需设置请求头。
• 无需设置响应体，可以传递null或者不写。

POST 请求

• POST请求过程中，都是采用请求体承载需要提交的数据。
• 需要设置请求头中的Content-Type，以便于服务端接受数据。
• 需要提交到服务端的数据可以通过send()方法传递参数。

jQuery中的ajax()方法

jQuery中有一套专门封装的AJAX方法，$.ajax()
常用参数介绍：

• url：请求地址 字符串类型
• type：请求方式，默认"get"请求，字符串格式。
• dataType：服务端响应数据类型。
• contentType：请求体内容类型。默认 application/x-www-form-urlencoded。
• data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递。
• timeout：请求超时时间。单位是毫秒。
• beforeSend：请求发送之前触发。function格式
• success：请求成功后触发（响应状态码为200的时候）function格式
• error：请求失败触发。function格式。
• complete：请求完成后触发（不论成功或者失败）。function格式。

<script>
    $.ajax({
        url: "http://localhost:3000/users",
        type: "get",
        data: {
            id: 1,
        },
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",
        beforeSend: function() {
            console.log("请求发送之前触发");
        },
        success: function(data) {
            console.log(data);
        },
        error: function() {
            console.log("请求失败后触发");
        },
        complete: function() {
            console.log("请求完成后触发，不论成功或者失败");
        },
    });
</script>

$.get() 方法

• 这是一个简单的 GET 请求功能以取代复杂 .ajax。

• 语法：$.get(url,data,success(response,status,xhr),dataType)

• 参数：

  • url：请求连接。
  • data：请求参数。需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递。
  • success(response)：请求成功后的回调函数，response表示包含来自请求的结果数据。

<script src="lib/jquery-1.12.4.min.js"></script>
<script>
    $.get("http://localhost:3000/users", {
        id: 1
    }, function(response) {
        console.log(response);
    });
</script>

$.post() 方法

• post() 方法通过 HTTP POST 请求从服务器载入数据。
• 语法：$.post(url,data,success(data, textStatus, jqXHR),dataType)
• 参数：
  • url：请求连接。
  • data：请求参数。需要传递到服务端的数据。通过请求体传递。
  • success(response)：请求成功后的回调函数，response表示包含来自请求的结果数据。

<script>
    $.post(
        "http://localhost:3000/comments", {
            postId: 1,
            content: "bad",
        },
        function(response) {
            console.log(21212121);
            console.log(response);
        }
    );
</script>

其他请求方法 put delete

<script>
    // put
    $.ajax({
        url: "http://localhost:3000/comments/2",
        type: "put",
        dataType: "json",
        data: {
            postId: 1,
            content: "good",
        },
        success: function(response) {
            console.log(response);
        },
    });
    // delete
    $.ajax({
        url: "http://localhost:3000/comments/3",
        type: "delete",
    });
</script>

axios

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

• 特性：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

• 安装：

  • npm install axios / bower install axios

• 使用：

  • <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• 案例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 发送get请求
    axios
        .get("http://localhost:3000/users", {
            params: {
                id: 1,
            },
        })
        .then(function(response) {
            console.log(response);
        })
        .catch(function(error) {
            console.log(error);
        });
    // 对指定id发送请求
        axios.get("http://localhost:3000/users/1")
    .then(function(response) {
        console.log(response.data);
    })
    .catch(function(error) {
        console.log(error);
    });
</script>

.then() 方法

• 表示axios发送请求成功后要执行的函数。
• 参数：function()

.catch() 方法

• 表示axion发送请求失败后要执行的函数。
• 参数：function()

axios执行get请求

• 执行get请求的时候，第一个请求参数是请求url，必传参数。
• 第二个请求参数是对象格式的请求参数，传递的是请求参数。如{id:1};

<script>
    // 为给定id的user创建请求
    axios.get("http://localhost:3000/users?id=1")
        .then(function(response) {
            console.log(response.data);
        });

    // 通过config配置参数发送请求
    axios.get("http://localhost:3000/users", {
        params: {
            id: 1
        }
    }).then(function(response) {
        console.log(response.data);
    })
</script>

axios执行post请求

• axios在执行post请求的时候，第一个请求参数是url，必传参数。
• 第二个请求参数是向服务器发送的数据，对象格式。

<script>
    axios.post("http://localhost:3000/users", {
        name: "james",
        age: 20,
        class: 2
    }).then(function(response) {
        console.log(response);
    })
</script>

axios 执行多个并发请求

<script>
        // 获取users信息
    function getUserData() {
        return axios.get("http://localhost:3000/users?id=1");
    };
    // 获取posts信息
    function getPostData() {
        return axios.get("http://localhost:3000/posts?id=1");
    };
    // 执行多个并发请求
    // userData getUserData 返回的数据
    // postData getPostData 返回的数据
    axios.all([getUserAccount(), getPostAccount()])
        .then(axios.spread(function(userData, postData) {
            console.log(userData);
            console.log(postData);
        }));
</script>

axios API

• 可以通过向axios()传递相关配置来创建请求。
• 语法：
  • axios(config) config为对象格式的配置选项
  • axios(url, config) config可选

axios(config) config常用配置选项

• url：用于请求服务器的url，必传参数。
• method：创建请求时使用的方法。
• baseURL：相对URL前缀，使用时将自动添加到url前面。
• headers：自定义请求头。
• params：请求参数。
• data：作为请求体被发送的数据。
• timeout：指定请求超时的毫秒数
• responseType：表示服务器响应的数据类型，默认是json

全局配置默认值

• 可以指定将被用在各个请求的配置默认值
• axios.defaults.baseURL = "https://api.example.com";
• axios.defaults.headers.post["Content-Type"] = "application/json";

拦截器

• 在请求或响应被then或catch处理前拦截他们。拦截器对多个axios发送的请求都有效。

<script>
    // 发送请求之前的拦截器
    // 第一个参数是设置发送请求之前，可以修改config配置。
    // 第二个参数是设置请求发生错误之后做些什么。
    axios.interceptors.request.use(function(config) {
            config.params = {
                id: 1
            };
            config.baseURL = "http://localhost:3000/";
            return config;
        });
    // 响应数据的拦截器
    // 第一个参数是对响应数据做什么
    // 第二个参数是对响应错误做什么
    axios.interceptors.response.use(function(response) {
        return response.data;
    });
    axios("users")
        .then(function(response) {
            console.log(response)
        })
        .catch(function(error) {
            console.log(error)
        })
</script>

onload事件和onprogress事件

• xhr.onload事件：只在请求完成时触发。
• xhr.onprogress事件：只在请求进行中触发。
  • e.loaded属性：在周期性请求过程中，接收到的数据的个数。
  • e.total属性：在周期性请求过程中，接收到的数据的总个数。

response属性

• 以对象的形式表述响应体，其类型取决于 responseType的值。可以通过设置responseType的值，通过特性的类型请求数据。
• responseType要在调用open()初始化请求之后，在调用send()发送请求到服务器之前设置方可生效。

同源策略

• 同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同。
• 在同源的策略下，只有同源的地址才可以相互通过ajax的方式请求。
• 同源或者不同源说的是两个地址之间的关系，不同源之间的请求我们称之为跨域请求。
• 在同源策略下，浏览器不允许Ajax跨域获取服务器数据。

JSONP原理

• JSON with Padding，是一种借助于script标签发送跨域请求的技巧。
• 原理就是在客户端借助 script 标签请求服务端的一个地址。
• 地址返回一段带有某个全局函数调用的JavaScript脚本。
• 在调用函数中，原本原本需要返回给客户端的数据，通过参数传递给这个函数。
• 这样客户端的函数中就可以通过参数得到原本服务器想要返回的数据。

jQuery中的jsonp

• jquer中使用jsonp，就是在使用$.ajax()方法的时候，将dataType参数设置成jsonp。当传入的是jsonp的时候，jquery中的ajax方法就会使用JSONP的方式发送请求。

<input type="button" id="btn" value="发送">

<script src="lib/jquery-1.12.4.min.js"></script>
<script>
    const $btn = $("#btn");
    $btn.click(function() {
        console.log(22222)
        $.ajax({
            url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=33425,1435,33242,31660,33285,33287,33343,33414,33321,33388,33370&req=2",
            type: "GET",
            dataType: "jsonp",
            data: {
                wd: "ajax" // 设置关键字
            },
            jsonp: "cb", // 设置回调函数参数的名称，必须与后台接口的回调函数参数名保持一致。
            jsonpCallback: "callback", // jQ 自动分配的回调函数进行重命名
            success: function(response) {
                console.log(response);
            }

        })
    })
</script>

cors 跨域

• Cross Origin Resource Share，跨域资源共享。
• 这种方案无需客户端做出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候，添加一个Access-Control-Allow-Origin的响应头，表示这个资源允许指定域请求。
• Access-Control-Allow-Origin的值：
  • *：表示允许任意资源访问，不安全。
  • http://foo.com：允许指定的访问源。

模板引擎作用

• 减少字符串拼接
• 在模板里面解析json，然后跟html内容拼接。

artTemplate 模板引擎使用步骤

• 引入模板文件
• 创建模板
• 将数据跟模板进行绑定
• 在模板里面编写代码解析数据
• 绑定数据和模板之后得到的内容
• 将数据内容写到页面上面。

artTemplate详细语法请参照 https://aui.github.io/art-template/zh-cn/docs/syntax.html