什么是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-Type
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            // xhr.setRequestHeader('name','hello')
            //发送
            xhr.send('a=100')
            //事件绑定 处理服务端返回的结果
            //readystate 是xhr对象中的属性，表示状态01234
            xhr.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.response
                            let 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 = null
    
            btns[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中：
        //jsonp
    app.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