【学习笔记】AJAX

原生AJAX

AJAX简介

AJAX全称 Asynchronous JavaScript And XML（异步的JS与XML）。

AJAX特点

优点

可以无需刷新页面与服务器端进行通信。
允许根据用户事件来更新部分页面内容。

缺点

没有浏览历史，不可回退。
存在跨域问题（同源）。
对SEO（搜索引擎优化）不友好。

XML简介

XML全称 Extensible Markup Language（可扩展标记语言），其被设计用来传输和存储数据。

HTTP协议

HTTP全称 HyperText Transport Protocal（超文本传输协议）。

请求报文

请求行

GET /s?ie=UTF-8&wd=1 HTTP/1.1

请求头

Host: www.baidu.com
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0

空行
请求体

ie=UTF-8&wd=1

响应报文

响应行

HTTP/1.1 200 OK

响应头

Content-Type: text/html;charset=utf-8
Content-Length: 2048
Content-encoding: gzip

空行
响应体

<!DOCTYPE html>
<html>
    <head>
    	...
    </head>
    <body>
        ...
    </body>
</html>

AJAX的使用

核心

WebAPI: XMLHttpRequest

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。

使用步骤

1、创建 XMLHttpRequest 对象

const xhr = new XMLHttpRequest();

2、设置请求信息

xhr.open(method, url);
// GET请求在此处设置请求参数，如:
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

可选：设置请求头

xhr.setRequestHeader(key, value);
// 例如:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

可选：设置响应体类型

xhr.responseType = 'json'; // 设置响应体类型为json格式

3、发送请求

xhr.send(body); // GET请求不用设置body参数
// POST请求在此处设置请求参数，如:
xhr.send('a=100&b=200&c=300');

4、接收响应

// readyState改变时触发该事件
xhr.onreadystatechange = function () {
    // 判断 服务端返回了所有结果
    if (xhr.readyState === 4) {
        // 判断 响应状态码
        if (xhr.status >= 200 && xhr.status < 300) {
            // 处理结果
            /*
            xhr.responseXML xml格式的响应数据
            xhr.responseText 文本格式的响应数据
            xhr.status 状态码
            xhr.statusText 状态字符串
            xhr.getAllResponseHeaders() 所有响应头
            */
            let res = xhr.response;
            console.log(res);
        } else {
            alert('请求失败');
        }
    }
}

AJAX请求状态

XMLHttpRequest.readyState

解决IE缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题

xhr.open("get","/server?t="+Date.now());

请求超时与网络异常

设置超时时间

在IE中，超时属性可能只能在调用 open() 方法之后且在调用 send() 之前设置。

xhr.timeout = 2000; // 超时时间，单位是毫秒

请求超时处理

xhr.ontimeout = function (e) {
  // ...
};

网络异常处理

xhr.onerror = function (e) {
  // ...
};

取消请求

当一个请求被终止，它的 readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。

xhr.abort();

jQuery中的AJAX

GET请求

$.get(url, [data], [callback], [type])

url : 请求的 URL 地址。

data : 请求携带的参数。

callback : 载入成功时回调函数。

type : 设置返回内容格式，xml, html, script, json, text, _default。

实例

$.get('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
    console.log(data);
}, 'json');

POST请求

$.post(url, [data], [callback], [type])

url : 请求的 URL 地址。

data : 请求携带的参数。

allback : 载入成功时回调函数。

type : 设置返回内容格式，xml, html, script, json, text,

实例

$.post('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
    console.log(data);
}, 'json');

通用方法

$.ajax(settings)
$.ajax(url[ ,settings])

url : 请求的 URL 地址。

settings : AJAX 请求设置，所有选项都是可选的。

实例

$.ajax({
    url: 'http://127.0.0.1:8000/delay', // 请求url
    data: { ms: 0 }, // 请求参数
    type: 'GET', // 请求方法
    // dataType: 'json', // 返回数据类型
    timeout: 2000, // 超时时间 ms
    // 请求头信息
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        name: 'GabrielxD'
    },
    // 成功回调
    success(data) {
        console.log(data);
    },
    // 失败回调
    error() {
        console.log('failed');
    }
});

Axios中的AJAX

GET请求

axios.get(url[, config])

url : 请求的 URL 地址。

config : 配置项。

实例

axios.get('/axios-server', {
    params: { a: 100, b: 200 }, // 请求参数
    // 请求头信息
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        name: 'GabrielxD'
    },
}).then(value => {
    console.log(value);
});

POST请求

axios.post(url[, data[, config]])

url : 请求的 URL 地址。

data : 请求体。

config : 配置项。

实例

axios.post('/axios-server', {
    // 请求体
    username: 'admin',
    password: 'admin'
}, {
    params: { a: 100, b: 200 }, // 请求参数
    // 请求头信息
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        name: 'GabrielxD'
    },
});

通用方法

axios(config)
axios(url[, config])

url : 请求的 URL 地址。

config : 配置项。

实例

axios({
    method: 'POST', // 请求方法
    url: '/axios-server', // 请求url
    params: { a: 100, b: 200 }, // 请求参数
    // 请求头信息
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        name: 'GabrielxD'
    },
    // 请求体
    data: {
        username: 'admin',
        password: 'admin'
    }
}).then(response => {
    console.log(response);
    console.log(response.status); // 响应状态码
    console.log(response.statusText); // 响应状态字符串
    console.log(response.headers); // 响应头信息
    console.log(response.data); // 响应体
});

fetch发送AJAX请求

语法

Promise<Response> fetch(input[, init]);

参数

input : 定义要获取的资源。这可能是：

一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.
一个 Request 对象。

init (可选) 一个配置项对象，包括所有对请求的设置。可选的参数有：

method: 请求使用的方法，如 GET、``POST。
headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
body: 请求的 body 信息：可能是一个 Blob、BufferSource (en-US)、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials，如 omit、``same-origin 或者 include。为了在当前域名内自动发送 cookie ，必须提供这个选项，从 Chrome 50 开始，这个属性也可以接受 FederatedCredential (en-US) 实例或是一个 PasswordCredential (en-US) 实例。
cache: 请求的 cache 模式: default、 no-store、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误）, 或者 manual (手动处理重定向). 在Chrome中默认使用follow（Chrome 47之前的默认值是manual）。
referrer: 一个 USVString 可以是 no-referrer、``client或一个 URL。默认是 client。
referrerPolicy: 指定了HTTP头部referer字段的值。可能为以下值之一： no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
integrity: 包括请求的 subresource integrity 值（例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

实例

fetch('http://127.0.0.1:8000/fetch-server', {
    // 请求方法
    method: 'POST',
    // 请求头
    headers: {
        a: 100,
        b: 200
    },
    // 请求体
    body: 'username=admin&password=admin'
}).then(response => {
    console.log(response);
    return response.json();
}).then(response => {
    console.log(response);
});

跨域

同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同。违背同源策略就是跨域。

如何跨域

JSONP

JSONP 是什么？

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。

JSONP 是怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP 就是利用 script 标签的跨域能力来发送请求的。

JSONP 的使用

// 1. 动态的创建一个 script 标签。
const scriptEle = document.createElement('script');
// 2. 设置 script 标签的 src 属性，设置回调函数名以及其他的参数。
scriptEle.src = `http://127.0.0.1:8000/auth-server?callback=handle&username=${this.value}`;
// 3. 把 script 标签添加到 body 标签中。
document.body.appendChild(scriptEle);

服务器中路由的处理

router.get('/auth-server', (request, response) => {
    // 接受回调函数名
    let callback = request.query.callback;
    // 模拟要返回的数据
    const data = {
        flag: false,
        msg: '用户名不存在'
    }
    let str = JSON.stringify(data);
    response.end(`${callback}(${str})`);
})

CORS

CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

CORS 是怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

CORS 的使用

服务端设置响应头

router.all('/cors-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('hello client');
});

【学习笔记】AJAX

原生AJAX

AJAX简介

AJAX特点

优点

缺点

XML简介

HTTP协议

请求报文

响应报文

AJAX的使用

核心

使用步骤

AJAX请求状态

解决IE缓存问题

请求超时与网络异常

取消请求

jQuery中的AJAX

GET请求

实例

POST请求

实例

通用方法

实例

Axios中的AJAX

GET请求

实例

POST请求

实例

通用方法

实例

fetch发送AJAX请求

语法

参数

实例

跨域

同源策略

如何跨域

JSONP

JSONP 是什么？

JSONP 是怎么工作的？

JSONP 的使用

CORS

CORS 是什么？

CORS 是怎么工作的？

CORS 的使用

评论区