什么是AJAX？如何实现AJAX异步请求？

ajax

全名 async javascript and XML(异步JavaScript和XML)

是前后台交互的能⼒也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

是⼀个默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

1.什么是同步请求？(false)

同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

2.什么是异步请求？(默认:true)

默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

3.ajax有什么优势

不需要插件的⽀持，原⽣ js 就可以使⽤
⽤户体验好（不需要刷新⻚⾯就可以更新数据）
减轻服务端和带宽的负担
缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到

4.ajax的运行流程

首先通过PHP页面将数据库中的数据取出取出后转成json格式的字符串，后利用ajax把字符串返还给前台再利用json.parse解析通过循环添加到页面上那么反之，前端的数据可以利用ajax提交到后台但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上最后再由PHP将数据插入到数据库中

HTTP

请求报文

行：POST / URL
头：Host:Cookie:Coutent-type:User-Agent:
空行
体：username=admin&password=admin

响应报文

行：HTTP/1.1
头：content-Type:COntent-length:Content-encoding:
空行
体：

express基本使用

/`/1.引入express
const express = require('express')//2.创建应用对象
const app = express()//3.创建路由规则
app.get('/',(request,response)=>{response.send('hello')
})//4.监听端口启动服务
app.listen(8080,()=>{console.log('服务已启动,8020端口监听中')
})`

请求响应

(要人为的在响应头里加属性：name)：

   <script>const result = document.getElementById('result')result.addEventListener("mouseover",function(){//创建对象const xhr = new XMLHttpRequest()//初始化xhr.open('POST','http:/127.0.0.1:8080/server')//设置请求头  设置类型：Content-Typexhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')// xhr.setRequestHeader('name','hello')//发送xhr.send('a=100')//事件绑定 处理服务端返回的结果//readystate 是xhr对象中的属性，表示状态01234xhr.onreadystatechange = function(){//判断响应状态码 200 404 403 401 500,2开头的都表示成功if(xhr.readyState === 4){//处理结果 行 头 空行 体if(xhr.status >=200 && xhr.status<300){result.innerHTML = xhr.response}}}})</script>//all表示可以接收所有类型的请求app.all('/server',(request,response)=>{//设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')//设置响应头，打开权限response.setHeader('Access-Control-Allow-Headers','*')response.send('Hadadad')})

json对象转化数据：

  1.手动转化：window.onkeydown = function(){const result = document.getElementById('result')const xhr = new XMLHttpRequest()xhr.open('get','http:/127.0.0.1:8080/server-json')xhr.send()xhr.onreadystatechange = function(){if(xhr.readyState ===4){if(xhr.status >=200 && xhr.status < 300){console.log(xhr.response)result.innerHTML = xhr.responselet data = JSON.parse(xhr.response)}}}}app.all('/server-json',(request,response)=>{//设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')//设置响应头response.setHeader('Access-Control-Allow-Headers','*')//响应数据const data ={name :'json2'}//对字符串进行转化let str = JSON.stringify(data)response.send(str)})2.自动转化：window.onkeydown = function(){const result = document.getElementById('result')const xhr = new XMLHttpRequest()//设置响应体数据的类型xhr.responseType = 'json'xhr.open('get','http:/127.0.0.1:8080/server-json')xhr.send()xhr.onreadystatechange = function(){if(xhr.readyState ===4){if(xhr.status >=200 && xhr.status < 300){console.log(xhr.response)console.log(xhr.response)result.innerHTML = xhr.response.name}}}}

插件

nodemon自动重启服务

npm install -g nodemon

如果出现：

 无法加载文件 D:\node\nodemon.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ nodemon server.js
+ ~~~~~~~+ CategoryInfo          : SecurityError: (:) []，PSSecurityException+ FullyQualifiedErrorId : UnauthorizedAccess

可以使用 npx nodemon xx.js

IE缓存问题

可以在open的url中加入时间戳：

xhr.open('get','http:/127.0.0.1:8080/server-json?t='+Date.now()')

请求超时

  //超时设置xhr.timeout = 2000//超时回调xhr.ontimeout = function(){alert('error')    }

网络异常

  //网络异常回调xhr.onerror = function(){alert('eee')}

手动取消ajax请求

<button>发送请求</button><button>取消请求</button>const btns = document.querySelectorAll('button')let x = nullbtns[0].onclick = function(){x = new XMLHttpRequest()x.open('get','http:127.0.0.1:8080/server-setTimeout')x.send()x.onreadystatechange = function(){if(x.readyState ===4){if(x.status>=200 && x.status<300){// alert(x.response)}}}}btns[1].onclick = function(){//中断请求x.abort()}

axios发送请求

    sendMes(){axios.get('http://127.0.0.1:8080/server-json').then(Response=>{this.$bus.$emit('demo',Response.data)},error=>{console.log('error')})}sendMes(){axios.get('http://127.0.0.1:8080/server-json',{//传入参数params:{a:1},//请求头信息headers:{name:'hello2'}}).then(Response=>{this.$bus.$emit('demo',Response.data)},error=>{console.log('error')})}

跨域

同源策略

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

    当满足同源策略的时候，可以简写url// x.open("get",'/data')x.open("get",'http:/127.0.0.1:9000/data')

jsonp服务

通过script进行跨域跳转

  在html中：用户名:<input type="text" id="username"><p></p><script>const input = document.querySelector('input')const p = document.querySelector('p')function demo(data){input.style.border= "solid 1px skyblue"p.innerHTML = data.msg}input.onblur = function(){let username = this.value//创建script标签const script = document.createElement('script')//设置标签的src属性script.src = 'http://127.0.0.1:8080/check-username'//将script插入到文档中document.body.appendChild(script)}</script>在js中：//jsonpapp.all('/check-username',(request,response)=>{const data ={exist:1,msg:'用户已存在'}let str = JSON.stringify(data)response.end(`demo(${str})`)})

HTTP访问控制

Access-Control-Allow-Credentials     适合post/get