「JavaScript」Ajax学习笔记(含Node.js)

Contents

原生Ajax
三种常见的Ajax请求方式
跨域与解决
本笔记中涉及到的服务端代码示例汇总

原生Ajax

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

ajax请求状态 :xhr.readyState

0:请求未初始化,还没有调用 open()。
1:请求已经建立,但是还没有发送,还没有调用 send()。
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。
4:响应已完成;您可以获取并使用服务器的响应了

xhr.send()与POST请求

xhr.send() 方法的参数取决于请求的类型和数据的格式。对于HTTP GET请求，send()方法不需要参数，因为请求的参数通常在URL中指定。对于其他HTTP请求类型（如POST、PUT、DELETE等），可以将数据作为参数传递给send()方法。

客户端通过xhr.send()携带JSON参数发送POST请求

一般是将js中的对象实例通过JSON.stringify(XXX)方法转换为字符串格式通过网络传递，接收端如果设定的是接受JSON数据则会自动把该字符串转换为js对象实例，比如Nodejs express中可以通过req.body直接访问该转换后的js对象实例。

对于使用JSON格式传递数据的POST请求，可以使用以下代码：

const xhr = new XMLHttpRequest();
const url = "http://example.com/api/data";
const data = {
  name: "John",
  age: 30
};
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));
xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200) {
        let text = xhr.responseText;
        console.log(text);
    }
}

在这个例子中，xhr.open() 方法用于打开与服务器的连接，并指定HTTP请求的方法和URLxhr.setRequestHeader() 方法用于设置请求头，指定请求的数据类型为JSON格式。（这个少了的话服务端收到的是{}空对象）。JSON.stringify() 方法用于将JavaScript对象转换为JSON字符串，并将其作为参数传递给xhr.send() 方法。在发送请求之后，可以使用xhr.onload 或 xhr.onreadystatechange 事件来处理服务器响应。

注意，send() 方法是异步的，即它不会等待服务器响应就会立即返回。如果需要处理服务器响应，应该在send()方法之后设置一个事件处理程序。

服务端通过req.body接受POST请求的JSON参数

示例：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 使用 body-parser 中间件来解析请求体
app.use(bodyParser.json());

// POST 请求处理函数
app.post('/api/data', (req, res) => {
  // 从请求体中获取 JSON 参数
  const data = req.body;

  // 打印 JSON 参数
  console.log(data);

  // 做出响应
  res.send('Got it!');
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在这个例子中，我们使用了 Express 框架来创建一个服务器。其中，body-parser 中间件被用来解析 POST 请求的请求体。使用 app.use(bodyParser.json()) 就可以将请求体解析为 JSON 对象，并将其作为 req.body 属性存储在请求对象中。

在 POST 请求的处理函数中，我们可以通过 req.body 属性获取请求体中的 JSON 参数，并进行相应的处理。最后，使用 res.send() 方法来向客户端发送响应数据。

需要注意的是，在接收到 POST 请求之前，需要使用 body-parser 中间件来解析请求体，才能从 req.body 中获取 JSON 参数。另外，如果客户端使用了其他数据格式（如 form-data 或 x-www-form-urlencoded），则需要使用相应的解析中间件（bodyParser.urlencoded() 和 multer）来解析请求体。

可用req.query.XXX来获取GET URL中?XXX=ABC中的参数XXX

客户端代码示例

// client
var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost:8000/server?name=QiuYeDx');

xhr.send("hello world!");

xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200) {
        var text = xhr.responseText;
        console.log(text);
    }
}

服务端代码示例

// server
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    const name = request.query.name || 'world';
    response.send('HELLO, ' + request.query.name + '! AJAX - 2');
});

一些常见问题

需要注意防跨域的问题

//node后端设置响应头  允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');

解决ie缓存问题

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

解决方式：浏览器的缓存是根据 url地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题 xhr.open("get","/testAJAX?t="+Date.now());

请求超时与网络异常

当你的请求时间过长,或者无网络时,进行的相应处理

btn.addEventListener('click', function () {
    const xhr = new XMLHttpRequest();
    //超时设置 2s 设置
    xhr.timeout = 2000;
    //超时回调
    xhr.ontimeout = function () {
        alert("网络异常, 请稍后重试!!");
    }
    //网络异常回调
    xhr.onerror = function () {
        alert("你的网络似乎出了一些问题!");
    }

    xhr.open("GET", 'http://127.0.0.1:8000/delay');
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                result.innerHTML = xhr.response;
            }
        }
    }
})

取消请求

在请求发出去后但是未响应完成时可以进行取消请求操作

const btns = document.querySelectorAll('button');
let x = null;
btns[0].onclick = function () {
    x = new XMLHttpRequest();
    x.open("GET", 'http://127.0.0.1:8000/delay');
    x.send();
}
// abort
btns[1].onclick = function () {
    x.abort();
}

重复请求问题

利用之前Ⅴ中取消请求知识点,当我点击时判断之前请求是否在发送中,如果是,则停止请求

btns[0].onclick = function () {
    //判断标识变量
    if (isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
    x = new XMLHttpRequest();
    //修改 标识变量的值
    isSending = true;
    x.open("GET", 'http://127.0.0.1:8000/delay');
    x.send();
    x.onreadystatechange = function () {
        if (x.readyState === 4) {
            //修改标识变量
            isSending = false;
        }
    }
}

三种常见的Ajax请求方式

1.jQuery发送AJAX请求

jQuery有三种发送请求方法:

当你只是简单的请求数据,可以直接使用前两种方式请求,当你需要设置的东西较多的时候,可以使用$.ajax()方法

$.get()

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

$.post()

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

$.ajax()

$('button').eq(2).click(function () {
    $.ajax({
        //url
        url: 'http://127.0.0.1:8000/jquery-server',
        //参数
        data: { a: 100, b: 200 },
        //请求类型
        type: 'GET',
        //响应体结果: json, jsonp, text, script, html, xml等
        dataType: 'json',
        //成功的回调
        success: function (data) {
            console.log(data);
        },
        //超时时间
        timeout: 2000,
        //失败的回调
        error: function () {
            console.log('出错啦!!');
        },
        //头信息, 服务端可通过request.headers获得头信息对象
        headers: {
            c: 300,
            d: 400
        }
    });
});

2.Axios发送AJAX请求

axios.get()

axios.get(url,data,params)

//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';

btns[0].onclick = function () {
    //GET 请求
    axios.get('/axios-server', {
        //url 参数
        params: {
            id: 100,
            vip: 7
        },
        //请求头信息
        headers: {
            name: 'qiuyedx',
            age: 20
        }
    }).then(value => {
        console.log(value);
    });
}

axios.get()

axios.post(url,data,params)

//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';
btns[1].onclick = function () {
    axios.post('/axios-server', {
        username: 'admin',
        password: 'admin'
    }, {
        //url 
        params: {
            id: 200,
            vip: 9
        },
        //请求头参数
        headers: {
            height: 180,
            weight: 180,
        }
    });
}

axios({}) 【常用】

axios({})

//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';
btns[2].onclick = function () {
    axios({
        //请求方法
        method: 'POST',
        //url
        url: '/axios-server',
        //url参数
        params: {
            vip: 10,
            level: 30
        },
        //头信息,此部分如果使用自定义的头信息,需要服务端进行相应修改,正常不设置
        headers: {
            a: 100,
            b: 200
        },
        //请求体参数
        data: {
            username: 'admin',
            password: 'admin'
        }
    }).then(response => {
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
    })
}

3.Fetch发送AJAX请求

代码示例

btn.onclick = function () {
    fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
        //请求方法
        method: 'POST',
        //请求头
        headers: {
            name: 'qiuyedx'
        },
        //请求体
        body: 'username=admin&password=admin'
    }).then(response => {
        // return response.text(); //直接把JSON数据转换为字符串了
        return response.json(); //获取的是对象实例
    }).then(response => {
        console.log(response);
    });
}

跨域与解决

What, Why, How?

什么是跨越？

一个网页向另一个不同域名/不同协议/不同端口的网页请求资源，这就是跨域。

跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。

为什么会产生跨域请求？

因为浏览器使用了同源策略。

什么是同源策略？

同源策略是Netscape提出的一个著名的安全策略，现在所有支持JavaScript的浏览器都会使用这个策略。同源策略是浏览器最核心也最基本的安全功能，如果缺少同源策略，浏览器的正常功能可能受到影响。可以说web是构建在同源策略的基础之上的，浏览器只是针对同源策略的一种实现。

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

为什么浏览器要使用同源策略？

是为了保证用户的信息安全，防止恶意网站窃取数据，如果网页之间不满足同源要求，将不能:

共享Cookie、LocalStorage、IndexDB
获取DOM
AJAX请求不能发送

跨域的五个解决方式

前端使用jsonp（不推荐使用）
后台Http请求转发
后台配置同源Cors（推荐）
使用SpringCloud网关
使用nginx做转发（推荐）

jsonP

jsonP 是什么?

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

jsonP 怎么工作的？

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

jsonP的使用

示例代码：

// 1. 动态创建一个 script 标签
var script = document.createElement("script");
// 2. 设置 script 的 src， 设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
    alert(data.name);
};
// 3. 将 script 添加到 body 中
document.body.appendChild(script);

// 4. 服务器中路由的处理
router.get("/testAJAX", function (req, res) {
    console.log("收到请求");
    var callback = req.query.callback;
    var obj = {
        name: "孙悟空",
        age: 18
    }
    res.send(callback + "(" + JSON.stringify(obj) + ")");
});

jQuery发送jsonP请求

示例代码：

// client
$('button').eq(0).click(function () {
    $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) {
        $('#result').html(`
                  名称: ${data.name}<br>
                  校区: ${data.city}
              `)
    });
});

// server
app.all('/jquery-jsonp-server', (request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: 'NEU',
        city: ['北京', '上海', '深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.send(`${cb}(${str})`);
});

CORS

CORS文档链接

CORS是什么?

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

CORS是怎么工作的?

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

原理如下：

同源策略：浏览器实行同源策略，即JavaScript代码只能访问同源（相同协议、域名和端口）的资源，防止跨域攻击。
跨域请求：当Web应用程序中的JavaScript代码需要从不同源的服务器请求资源时，例如Ajax请求，浏览器会首先发送一个跨域请求预检（preflight request）。
预检请求（Preflight Request）：浏览器发送一个OPTIONS请求到目标服务器，携带一些额外的头部信息，如Origin、Access-Control-Request-Method和Access-Control-Request-Headers。该请求用于询问服务器是否允许实际请求。
服务器响应：服务器收到预检请求后，会解析请求头部信息，并根据服务器的配置确定是否允许跨域访问。如果服务器支持跨域请求，则会返回一组响应头部信息，包括Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等。
客户端处理：浏览器收到服务器返回的响应头部信息后，会检查其中的Access-Control-Allow-Origin头部，如果允许跨域访问，则浏览器会继续发送实际的跨域请求，并将服务器返回的响应交给JavaScript代码处理。如果不允许跨域访问，则浏览器会抛出一个错误，JavaScript代码无法访问该响应。

通过这种机制，CORS允许服务器控制哪些源可以访问其资源，从而在安全的前提下实现跨域数据访问。

代码示例

app.all('/cors-server', (request, response) => {
  //设置响应头
    //响应首部中可以携带一个 Access-Control-Allow-Origin 字段
  response.setHeader("Access-Control-Allow-Origin", "*");
    //Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段
  response.setHeader("Access-Control-Allow-Headers", '*');
    //Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP
  response.setHeader("Access-Control-Allow-Method", '*');
  // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
  response.send('hello CORS');
});

HTTP 响应首部字段

Access-Control-Allow-Origin

响应首部中可以携带一个 Access-Control-Allow-Origin 字段，其语法如下:

Access-Control-Allow-Origin: <origin> | *

其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。

例如，下面的字段值将允许来自 http://mozilla.com 的请求：

Access-Control-Allow-Origin: http://mozilla.com

如果服务端指定了具体的域名而非“*”，那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端：服务器对不同的源站返回不同的内容。

Access-Control-Expose-Headers

在跨源访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单，例如：

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

这样浏览器就能够通过getResponseHeader访问X-My-Custom-Header和 X-Another-Custom-Header 响应头了。

Access-Control-Max-Age

Access-Control-Max-Age 头指定了preflight请求的结果能够被缓存多久，请参考本文在前面提到的preflight例子。

Access-Control-Max-Age: <delta-seconds>

delta-seconds 参数表示preflight请求的结果在多少秒内有效。

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响应中时，它指定了实际的请求是否可以使用credentials。请注意：简单 GET 请求不会被预检；如果对此类请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页。

Access-Control-Allow-Credentials: true

Access-Control-Allow-Methods

Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。

Access-Control-Allow-Methods: <method>[, <method>]*

Access-Control-Allow-Headers

Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

Access-Control-Allow-Headers: <field-name>[, <field-name>]*

HTTP 请求首部字段

本节列出了可用于发起跨源请求的首部字段。请注意，这些首部字段无须手动设置。当开发者使用 XMLHttpRequest 对象发起跨源请求时，它们已经被设置就绪。

Origin

Origin 首部字段表明预检请求或实际请求的源站。

Origin: <origin>

origin 参数的值为源站 URI。它不包含任何路径信息，只是服务器名称。

Note: 有时候将该字段的值设置为空字符串是有用的，例如，当源站是一个 data URL 时。

注意，在所有访问控制请求（Access control request）中，Origin 首部字段总是被发送

Access-Control-Request-Method

Access-Control-Request-Method 首部字段用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。

Access-Control-Request-Method: <method>

Access-Control-Request-Headers

Access-Control-Request-Headers 首部字段用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。

Access-Control-Request-Headers: <field-name>[, <field-name>]*

本笔记中涉及到的服务端代码示例汇总

//1. 引入express
const express = require('express');

const bodyParser = require('body-parser');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    const name = request.query.name || 'world';
    response.send('HELLO, ' + request.query.name + '! AJAX - 2');
});

//可以接收任意类型的请求
app.all('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    // console.log(request.query);
    response.send('HELLO AJAX POST');
});

// 使用 body-parser 中间件来解析请求体
app.use(bodyParser.json());

// POST 请求处理函数
app.post('/api/data', (req, res) => {
    //设置响应头  设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    res.setHeader('Access-Control-Allow-Headers', '*');

    // 从请求体中获取 JSON 参数
    const data = req.body;

    // 打印 JSON 参数
    console.log(data);

    // 做出响应
    res.send('Got it!' + JSON.stringify(data));
});

//JSON 响应
app.all('/json-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'QiuYeDx'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//针对 IE 缓存
app.get('/ie', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO IE - 5');
});

//延时响应
app.all('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 1000)
});

//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    console.log(request.query);
    console.log(request.headers);
    const data = {
        name: '秋夜殿下'
    };
    response.send(`${data.name}, 您发送的信息 ${JSON.stringify(request.query)} 已经成功接收。`);
});

//axios 服务
app.all('/axios-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {
        name: '秋夜殿下'
    };
    response.send(JSON.stringify(data));
});

//fetch 服务
app.all('/fetch-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {
        name: 'fetch from qiuyedx~'
    };
    response.send(JSON.stringify(data));
});

//jsonp服务
app.all('/jsonp-server', (request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: 'jsonp~'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

//用户名检测是否存在
app.all('/check-username', (request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

//
app.all('/jquery-jsonp-server', (request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '秋夜殿下~',
        city: ['北京', '上海', '深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});

app.all('/cors-server', (request, response) => {
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

原生Ajax

xhr.send()与POST请求

客户端通过xhr.send()携带JSON参数发送POST请求

服务端通过req.body接受POST请求的JSON参数

可用req.query.XXX来获取GET URL中?XXX=ABC中的参数XXX

客户端代码示例

服务端代码示例

一些常见问题

需要注意防跨域的问题

解决ie缓存问题

请求超时与网络异常

取消请求

重复请求问题

三种常见的Ajax请求方式

1.jQuery发送AJAX请求

$.get()

$.post()

$.ajax()

2.Axios发送AJAX请求

axios.get()

axios.get()

axios({}) 【常用】

3.Fetch发送AJAX请求

跨域与解决

What, Why, How?

什么是跨越？

为什么会产生跨域请求？

什么是同源策略？

为什么浏览器要使用同源策略？

跨域的五个解决方式

jsonP

jsonP 是什么?

jsonP 怎么工作的？

jsonP的使用

jQuery发送jsonP请求

CORS

CORS是什么?

CORS是怎么工作的?

代码示例

HTTP 响应首部字段

Access-Control-Allow-Origin

Access-Control-Expose-Headers

Access-Control-Max-Age

Access-Control-Allow-Credentials

Access-Control-Allow-Methods

Access-Control-Allow-Headers

HTTP 请求首部字段

Origin

Access-Control-Request-Method

Access-Control-Request-Headers

本笔记中涉及到的服务端代码示例汇总

「React」Start with twin.macro

「微博客」探究Single-Page App和Regular Web App的区别与优劣

QiuYeDx

Comments NOTHING

取消回复