AJAX

原生AJAX

1.1AJAX简介

AJAX全程为Asynchronous JavaScript And XML，就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2XML简介

XML可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来标傲世一些数据。

 	John 	18  

现在已经被JSON取代了。

{"name":"John","age":18} 

1.3AJAX的特点

1.3.1AJAX的优点

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

1.3.2AJAX的缺点

1）没有浏览历史，不能回退
2）存在跨域问题（同源）
3）SEO不友好（网页内容无法爬虫）

1.4HTTP

HTTP（hypertext transport protocol)协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

1.4.1请求报文

重点是格式和参数

行	GET  /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 

1.4.2响应报文

行	HTTP/1.1  200  OK 头	Content-Type: text/html;charset=utf-8 	 Content-length: 2048 	 Content-encoding: gzip 空行 体	 		 		 		 			
HHHHello
 		 	 

注：

发送GET请求：在页面检查里面打开网络，刷新页面，发出请求、接收响应，打开最上面的请求，Header中有Response Headers和Request Headers，还有Query String Parameters。Query String Parameters中是对请求的url中的内容做的解析结果，Request Headers中是请求行和请求头的位置，Response Headers是响应行和响应头，点击Response是响应体。

发送POST请求：Headers中的Query String Parameters，会变成其他的。

xhr是XMLHttpRequest的首字母，在网页检查的网络中的XHR是对AJAX请求的筛选。

AJAX发送GET请求在url中携带参数，先用问号分割，然后直接写，用&连接

http:127.0.0.1:8080/server?a=100&b=200&c=300 

AJAX发送GET请求在xhr.send()中携带参数

//3.发送 xhr.send('a=100&b=200&c=300'); xhr.send('a:100&b:200&c:300'); xhr.send('1231212313'); 

AJAX发送GET请求

                             点击发送请求     
         

AJAX发送POST请求

对应的后端server.js

const express=require('express')  //创建应用对象 const app=express()  //创建路由规则 //req是对请求报文的封装 //res是对响应报文的封装 app.get('/server',(req,res)=>{     //设置响应头,设置允许跨域     res.setHeader('Access-Control-Allow-Origin','*');     //设置响应体     res.send('ok'); })  app.post('/server',(req,res)=>{     //设置响应头,设置允许跨域     res.setHeader('Access-Control-Allow-Origin','*');     //设置响应体     res.send('okkkk'); })  //监听端口启动服务 app.listen(8000,()=>{     console.log("服务已经启动，8000端口启动中。。。") }) 

自定义请求头

//自定义请求头，需要在后端设置好，否则会报错 xhr.setRequestHeader('name','hhhhhh') 

对应的后端设置

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

首先res.setHeader(‘Access-Control-Allow-Headers’,‘*’);设置接收所有响应头，接着app.all，表示接收任意类型的请求，因为会传回options类型的请求，无法得到回应，所以改成all接收。

服务端响应JSON数据

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

响应体中只能是字符串或buffer，所以要转换类型。
客户端接收到的是字符串，可以转换为JSON对象，有两种方式，一种是自动转换，一种是手动转换。
手动转换：

const data=JSON.parse(xhr.response) result.innerHTML=data.name; 

自动转换：

 //设置响应体数的类型 xhr.responseType='json'; result.innerHTML=xhr.response.name;