当前位置：
  1. 首页
  2. ajax
  3. 正文
本文介绍: （一）原生AJAX1.AJAX简介Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），通过ajax可以在浏览器中向服务器发送异步请求，无刷新获取数据。ajax不是新编程语言，而是将现有标准组合在一起使用的新方式。2.XML简介XML是可扩展标记语言，用于传输和存储数据，与HTMl类似，不同的是XML全是自定义标签用来表示一些数据。现已不使用。

目录

（一）原生AJAX

1.AJAX简介

2.XML简介

3.AJAX特点

（1）优点

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），通过ajax可以在浏览器中向服务器发送异步请求，无刷新获取数据。ajax不是新编程语言，而是将现有标准组合在一起使用的新方式。

XML是可扩展标记语言，用于传输和存储数据，与HTMl类似，不同的是XML全是自定义标签用来表示一些数据。（现已不使用）

1.无需刷新页面与服务器进行通信

2.允许根据用户事件来更新部分页面内容

1.没有浏览历史，不能回退

2.存在跨域问题（同源）

3.对SEO不友好（搜索引擎优化），采用ajax异步请求，源代码初始状态下这些内容在页面中不能查找到

http（超文本传输协议），详细规定了浏览器和万维网服务器之间互相通信的规则

请求行：

        1、请求类型：GET/POST等

        2、url路径：路径/对应的查询字符串

        3、HTTP协议版本：HTTP/1.1等

请求头：

        1、Host:baidu.com

        2、Cookie:name=baidu

        3、Content-Type(告知服务器请求体的类型)：application/x–www–form–urlencoded

        4、user-Agent:Chrome 83

空行

请求体:

        GET请求类型没有请求体；

        POST：username=admin&password=admin

响应行：

        1、HTTP协议版本：HTTP/1.1等

        2、响应状态码status：200(正确运行)、404(找不到)、405(被禁止)、500(内部错误)等

        3、响应字符串statusText：与status对应，无需单独设置。200：OK

响应头：  

        1、Content-Type

        2、Content-Length

        3、Content-Encoding

空行

响应体：主要返回结果

网页检查->Network->Headers->response header，request header，response

安装nodejs，配置nodejs环境（没配置好会出现超多问题）

下载express：在终端输入 npm install express -g

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

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

// 3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/', (request, response) => {
    // 设置响应
    response.send('hello express!')
})

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

在终端输入：node 要运行的js文件（使用tab快捷键直接输入文件名）

直接删除终端或者Ctrl+c释放终端

作用：一旦文件发生变化，就自动重启进程

在终端输入：npm install -g nodemon即可

运行js文件：nodemon 文件名

若出现报错：无法加载文件,因为在此系统上禁止运行脚本，处理方法：在电脑终端power shell管理员模式中，将执行策略改为RemoteSigned，即输入：set-ExecutionPolicy RemoteSigned

实现点击按钮，发送请求，将响应体写到按钮下的div内

（1）get.html文件

<style>
        .receive {
            height: 100px;
            width: 200px;
            border: 2px solid pink;
        }
    </style>
</head>

<body>
    <button>发送请求</button>
    <div class="receive">接收请求</div>

    <script>
        const btn = document.querySelector('button')
        const receive = document.querySelector('.receive')
        // 添加事件：点击按钮发送请求
        btn.addEventListener('click', function () {
            // 1. 创建请求对象
            const xhr = new XMLHttpRequest()
            // 2. 初始化 设置请求方法和url   在server.js中设置get路径为/server则此处url也一定要写
            xhr.open('GET', 'http://127.0.0.1:8000/server')
            // 3. 发送ajax请求
            xhr.send()
            // 4. 事件绑定 每次readystate状态改变时触发该事件 处理服务器返回的结果
            // readystate是xhr对象中的属性，表示状态 0:未初始化 1：open方法调用完毕 2：send方法调用完毕 3：服务器返回部分结果 4：服务器返回全部结果
            // change 改变的时候触发
            xhr.onreadystatechange = function () {
                // 当服务器返回全部结果时
                if (xhr.readyState === 4) {
                    // 判断响应状态码 2xx为成功
                    if (xhr.status >= 200 &amp;&amp; xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                        // 响应状态码
                        console.log(xhr.status)
                        // 状态字符串
                        console.log(xhr.statusText)
                        // 2.所有的响应头
                        console.log(xhr.getAllResponseHeaders())
                        // 3.响应体
                        console.log((xhr.response))

                        // 将响应体写入div中
                        receive.innerHTML = xhr.response

                    } else {

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

（2）server.js文件

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

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

// 3. 创建路由规则
// '/server'如果是url的路径，则会执行回调函数的内容
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应
    response.send('hello ajax!')
})

// 4. 监听装口启动服务  Ctrl+c停止终端服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口正在监听中...')
})

（3）点击发送请求报文后响应报文内容为：

 （4）结果：

 （5）编写过程中出现的错误

        1、未开启服务端进行请求报文发送，显示send()错误

        2、响应头路径设置为/server，则访问http://127.0.0.1:8000/server，不写/server会导致页面Error：Cannot_get

        3、出现问题：

 解决办法：添加了一个favicon.ico文件

用？分隔路径和参数，参数之间用&amp;分隔,=赋值

如：http://127.0.0.1:8000/server?a=1&amp;b=2%c=3

 

 

实现鼠标移入div中发送请求，将响应体写到div内

（1）post.html文件

<style>
    #result {
        width: 200px;
        height: 100px;
        border: 2px solid pink;
    }
</style>

<body>
    <div id="result"></div>
    <script>
        // post请求 实现鼠标移到div上 请求ajax将响应体写入到div内
        const result = document.querySelector('#result')
        // 添加鼠标放入事件 执行ajax请求
        result.addEventListener('mouseenter', function () {
            // 1. 创建对象
            const xhr = new XMLHttpRequest()
            // 2. 初始化 请求类型和url
            xhr.open('POST', 'http://127.0.0.1:8000/server')
            // 3. 发送 设置请求体
            xhr.send('a=7&amp;b=8')
            // xhr.send('123')
            // 4. 事件绑定
            xhr.onreadystatechange = function () {
                // 服务器返回全部结果时
                if (xhr.readyState === 4) {
                    // 响应状态码正常时
                    if (xhr.status >= 200 &amp;&amp; xhr.status < 300) {
                        result.innerHTML = xhr.response
                    } else {
                        alert('请求失败！')
                    }
                }
            }
        })
    </script>

（2）server.js文件中添加post响应路由规则

// post路由规则
app.post('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应
    response.send('hello ajax post!')
})

（3）结果

        

       xhr.send(‘数据内容等’)

// 3. 发送 设置请求体
xhr.send('a=7&amp;b=8')
// xhr.send('123')

        1、设置请求头信息（要放在xhr.open()和xhr.send()之间）

// 3.设置请求头信息 头名字+值
// 设置请求体类型：参数查询字符串的类型（固定写法）
xhr.setRequestHeader('Content-Type', 'application-x-www-form-urlencoded')

        2、自定义请求头

// 自定义请求头类型
xhr.setRequestHeader('Name', 'goudan')

         （1）设置all路由规则（2）设置setHeader允许所有类型的请求头

// all路由规则 可以接收任意类型的请求
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应头 允许任意类型的请求头
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置响应
    response.send('hello ajax post!')
})

        3、查看

        

 

        按下Enter键发送请求，将响应体输出到div中，实现将复杂数据类型通过JSON转换为字符串send响应，再转换为原来的类型

        json响应.html

<style>
    #result {
        width: 200px;
        height: 100px;
        border: 2px solid skyblue;
    }
</style>

<body>
    <div id="result"></div>
    <script>
        // 按下enter键发送请求，将响应体写入到div中
        const result = document.querySelector('#result')
        // 添加键盘按起事件
        window.addEventListener('keydown', function (e) {
            // 按下enter键
            if (e.key === 'Enter') {
                // 1.创建对象
                const xhr = new XMLHttpRequest()
                // 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 &amp;&amp; xhr.status < 300) {
                            // 手动JSON转换
                            result.innerHTML = (`姓名：${JSON.parse(xhr.response).name} 
                                年龄：${JSON.parse(xhr.response).age}`)
                        }
                    }
                }
            }
        })
    </script>

        server.js

// json-server get路由规则 用于响应JSON数据
app.get('/json-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    const data = {
        name: 'goudan',
        age: 18
    }
    // 设置响应 传输对象数据
    let str = JSON.stringify(data)
    response.send(str)
})

        结果

        

 （2）手动JSON转换

        let string = JSON.stringify(复杂数据类型)

        let obj = JSON.parse(string)

（3）自动JSON转换

        xhr.responseType = ‘json‘;     得到数据后操作更加便捷

// 设置响应体的数据类型
xhr.responseType = 'json'
...
// 4.服务器响应事件
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 &amp;& xhr.status < 300) {
        // 手动JSON转换
        // result.innerHTML = (`姓名：${JSON.parse(xhr.response).name} 年龄：${JSON.parse(xhr.response).age}`)
        result.innerHTML = (`姓名：${xhr.response.name} 年龄：${xhr.response.age}`)
        }
    }
}

（1）给服务端响应添加一个3s的延时响应

// get路由规则 delay延迟响应
app.get('/delay', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置延迟响应 3s后响应
    setTimeout(() => {
        response.send("我delay了3s")
    }, 3000)
})

 延时3s响应

 

 （2）发送请求时，设置超时xhr.timeout和超时回调xhr.ontimeout

// 超时设置 2s后服务端不响应则取消发送请求
xhr.timeout = 2000;
// 超时回调 超时触发事件
xhr.ontimeout = function () {
    alert('超时了取消请求了')
}

 （3）发送请求时，设置网络异常回调xhr.onerror

//  网络异常回调 触发事件
xhr.onerror = function () {
    alert('网络状况异常 请检查网络设置')
}

（1）服务端添加取消请求的路由端口

// get路由规则 cancel取消响应
app.get('/cancel', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置延迟响应 3s后响应
    setTimeout(() => {
        response.send("我delay了3s")
    }, 3000)
})

（2）点击取消按钮 xhr.abort()取消请求 

        注意：因为在两个按钮点击事件内xhr作用域不同，点击发送请求事件的xhr和取消事件的xhr不同，故将xhr设置为全局变量，let xhr = null

    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 2px solid pink;
        }
    </style>
</head>

<body>
    <button id="btn1">点击发送请求</button>
    <button id="btn2">点击取消请求</button>
    <div id="result"></div>
    <script>
        // 点击btn1发送请求 btn2取消发送请求
        const btn1 = document.querySelector('#btn1')
        const btn2 = document.querySelector('#btn2')
        const result = document.querySelector('#result')
        // 将xhr设置为全局变量 这样才能同时作用到两个按钮的点击事件
        let xhr = null
        // 点击按钮发送请求
        btn1.addEventListener('click', function () {
            // 创建对象
            xhr = new XMLHttpRequest()
            // 初始化
            xhr.open('GET', 'http://127.0.0.1:8000/cancel')
            // 发送
            xhr.send()
            // 添加服务端readyState属性改变事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
        // 点击取消按钮
        btn2.addEventListener('click', function () {
            xhr.abort()
        })

    </script>

短时间内多次点击重复的请求可能会导致服务器压力过大

解决办法：设立一个标志查看请求是否响应完毕，没有则取消这个请求，创建一个新的请求

<body>
    <button id="btn1">点击发送请求</button>
    <button id="btn2">点击取消请求</button>
    <script>
        // 点击btn1发送请求 btn2取消发送请求
        const btn1 = document.querySelector('#btn1')
        const btn2 = document.querySelector('#btn2')
        // 将xhr设置为全局变量 这样才能同时作用到两个按钮的点击事件
        let xhr = null
        // 建立标志初始化 是否发送请求成功
        let isSending = false
        // 点击按钮发送请求
        btn1.addEventListener('click', function () {
            // 如果正在有请求发送 则取消该请求
            if (isSending) {
                xhr.abort()
            }
            // 创建对象
            xhr = new XMLHttpRequest()
            // 修改标志 表示正在发送中
            isSending = true
            // 初始化
            xhr.open('GET', 'http://127.0.0.1:8000/cancel')
            // 发送
            xhr.send()
            // 添加服务端readyState属性改变事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    // 请求完毕 修改标志
                    isSending = false
                }
            }
        })
        // 点击取消按钮
        btn2.addEventListener('click', function () {
            xhr.abort()
        })

    </script>
</body>

开始学前端这么多天了，终于写了一篇超长博客！也不是全部自己写的，参考了大佬的思路，学了尚硅谷的ajax课，还有一半！快点看完啊啊啊 

显示所有内容
上一篇 ajax–XML、AJAX简介、express框架使用、AJAX操作的基本步骤
下一篇 vue中如何更改el-upload中的文件名name跟type , 改变后缀为webp让图片更小

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。