AJAX：整理3：原生AJAX的相关操作

news2025/7/18 15:40:45

注意AJAX的步骤 

// 1.创建对象
const xhr = new XMLHttpRequest()

// 2.初始化 设置 请求方法 和 url
xhr.open("GET", "http://localhost:9090/server")

// 3.发送
xhr.send()

// 4.事件绑定 处理服务端返回的结果
// readyState 是xhr对象中的属性，表示状态 0 1 2 3 4  
// 0 表示初始值； 1 表示open()方法调用完毕；2 表示send()方法调用完毕；3 表示服务端返回了部分结果；4 表示服务端返回了所有的结果

// change 改变
xhr.onreadystatechange = function () { 
    // 判断状态码
    if (xhr.readyState === 4) {
        // 判断状态码
        if (xhr.status >= 200 && xhr.status < 300) {
          // 获取服务端返回的结果 (行 头 空行 响应体)
            console.log(xhr.status) // 响应行里面的响应状态码  200
            console.log(xhr.statusText) // 状态字符串  OK
            console.log(xhr.getAllResponseHeaders()) // 所有响应头

            console.log(xhr.response)  // 响应体
            const result = xhr.response 
         }
    }
 }

1. GET 请求

需求：向服务端发送get请求，拿到服务端返回的结果，并显示在div盒子中

（1）server.js

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

// 2. 创建服务器
const app = express()

// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response)  => {
    // 设置响应头  设置允许跨域  !!!
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应体
    response.send('HELLO AJAX GET')
})


// 4. 监听端口
app.listen(9090, () => {
    console.log("服务已启动， 9090端口监听中...")
})

（2）前端页面并渲染服务端返回的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax GET 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <button id="btn">点击发送请求</button>
    <div id="result">

    </div>

    <script>
        // 获取button元素
        const btn = document.querySelector("#btn")
        // 绑定事件
        btn.addEventListener("click", function () {
            // console.log("test")
            // 1.创建对象
            const xhr = new XMLHttpRequest()
            // 2.初始化 设置请求方法和url
            xhr.open("GET", "http://localhost:9090/server?a=100&b=30") // 携带参数
            // 3.发送
            xhr.send()
            // 4.事件绑定 处理服务端返回的结果
            // readyState 是xhr对象中的属性，表示状态 0 1 2 3 4
            // change 改变
            xhr.onreadystatechange = function () { 
                // 判断状态码
                if (xhr.readyState === 4) {
                    // 判断状态码
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 获取服务端返回的结果 (行 头 空行 响应体)
                        console.log(xhr.status) // 响应行里面的响应状态码 200
                        console.log(xhr.statusText) // 状态字符串  OK
                        console.log(xhr.getAllResponseHeaders()) // 所有响应头

                        console.log(xhr.response)
                        const result = xhr.response // 响应体


                        // 把结果放到div中
                        document.querySelector("#result").innerHTML = result
                    }
                }
            }
        })
    </script>
</body>
</html>

 

2. GET请求携带参数

3. POST请求 

当鼠标放在div盒子上时，向服务端发送post请求，将响应的结果在div中呈现

 （1）server.js

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

// 2. 创建服务器
const app = express()

// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.post('/server', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')

    // 设置响应体
    response.send('HELLO AJAX POST')
})

// 4. 监听端口
app.listen(9090, () => {
    console.log("服务已启动， 9090端口监听中...")
})

（2）前端页面并渲染数据到盒子中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div id="result">

    </div>

    <script>
        // 获取元素对象
        const result = document.querySelector('#result')

        // 绑定事件
        result.addEventListener('mouseover', function (){
            // console.log('鼠标移动')
            // 1. 创建对象
            const xhr = new XMLHttpRequest()
            // 2. 初始化 设置类型与URL
            xhr.open('POST', 'http://localhost:9090/server')

            // 3. 发送
            xhr.send()

            // 4. 事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 获取服务器响应的数据
                        const data = xhr.responseText

                        // 把数据渲染到页面
                        result.innerHTML = data
                        
                    }
                }
            }
        })
    </script>
</body>
</html>

4. POST请求中设置参数

 

 5.  AJAX设置请求头信息

 

但是如果自定义一个请求头呢，浏览器会有安全机制，不让发送

如果我们非要发的话，可以用以下的方法 

6. 服务端响应JSON数据

需求：当点击键盘时，会向服务端发送请求，服务端响应结果会在div盒子中呈现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>

</head>
<body>
    <div id="result">

    </div>
    <script>
        // 获取元素对象
        const result = document.querySelector('#result')

        window.onkeydown = function(e){
            // console.log(e.key, e.keyCode)
            // 1. 发送请求
            const xhr = new XMLHttpRequest()
            // 设置响应体类型
            // xhr.responseType = 'json'  // 可以自动转换

            // 2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://localhost:9090/server_json')

            // 3. 发送
            xhr.send()

            // 4.事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 获取服务器响应的数据
                        const data = xhr.response

                        result.innerHTML = data
                        console.log(data)
                    }
                }
            }


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

 

 1. 手动转换

2.自动转换

7. AJAX解决IE缓存问题

IE浏览器会对请求结果作一个缓存，这样就会导致一个问题，就是下一次再发送请求时，走的就是本地的缓存，而并不是服务器返回的最新数据

/* 针对IE缓存问题 */
app.all('/ie', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    // 设置响应体
    response.send("hello IE")
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result">

    </div>

    <script>
        // 获取元素
        const btn = document.getElementsByTagName('button')[0]
        const result = document.getElementById('result')
        btn.addEventListener("click", function() {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', 'http://localhost:9090/ie?t='+Date.now())  // 加个参数解决IE缓存问题
            xhr.send();
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

 

8. AJAX请求超时以及网络异常处理

1.请求超时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result">

    </div>

    <script>
        // 获取元素
        const btn = document.getElementsByTagName('button')[0]
        const result = document.getElementById('result')

        btn.addEventListener("click", function() {
            const xhr = new XMLHttpRequest()

            // 超时设置
            xhr.timeout = 2000
            // 超时回调
            xhr.ontimeout = function() {
                alert('网络异常，请稍后重试！')
            }

            xhr.open('GET', 'http://localhost:9090/delay')
            xhr.send()
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

 

 

 

 2. 网络异常

 

9. AJAX取消请求

 

 

10. AJAX解决请求重复发送问题

当请求响应比较慢的时候，用户就会疯狂地点击，这时候服务器就会接收到大量的相同请求，服务器压力比较大

所以我们需要保证始终只有一个请求在发送，这样服务器的压力就会小一些 

 

 

11. jQuery发送AJAX请求

首先需要引入jQuery资源

11.1 发送GET请求

app.get('/jquery', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    response.send("hello jQuery AJAX")
})

 

$("#btn1").click(function() {
   // 第一个参数是url, 第二个参数是发送的参数（对象的形式）, 第三个参数是回调函数
   $.get("http://localhost:9090/jquery", {a:100, b:200}, function(data, status) {
           console.log(data)
   })
})

 

 

11.2 发送POST请求

app.post('/jquery', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    response.send("hello jQuery AJAX POST")
})
$("#btn2").click(function() {
     $.post("http://localhost:9090/jquery", {a:100, b:200}, function(data, status) {
           console.log(data)
     })
})

POST请求携带的参数不会跟在url后面 

11.3  设置响应体的数据类型

/* jQuery服务 */
app.all('/jquery', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受
    const data = {name: "xiexu", age: 20}

    response.send(JSON.stringify(data))
})

服务端发送json格式的数据

 

 

11.4 jQuery通用方法发送AJAX请求

 

 

12. Axios发送AJAX请求

首先需要引入axios工具包 

 12.1 发送GET请求

app.get('/axios', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    response.send("hello Axios AJAX")
})

获取的数据是比较完整的

 

12.2 发送POST请求

 

/* axios 服务*/
app.all('/axios', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受

    response.send("hello Axios AJAX POST")
})

 

12.3 Axios通用方式发送AJAX请求

 

 

13. fetch() 函数发送AJAX请求 

/* fetch */
app.all('/fetch', (request, response)  => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')  // 所有类型的头信息都可以接受
    const data = {name: "x666", age: 20}

    // response.send("hello jQuery AJAX")
    response.send(JSON.stringify(data))
})

 

 

 

 14. 解决跨域问题

同源策略是最早由Netscape公司提出，是浏览器的一种安全策略

同源：协议、域名、端口号必须相同；  违背同源策略就是跨域

解决跨域的方法：

14.1 JSONP

JSONP是一个非官方的跨域解决方案，只支持get请求

（1）JSONP是怎么工作的？

在网页中，由一些标签天生具有跨域的能力，比如img、link、iframe、script，JSONP就是利用script标签的跨域能力来发送请求的

（2）JSONP实现原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonp解决跨域问题</title>
</head>
<body>
    <script src="http://localhost:9090/jsonp">
        
    </script>
</body>
</html>
app.all('/jsonp', (request, response)  => {
    response.send("hello jsonp")
})

 

 这个原因就是我正儿八经的script标签向你发送请求，你却返回一个字符串的形式，我们应该返回的是函数的调用，也就是js的代码，这样浏览器才能执行里面的内容

 

 

 

14.2 原生JSONP的实现

需求：有一个输入框，在里面输入用户名，输完之后，我会失去焦点，失去焦点的时候，就会向服务端发送请求，对用户名是否存在的检测，因为这边没有数据库，所以服务端直接返回一个已存在，结果回来之后了，我们作一个判断，再把input框的颜色变为红色

 

/* 用户名检测是否存在 */
app.all('/checkUserName', (request, response)  => {
    const data = {
        exists: 1,
        msg: "用户名已存在"
    }
    let str = JSON.stringify(data)

    response.send(`handle(${str})`)
})

 

 

14.3 jQuery发送JSONP请求

需求：点击按钮，向服务端发送请求，响应的结果再div盒子中呈现

 

 

 

14.4 设置CORS响应头实现跨域

（1）CORS是什么？

CORS(Cross-Origin Resource Sharing), 跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

（2）CORS是怎么工作的？

CORS通过设置一个响应头告诉浏览器，请允许跨域，浏览器收到该响应以后就会对响应放行

 

 

修改：添加响应头

 

 成功响应：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1345397.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

初识javaWeb

初识javaWeb

一、JavaWeb是什么&#xff1f; 1、概念 javaWeb指的是使用java语言进行互联网领域项目开发的技术栈——进行web项目开发所需的技术的集合。 -Web前端——在浏览器中用户可以看到的网页 -Web后端——为前端提供数据的程序 2、Web项目 java语言是可以进行多种类型的项目开发&a…
阅读更多...
如何处理并下载Sentinel-5数据

如何处理并下载Sentinel-5数据

SENTINEL-5是欧洲空间局&#xff08;European Space Agency&#xff0c;ESA&#xff09;Copernicus计划中的一颗地球观测卫星。SENTINEL-5的主要任务是监测大气成分&#xff0c;特别是臭氧、氮二氧化物、二氧化硫、甲烷和其他气体的分布。这些观测对于了解大气污染、气候变化和…
阅读更多...
再见2023，你好2024（附新年烟花python实现）

再见2023，你好2024（附新年烟花python实现）

亲爱的朋友们&#xff1a; 写点什么呢&#xff0c;我已经停更两个月了。2023年快结束了&#xff0c;时间真的过得好快&#xff0c;总要写点什么留下纪念吧。这一年伴随着许多挑战和机会&#xff0c;给了我无数的成长和体验。坦白说&#xff0c;有时候我觉得自己好像是在时间的…
阅读更多...
亚信安慧AntDB数据库引领数字时代通信创新

亚信安慧AntDB数据库引领数字时代通信创新

在数字经济与实体经济深度融合的时代&#xff0c;通信行业正迎来前所未有的新机遇。特别是在中国信通院的预测中&#xff0c;2027年5G专网市场规模预计将达到802亿元&#xff0c;呈现出显著的增长态势&#xff0c;年复合增长率高达42%。 亚信安慧AntDB数据库一直致力于紧跟科技…
阅读更多...
AppWeb认证绕过漏洞(CVE-2018-8715)

AppWeb认证绕过漏洞(CVE-2018-8715)

一、环境搭建 二、影响版本 三、构造payload Authorization: Digest usernameadmin 四、抓包获取sesion 五、修改数据包、认证头 记得设置用户名 六、漏洞存在特征&#xff08;Gigest&#xff09;
阅读更多...
实验九 基于FPGA的计数译码显示电路设计

实验九 基于FPGA的计数译码显示电路设计

基本任务一&#xff1a;利用FPGA硬件平台上的4位数码管做静态显示&#xff0c;用SW0-3输入BCD码&#xff0c;用SW4-7控制数码管位选 m100&#xff1a; frediv&#xff1a; decoder&#xff1a; 基本任务二&#xff1a;利用FPGA硬件平台上的4位数码管显示m10技术结果 扩展任…
阅读更多...
centos 7.9 升级系统默认的python2.7到python 2.7.18

centos 7.9 升级系统默认的python2.7到python 2.7.18

centos 7.9 升级系统默认的python2.7到python 2.7.18 备份旧版本 mv /usr/bin/python /usr/bin/python_2.7.5 下载新版本 Download Python | Python.org Python Release Python 2.7.18 | Python.org wget https://www.python.org/ftp/python/2.7.18/Python-2.7.18.tgz cd /…
阅读更多...
gitLab页面打tag操作步骤

gitLab页面打tag操作步骤

作者&#xff1a;moical 链接&#xff1a;gitLab页面打tag简单使用 - 掘金 (juejin.cn) 来源&#xff1a;稀土掘金 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 ---------------------------------------------------------------------…
阅读更多...
如何确定微服务项目中Spring Boot、Spring Cloud、Spring Cloud Alibaba三者之间的版本

如何确定微服务项目中Spring Boot、Spring Cloud、Spring Cloud Alibaba三者之间的版本

文章目录 1. 版本说明2. 版本依赖关系(推荐使用)3. 用脚手架快速生成微服务的pom.xml 本文描述如何确定微服务项目的Spring Boot、Spring Cloud、Spring Cloud Alibaba的版本。 1. 版本说明 我们知道Spring Boot、Spring Cloud、Spring Cloud Alibaba的版本选择一致性非常重要…
阅读更多...
【MySQL】事务Transaction

【MySQL】事务Transaction

1. 事务的概念 事务是什么 在业务逻辑中使用sql&#xff0c;面对一些较复杂的场景&#xff0c;是需要多个sql语句组合起来实现的。如&#xff1a;银行的转账业务&#xff0c;若客户A要转账100元给客户B&#xff0c;就要两条sql&#xff1a;A余额减100&#xff0c;B余额加100&a…
阅读更多...
TV端Web页面性能优化实践

TV端Web页面性能优化实践

01 背景 随着互联网技术的持续创新和电视行业的高速发展&#xff0c;通过电视观看在线视频已经逐渐成为大众的重要娱乐方式。奇异果App作为在TV设备上用户活跃度最高的应用之一&#xff0c;为广大用户提供了丰富的内容播放服务&#xff0c;除此之外&#xff0c;同样有会员运营、…
阅读更多...
K8S容器的一则故障记录

K8S容器的一则故障记录

一、故障现象 XXX反馈说某某业务服务异常&#xff0c;无法启动&#xff0c;需要进行协助排查。经常会接到这样一个需求&#xff0c;一开始无法清楚知道具体什么问题&#xff0c;需要跟一线运维人员详细做沟通&#xff0c;了解故障问题的细节。 根据一线运维人员的反馈&#xff…
阅读更多...
androidStudio 没有新建flutter工程的入口？

androidStudio 没有新建flutter工程的入口？

装了flutter dart 插件 执行了 flutter doctor 也执行了 flutter doctor --android-license 最后重启了 androidStudio 还是没发现在哪新建flutter项目工程 原来 plugins 下的 Android APK Support没有勾选
阅读更多...
Java多线程＜三＞常见的多线程设计模式

Java多线程＜三＞常见的多线程设计模式

多线程的设计模式 两阶段线程终止 park方法 interrupted() 会让他失效。 使用volatile关键字进行改写 单例模式 双锁检测 保护性暂停 实现1&#xff1a; package threadBase.model;/*** author: Zekun Fu* date: 2022/5/29 19:01* Description:* 保护性暂停&#xff0c;* …
阅读更多...
后端程序员React初接触1

后端程序员React初接触1

后端程序员React初接触 学习react基础与相关库的使用学习 包括react基础 路由 组件库等等 react是用于构建用户界面的JavaScript库 发送请求获取数据处理数据操作dom呈现页面&#xff08;react帮忙操作dom&#xff09; 数据渲染为视图 有facebook打造并开源 解决的问题 dom操…
阅读更多...
MFC 文档类

MFC 文档类

目录 文档类概述 文档类的使用 程序框架过程 LoadFrame执行分析 框架窗口 WM_CREATE 消息处理 视图窗口 WM_CREATE 消息处理 对象关系图 窗口切分 命令消息处理顺序 文档类和视图类关系 文档类概述 相关类CDocument&#xff0c;作用&#xff1a;提供了一个用于管理数…
阅读更多...
RuntimeError: The NVIDIA driver on your system is too old.

RuntimeError: The NVIDIA driver on your system is too old.

【报错】使用 AutoDL 复现实验时遇到 RuntimeError: The NVIDIA driver on your system is too old (found version 11070). Please update your GPU driver by downloading and installing a new version from the URL: http://www.nvidia.com/Download/index.aspx Alternativ…
阅读更多...
go module本地包导入

go module本地包导入

go module本地包导入 本文目录 go module本地包导入启用go mod主项目工作目录本地module目录发布和使用模块 golang 1.11之后加入了go mod来替代GOPATH 官方文档参考&#xff1a;https://golang.google.cn/doc/tutorial/call-module-code 启用go mod 开启 Go modules # 临时开…
阅读更多...
AI绘画工具Midjourney绘画提示词Prompt分享

AI绘画工具Midjourney绘画提示词Prompt分享

一、Midjourney绘画工具 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭…
阅读更多...
Go语言中的性能考虑和优化

Go语言中的性能考虑和优化

优化您的Go代码以达到最佳性能 性能优化是软件开发的关键方面&#xff0c;无论您使用哪种编程语言。在这篇文章中&#xff0c;我们将探讨Go语言中的性能考虑和优化&#xff0c;Go是一种以其效率而著称的静态类型和编译语言。我们将深入探讨三个关键领域&#xff1a;分析并发代…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023