Ajax 的基本使用

👁 2021-02-19

了解Ajax的基本使用

本篇文章将会讲述有关Ajax的信息，最初了解http，XML，会通过express作为服务端编写小案例进行描述

1 什么是Ajax

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

1.1 Ajax特点

1.AJAX的优点
1)可以无需刷新页面而与服务器端进行通信。
2)允许你根据用户事件来更新部分页面内容。
2.AJAX的缺点
1)没有浏览历史，不能回退
2)存在跨域问题
3)SEO不友好

2 什么是XML

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

<note>
    <name>lx</name>
    <from>四川</from>
    <age>18</age>
</note>

现在基本上使用JSON了，用 JSON 表示：

{"name":"lx","from":"四川","age":18}

3 http

HTTP (hypertext transport protocol)协议『超文本传输协议』﹐协议详细规定了浏览器和万维网服务器之间互相通信的规则。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。服务端接收请求后响应。

3.1 HTTP消息结构

1.http消息结构分为客户端请求消息（请求报文），服务端响应消息（响应报文）
2.请求报文：
请求行：请求方式参数 http版本号
请求头

Host: baidu.com
Cookie: name=ll
Content-Type: application/x-www-form-urlencoded

空行
请求体：数据，类似 name=ll&age=18
3.响应报文：
响应行：http版本号状态码状态文本值
响应头：

Content-Type: text/html; charset=utf-8
Content-length:2048
Content-encoding: gzip

空行
响应体：数据

4 使用espress

在一个根目录下使用命令如下

npm init --yes
npm i express

新建一个test文件夹，文件夹下新建express，再创建express_use.js

//1.引入express
const express = require('express')

//2创建应用对象
const app = express()

//3 创建路由规则
app.get('/',(request,response)=>{
    //设置响应
    response.send("hello express")
})

//4监听端口启动服务
app.listen(8000,function(){
    console.log("服务已经启动，8000端口监听中,请访问 http://localhost:8000")
})

运行文件，直接在文件目录执行指令

node express_use.js

5 Ajax基本使用

1.ajax get请求
小案例，点击按钮从服务端请求数据，盒子显示服务端返回的数据

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax原生get请求</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            color: #fff;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <button id="btn">获取数据</button>
    <div class="box"></div>
    <script type="text/javascript">
        //获取btn
        var btn = document.getElementById('btn')
        var box = document.getElementsByClassName('box')[0]

        btn.onclick = function(){
            //创建xhr对象
            var xhr = new XMLHttpRequest()

            //初始化对象，设置请求的方式与url
            xhr.open('GET','http://127.0.0.1:8000/server')
            //设置参数
            //xhr.open('GET','http://127.0.0.1:8000/server?a=1&b=2&c=3')
            //发送
            xhr.send()
            //事件处理，处理服务端返回的数据
            /*readyState是xhr对象的属性，表示状态，0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
            1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。2: 表示 send()方法已经执行，并且头信息和状态码已经收到。3: 表示正在接收服务器传来的 body 部分的数据。4: 表示服务器数据已经完全接收，或者本次接收已经失败了*/
            xhr.onreadystatechange = function () { 
                //判断服务端返回所有的结果
                if(xhr.readyState == 4){
                    //判断响应状态码
                    if(xhr.status >= 200 && xhr.status < 300){
                        //成功
                        //处理结果 响应行，头，空行，体
                        console.log(xhr.status)  //状态码
                        console.log(xhr.statusText)  //状态字符串
                        console.log(xhr.getAllResponseHeaders())   //所有的响应头
                        console.log(xhr.response)   //响应体
                        box.innerHTML = xhr.response
                    }else {

                    }
                }
            }
        }
    </script>
</body>
</html>

服务端路由

//3 创建路由规则
app.get('/server',(request,response)=>{

    //设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    response.send("hello ajax")
})

2.ajax post请求

小案例，鼠标移动到盒子上面是请求数据并显示服务端返回的数据

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax原生post请求</title>
    <style>
        #box {
            width: 300px;
            height: 200px;
            background-color: yellow;
            color: #fff;
            margin-top: 20px;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">

        var box = document.getElementById('box')
        console.log(box)
        box.addEventListener('mouseover',function(){
            //创建xhr对象
            var xhr = new XMLHttpRequest()

            //初始化对象，设置请求的方式与url
            xhr.open('POST','http://127.0.0.1:8000/server')
            //设置请求头  Content-Type用来设置请求体内容数据类型
            //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            //自定义请求头
            //xhr.setRequestHeader('Name','lllxxx')  //服务端需要设置
            //发送
            xhr.send()
            //设置请求体数据
            //xhr.send('a=1&b=2&c=3')
            //事件处理，处理服务端返回的数据
            xhr.onreadystatechange = function () { 
                //判断服务端返回所有的结果
                if(xhr.readyState == 4){
                    //判断响应状态码
                    if(xhr.status >= 200 && xhr.status < 300){
                        //成功
                        box.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

服务端路由

//可以将post改为all，表示可以相应任何请求类型
app.post('/server',(request,response)=>{

    //设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //response.setHeader('Access-Control-Allow-Head','*')  //所有的请求头都可以接受
    //设置响应
    response.send("hello ajax post")
})

3.服务端响应json数据

前端代码

<body>
    <!-- 键盘按下字符，就响应事件 -->
    <div id="box"></div>
    <script>
        let box = document.getElementById('box')
        window.onkeyup = function(){
            let xhr = new XMLHttpRequest()
            //设置响应体类型
            xhr.responseType ='json'
            xhr.open('POST','http://127.0.0.1:8000/json-server')
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //手动转换
                        // let data = JSON.parse(xhr.response)
                        // console.log(data)
                        // box.innerHTML = data.name
                        console.log(xhr.response)
                        box.innerHTML = xhr.response.name
                    }
                }
            }
        }

        </script>
</body>

服务端路由

app.post('/json-server',(request,response)=>{

    //设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //response.setHeader('Access-Control-Allow-Head','*')  //所有的请求头都可以接受
    const data = {
        name:'lllxxx',
        age: 18
    }
    //设置响应
    response.send(JSON.stringify(data))
})

6 请求超时与网络异常处理

小案例，设置超时的秒数，当请求超过这个时间，就会调用超市回调函数
设置网络异常回调，在谷歌调试器中，在Network里面的online改为offline进行调试

前端代码

<body>
    <button id="btn">获取数据</button>
    <div id="box"></div>

    <script type="text/javascript">
        //获取btn
        var btn = document.getElementById('btn')
        var box = document.getElementById('box')

        btn.onclick = function(){
            //创建xhr对象
            var xhr = new XMLHttpRequest()
            //超时设置
            xhr.timeout =2000
            //超时回调
            xhr.ontimeout = function () { 
                alert("超时请求，请之后再尝试")
            }
            //网络异常设置
            xhr.onerror = function(){
                alert("你的网络异常，请稍后再尝试")
            }
            //初始化对象，设置请求的方式与url
            xhr.open('GET','http://127.0.0.1:8000/server-delay')
            //发送
            xhr.send()
            //事件处理，处理服务端返回的数据
            xhr.onreadystatechange = function () { 
                //判断服务端返回所有的结果
                if(xhr.readyState == 4){
                    //判断响应状态码
                    if(xhr.status >= 200 && xhr.status < 300){
                        box.innerHTML = xhr.response
                    }else {

                    }
                }
            }
        }
    </script>
</body>

后端路由

app.get(‘/server-delay’,(request,response)=>{

//设置响应头 允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应
setTimeout(function(){
    response.send("延迟响应")
},3000)

})

7 取消请求

小案例，页面设置两个按钮，分别实现发送请求与取消请求功能

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>
<body>
    <button id="btnSubmit">点击请求</button>
    <button id="cancel">点击取消</button>
    <script>
        let btnSubmit = document.getElementById('btnSubmit')
        let cancel = document.getElementById('cancel')
        let xhr = null
        btnSubmit.onclick = function(){
            xhr = new XMLHttpRequest()
            xhr.open('GET','http://127.0.0.1:8000/server-delay')
            xhr.send()
            xhr.onreadystatechange = function () { 
                //判断服务端返回所有的结果
                if(xhr.readyState == 4){

                    //判断响应状态码
                    if(xhr.status >= 200 && xhr.status < 300){
                    console.log(xhr.response)
                    }
                }
            }
        }
        cancel.onclick = function(){
            xhr.abort()
        }
    </script>
</body>
</html>

服务端路由

    app.get('/server-delay',(request,response)=>{

    //设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    setTimeout(function(){
        response.send("延迟响应")
    },3000)
})

8 解决重复发送请求问题

在实际场景中，可能会出现用户重复一直点击按钮发送请求的情况，这样就会对服务的造成较大的压力，为了避免这种情况，可以编写代码进行约束

<script>
        let btnSubmit = document.getElementById('btnSubmit')
        let cancel = document.getElementById('cancel')
        let xhr = null
        let isSending = false  //是否重复发送请求
        btnSubmit.onclick = function(){
            if(isSending){
                xhr.abort()  //如果一直重复发送请求，就取消请求
            }
            xhr = new XMLHttpRequest()
            isSending = true
            xhr.open('GET','http://127.0.0.1:8000/server-delay')
            xhr.send()
            xhr.onreadystatechange = function () { 
                //判断服务端返回所有的结果
                if(xhr.readyState == 4){
                    isSending = false
                    //判断响应状态码
                    if(xhr.status >= 200 && xhr.status < 300){
                    console.log(xhr.response)
                    }
                }
            }
        }
        cancel.onclick = function(){
            xhr.abort()
        }
    </script>

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/02/19/Ajax/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------