Ajax基本应用

Ajax

ajax发送Get请求

搭建一个本地服务器

const express = require('express')
const { request } = require('http')
const app = express()
app.get('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('hello,express')
})
app.listen(8000,()=>{
    console.log('服务已经启动，8000端口监听中。。。')
})

发送get请求

<script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            //1,创建对象
            const xhr = new XMLHttpRequest()
            //2,初始化 设置请求方式和url
            xhr.open('GET','http://127.0.0.1:8000/server')
            //3,发送
            xhr.send()
            ///4,事件绑定，处理服务端返回的结果
            //readystate 是 xhr 对象中的属性，表示状态0 1 2 3 4
            xhr.onreadystatechange = function(){
                //判断（服务端返回了所有结果）
                if(xhr.readyState === 4){
                    //判断响应状态码 200 404 500
                    if(xhr.status>=200 && xhr.status<300){
                        //处理结果 行 头 空行 体
                        console.log(xhr.status)
                        console.log(xhr.statusText)
                        console.log(xhr.getAllResponseHeaders())
                        console.log(xhr.response)
                    }
                }
            }
        })
    </script>

ajax发送post请求

搭建一个服务器，注意post大小写

const express = require('express')
const { request } = require('http')
const app = express()

app.post('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('hello,post')
})


app.listen(8000,()=>{
    console.log('服务已经启动，8000端口监听中。。。')
})

使用post发送ajax请求

<script>
        const result = document.querySelector('div')
        result.addEventListener('mouseover',function(){
            // 1，创建对象
            const xhr = new XMLHttpRequest()
            // 2，初始化
            xhr.open('POST','http://127.0.0.1:8000/server')
            // 3，发送
            xhr.send()
            // 4，事件绑定
            xhr.onreadystatechange = function(){
                   // 判断
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr,status <300){
                    // 处理服务器返回结果
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>

post设置请求体信息

        xhr.send('a=100&b=200&c=3000')

post设置请求头信息，一般把用户的身份校验信息放在里面

xhr.open('POST','http://127.0.0.1:8000/server')
            // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded')
            xhr.setRequestHeader('name','nihao')

需要配置一下服务器

//可以接收任意类型的请求
app.all('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Allow-Headers','*')

    response.send('hello,post')
})

json数据响应

服务器搭建代码

app.all('/json-server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Allow-Headers','*')

    //响应一个数据
    const data = {
        name:'nihao'
    }
    //对对象进行字符串转换
    let str = JSON.stringify(data)
    response.send(str)
})

数据转换可以分为手动设置和自动转换两种方式

const result = document.querySelector('div')
        result.addEventListener('mouseover',function(){
            // 1，创建对象
            const xhr = new XMLHttpRequest()
            //设置响应体数据的类型
            xhr.responseType = 'json'
            // 2，初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            // 3，发送 & 设置请求体
            xhr.send()
            // 4，事件绑定
            xhr.onreadystatechange = function(){
                   // 判断
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr,status <300){
                    // 处理服务器返回结果
                        // result.innerHTML = xhr.response

                        //手动对数据转化
                        // let data = JSON.parse(xhr.response)
                        // console.log(data)

                        // 自动转换 在open（）函数前设置一个响应体数据的类型
                        result.innerHTML = xhr.response.name
                    }
                }
            }
        })

超时以网络异常

服务器用定时器设置3s的回调函数来设置响应，在ajax网络请求中超时设置为2s，这是点击按钮2s后会调用ontimeout回调函数，网络异常回调函数在断网时调用

app.get('/delay',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    setTimeout(()=>{
        response.send('延时响应')
    },3000)
})

        const btn = document.querySelector('button')
            const result = document.querySelector('#result')
            btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest()
            //超时设置 2s
            xhr.timeout = 2000
            //超时回调
            xhr.ontimeout = function(){
                alert('网络异常，请稍后重试')
            }
            //网络异常回调
            xhr.onerror = function(){
                alert('网络异常')
            }

            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status>=200 && xhr.status<300){
                        result.innerHTML = xhr.response
                    }
                }
            }
        })

重复发送请求

使用一个标识变量来对是否发送进行标识

    <script>
            const btn = document.querySelector('button')
            let x = null
            //标识变量
            let isSending = false //是否正在发送ajax请求

            btn.addEventListener('click',function(){
            //判断标识变量
            if(isSending) x.abort() //如果正在发送，则取消请求，创建一个新的请求
            x = new XMLHttpRequest()
            //修改 标识变量的值
            isSending = true
            x.open('GET','http://127.0.0.1:8000/delay')
            x.send()
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    isSending = false
                }
            }
        })
    </script>

同源策略

协议，域名，端口号 必须完全相同

cors实现跨域

直接在响应表头中设置

 response.setHeader('Access-Control-Allow-Origin','*')
//* 标识任何网站都可以
response.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
//指定某一网站实现跨域