侧边栏壁纸
博主头像
GabrielxD

列車は必ず次の駅へ。では舞台は?私たちは?

  • 累计撰写 675 篇文章
  • 累计创建 128 个标签
  • 累计收到 26 条评论

目 录CONTENT

文章目录

【学习笔记】AJAX

GabrielxD
2022-02-27 / 0 评论 / 0 点赞 / 333 阅读 / 2,419 字
温馨提示:
本文最后更新于 2022-08-31,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

原生AJAX

AJAX简介

​ AJAX全称 Asynchronous JavaScript And XML(异步的JS与XML)。

AJAX特点

优点

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

缺点

  1. 没有浏览历史,不可回退。
  2. 存在跨域问题(同源)。
  3. 对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 信息:可能是一个 BlobBufferSource (en-US)FormDataURLSearchParams 或者 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 模式: defaultno-storereloadno-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');
});
0

评论区