水里的游鱼是缄默沉静的，陆地上的兽类是喧哗的，空中的飞鸟是喧哗着的。人类却兼有海洋的缄默沉静、陆地的喧哗与天空的音乐。

——泰戈尔

佳

著

荐

AJAX技术

AJAX全称为Asynchronous Javascript And XML,即异步的JS和XML;通过AJAX可以在浏览器中向服务端发送异步请求，最大的优势就是：无刷新获取数据。

AJAX的特点

1

ajax

AJAX的优点与缺点

优点：

1、可以无需刷新页面而与服务器端进行通信。

2、允许你根据用户事件来更新部分页面内容。

缺点：

1、没有浏览历史，不能回退

2、存在跨域问题(同源策略)

3、SEO不友好

HTTP请求报文与响应报文结构

2

ajax

请求报文与响应报文

请求报文：

重点是格式与参数

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

头      Host: atguigu.com

Cookie: name=guigu

Content-type: application/x-www-form-urlencoded

User-Agent: chrome 83

空行

体      username=admin&password=admin

响应报文：

行      HTTP/1.1   200   OK

头      Content-Type: text/html;charset=utf-8

Content-length: 2048

Content-encoding: gzip

空行

体

尚硅谷

AJAX中的GET与POST请求

3

AJAX

GET&POST&请求头设置

GET请求

//创建ajax对象

Const xhr = new XMLHttpRequest();

//初始化，设置请求方法和url

Xhr.open(“GET”,”http://127.0.0.1/server?a=100&b=200&c=300”);

//发送请求

Xhr.send();

//时间绑定，处理服务端返回结果

Xhr.onreadystatechange=function(){

//判断服务端返回了所有的结果

If(xhr.readState==4){

//判断响应状态码

If(xhr.status>=200 && xhr.status <300){

Console,log(xhr.response);

}

}

}

POST请求

//创建ajax对象

Const xhr = new XMLHttpRequest();

//初始化，设置请求方法和url

Xhr.open(“GET”,”http://127.0.0.1/server”);

//发送请求

Xhr.send(“a=3&b=4”);

//时间绑定，处理服务端返回结果

Xhr.onreadystatechange=function(){

//判断服务端返回了所有的结果

If(xhr.readState==4){

//判断响应状态码

If(xhr.status>=200 && xhr.status <300){

Console,log(xhr.response);

}

}

}

请求头设置

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.setRequestHeader("name1","ddd");

自动重启工具nodemon

3

AJAX

nodemon

安装npm install -g nodemon

使用nodemon [your node app]

AJAX中的一系列问题

3

AJAX

iE缓存&超时&网络异常&取消请求&重复发送

Ie中ajax缓存问题解决

初始化对象时路径后面加上时间戳

xhr.open("POST","http://localhost:8000/ie?t="+Date.now());

Ajax请求超时(ontimeout)与网络异常(onerror)

xhr.timeout=2000;

//超时回调

xhr.ontimeout=function(){

alert("你的网络超时了")

}

//网络异常

xhr.οnerrοr=function(){

alert("你断网了")

}

Ajax取消请求

xhr.abort();//执行之后就会取消

Ajax请求重复发送问题

//获取所有button

const btns = document.querySelectorAll("button");

let x = null;

let isSending=false;//判断是否重复点击

btns[0].οnclick=function(){

//判断是否重新请求，是就取消掉

if(isSending) x.abort();

x = new XMLHttpRequest();

//初始化

isSending = true;

x.open("GET","http://localhost:8000/server");

//发送请求

x.send();

x.onreadystatechange=function(){

if(x.readyState === 4){ //判断是否成功发送请求，如果成功就将状态改为false

isSending = false;

}

}

}

//取消发送的请求

btns[1].οnclick=function(){

x.abort();//执行之后就会取消

}

Jqurey发送AJAX请求

3

AJAX

GET&POST&通用方式

$.get(“http://127.0.0.1/server”,{a:100,b:200},function(){

Console.log(data)

},”json”);

POST请求

$.post(“http://127.0.0.1/server”,{a:100,b:200},function(){

Console.log(data)

},”json”);

Jquery通用发送请求方式

$.ajax({

//url

Url:”http://127.0.0.1/server”,

//参数

Data:{a:100,b:200},

//请求类型

Type:”GET/POST”,

//响应体结果

dataType:”json”,

//成功的回调

Sucess:function(data){

Console.log(data);

}

//超时时间

Timeout:2000,

//失败的回调

Error:function(){

Console.log(“错误”)

},

//头信息

Headers:{

C:200,

D:400

}

})

Axios发送AJAX请求

3

AJAX

GET&POST&函数发送

GET请求

Axios.get(“/axios-server”,{

//url参数

Params:{

Id:200,

Vip:7

},

//请求头信息

Headers:{

Name:”mmm”,

Age:20

}

}).then(val =>{

Console.log(val)

})

POST请求

Axios.post(“/axios-server”,{

A:100,

B:200

},{

//url参数

Params:{

Id:200,

Vip:7

},

//请求头信息

Headers:{

Name:”mmm”,

Age:20

}

})

Axios函数发送ajax请求

Axios({

//请求方法

Method:”POST”,

//url

Url:”/axios-server”,

//url参数

Params:{

Vip:10,

Leavel:30

},

//头信息

Headers:{

A:100,

B:200

},

//请求体参数

Data:{

Username:”admin”,

Password:”admin”

}

}).then(response =>{

Console.log(response)

})

Fetch函数发送AJAX请求

3

AJAX

fetch函数

GET&POST请求

fetch(“http://127.0.0.1/fetch-server?vip=10”,{

//请求方法

Method:”GET/POST”,

//请求头

Headers:{

Name:”ad”,

},

//请求体

Body：”username=admin&password=admin”

}).then(response=>{

//如果返回结果是字符串

Return response.text();

//如果返回结果是json格式

Return response.json()

}).then(response=>{

Console.log(response)

})

AJAX中的跨域问题解决

3

AJAX

原生JsonP&Cors

原生jsonp(只支持get请求)

//创建script标签

Const script = document.createElement(“script”);

//设置标签的src属性

Script.src=”http://127.0.0.1:200/srrver”;

//将script插入文档中

Document.body.appendChild(script);

服务端返回函数体(js代码)才行，字符串不行

Cors

//服务端设置一个响应头,设置允许跨域

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

//服务端设置请求头 所有请求头都可以通过

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

有些书也许现在你读不懂，但你一定要去读它。时间会告诉你经典存在的意义。

——寄语

扫码关注我们公众号：健伟学习平台更多前端知识推荐给你