总结ajax

ajax

原生ajax使用

1. const xhr = new XMLHttpRequest();
2. xhr.open()：配置请求方法，请求路径，初始化
3. xhr.setRequestHeader()：设置请求头
4. xhr.send()：发送，里面可以传请求体，get没有请求体，post有请求体
5. xhr.onreadystatechange = function：事件绑定，处理返回结果，与点击等绑定事件有点不一样
6. xhr.readyState：ajax状态，0-4 ,4表示服务端返回了结果
7. xhr.status：响应状态码，200-299都是成功
8. xhr.statusText：状态字符串
9. xhr.response：响应体内容
10. xhr.responseType = ‘json’：设置响应体的数据类型
11. xhr.getAllResponseHeaders()：所有响应头
12. xhr.ontimeout=funciton(){};超时回调，处理响应超时
13. xhr.abort()：取消请求

jQuery的ajax使用

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

1. url:请求的 URL 地址。

2. data:请求携带的参数。

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

​ 写个参数data，该参数就是响应体

4. type(可选):设置返回内容格式，xml, html, script, json, text, _default

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

1. url:请求的 URL 地址。
2. data:请求携带的参数。
3. callback:载入成功时回调函数。
4. type(可选):设置返回内容格式，xml, html, script, json, text

$.ajax({})

里面的参数：url、data、type（请求类型）、dataType（设置返回值类型，可选）、success（值是一个回调函数）、timeout（超时时间，里面配置以毫秒为单位）、error（失败的回调）、headers（头信息的设置）

常用：url、data、type、success

处理响应体

$.getJSON()：将字符串化为js

Axios的ajax使用

1. 可以npm

   可以页面引用（script）

2. 与jquery的区别

   jquery的报文是用的回调函数，axios是基于promise

3. axios.get()

   一般传两个参数

   url路径、对象（对请求参数，请求头等配置）

4. axios.post()

   ​ 第一个路径

   ​ 第二个是对请求体的配置（对象形式）

   ​ 第三个是对象（对请求参数，请求头等配置）

5. axios({})

   ​ method：请求方法

   ​ url：url地址

   ​ params：url参数

   ​ headers：请求头信息

   ​ data：请求体参数

6. 通过then处理响应体

fetch的ajax使用

返回的是一个promise对象

语法：fetch（input[, init])

​ fetch接收两个参数

​ 第一个是url(还可以接收一个request对象，目前应该是实验阶段)

​ 第二个是一个可选的配置对象（method(请求方法)、headers、body（请求体））

​ 通过then处理响应体

ajax服务端知识

const express = require('express');
const app = express();
//request是对请求报文的封装
//response是对响应报文的封装
app.all('路径',(request,response)=>{})
app.listen(8000, ()=>{
    console.log("服务己经启动，8000端口监听...")
})

cors常用设置响应头

1. 设置响应头,第一个参数设置允许跨域，第二个参数设置允许的url

response.setHeader("Access-Control-Allow-Origin","*");

2. 设置响应头,允许被设置的响应头

response.setHeader("Access-Contorl-Allow-Headers","*");

3. 设置响应头,允许被请求的类型

response.setHeader("Access-Control-Allow-Method",'*');

ajax-json

json不用引入，可以直接使用

在实质工作中，我们发送请求，服务端响应结果，大多数都是以JSON格式的数据

JSON.stringify（data）：转化为字符串

JSON.parse()：转化为js代码

jsonp

前端

script.src = "http://localhost:3000/testAJAX?callback=abc";

function abc(data) {
alert(data.name);
};

服务端

var callback = req.query.callback;
res.send(callback+"("+JSON.stringify(obj)+")");

配合使用的

补

行：

请求：行 POST /s?ie=utf-8 HTTP/1.1

响应：行 HTTP/1.1 200 OK

ck = req.query.callback;
res.send(callback+“(”+JSON.stringify(obj)+“)”);

配合使用的



## 补

行：

请求：行    POST  /s?ie=utf-8  HTTP/1.1 

响应：行    HTTP/1.1  200  OK