1.①AJAX简介（XMLHttpRequest）②解析json数据③解构赋值④请求异常与超时的处理⑤避免用户多次重复发送请求（前几次取消，只留最后一次）

已于 2022-04-05 19:33:51 修改
阅读量325 收藏 1
点赞数
分类专栏： ajax\promise\axios 文章标签： ajax jquery html
于 2021-09-20 22:11:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lazylYYY/article/details/120355755
版权

目录

一：AJAX简介

二:优点

1.页面无刷新获取数据：比如鼠标移动到充话费自动出div框

2.允许根据用户的事件更新部分页面内容(同上图)

三:缺点

四:   AJAX核心对象是   XMLHttpRequest

五：搭建测试ajax请求服务器

1.首先在终端输入两条语句：yarnpkg init 👉 yarnpkg add express

2.创建一个server.js和一个1.体验.html

3.终端执行

4.ctrl+鼠标左键点击链接

5.出现

 6.点击按钮

7.注意：xhr内部有5种状态，我们只需了解即可

8.http网页状态码

六：   AJAX解析json数据

七：延伸解构赋值

1.标准的解构赋值

2.react里面的连续解构赋值

延伸给c重命名为aaa

八：请求异常与超时的处理

1.系统主动设置：

2.给用户一个按钮，让用户主动取消请求

九：避免用户多次重复发送请求（前几次取消，只留最后一次）

十：XMLHttpRequest实例化对象的API

一：AJAX简介

二:优点

1.页面无刷新获取数据：比如鼠标移动到充话费自动出div框

 又比如：刷今日头条新闻，每向下一点都会刷出一条新新闻

2.不需要刷新页面就能实现的异步局部更新

三:缺点

1.没有浏览历史,不能回退(因为是无刷新获取数据)

正常有: ,AJAX没有

2.存在跨域问题

3.SEO(搜索引擎优化)不友好(爬虫爬不到)

四:   AJAX核心对象是   XMLHttpRequest

五：搭建测试ajax请求服务器

1.首先在终端输入两条语句：yarnpkg init 👉 yarnpkg add express

2.创建一个server.js和一个1.体验.html

// 1.引入express
const express = require('express')
// 2.创建一个app实例对象
const app = express()
// 3.绑定监听
app.listen(8866, (err) => {
    // 函数体
    if (!err) {
        console.log('测试ajax请求的服务器开启成功!测试地址如下')
        console.log('http://127.0.0.1:8866/1.体验.html')
    }
})
// 4.配一个路由
app.get('/test_get', (request, response) => {
    // 如果点击按钮终端输出：
    console.log('有人发送请求了')
    response.send('hello_test_get!!')
})
// 5.暴露静态资源
app.use(express.static(__dirname + '/web'))


    <style>
        #cont {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin-top: 20px;
        }
    </style>
<body>
    <!-- 点击按钮 无刷新无抖动跳转 -->
    <!-- 1.测试ajax基本使用 -->
    <button id='btn'>点我发送(用原生js发送ajax里的get请求)</button>
    <div id="cont"></div>
    <script>
        let btn = document.getElementById('btn')
        let cont = document.getElementById('cont')

        btn.onclick = () => {
            // 发送ajax请求
            // 一：创建 xhr 实例对象
            const xhr = new XMLHttpRequest()
            console.log(xhr.readyState)        //0
            // 二：指定发送请求的method和url
            xhr.open('GET', 'http://127.0.0.1:8866/test_get')
            // 三：发送请求
            xhr.send()
            // 四：绑定监听：当状态改变时
            // xhr内部有5种状态，值分别为0、1、2、3、4
            // 0：实例出来的那一刻            4：数据接收完毕
            // xhr内部有5种状态，值分别为0、1、2、3、4
            /*        0：初始状态：实例出来的那一刻  
                      1：open已经调用了，但是send还没有调用，此时可以修改请求头内容
                      2：send已经调用了，已经无法修改请求头
                      3：已经回来一部分数据了，小的数据会在此阶段一次性接收完毕，较大的数据有待进一步接收
                      4：数据接收完毕
            */
            xhr.onreadystatechange = () => {
                // console.log(xhr.readyState)   //五个状态，连续输出4次
                if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status <= 300)) {  //状态码
                    console.log(xhr.response)  //hello_test_get!!
                    cont.innerHTML = `<h3>${xhr.response}</h3>`
                }
            }

        }
    </script>
</body>

3.终端执行

4.ctrl+鼠标左键点击链接

5.出现

 6.点击按钮

并且终端

7.注意：xhr内部有5种状态，我们只需了解即可

①open已经调用了，但是send还没有调用，此时可以修改请求头内容

②send已经调用了，已经无法修改请求头

③已经回来一 部分数据了，小的数据会在此阶段一次性接收完毕，较大的数据有待进一步接收                     

④数据接收完毕

8.http网页状态码

200：成功

3  ：缓存

4   ：404没有  401权限不够

5   ：服务器出错

六：   AJAX解析json数据

server.js

// 1.引入express
const express = require('express')
// 2.创建一个app实例对象
const app = express()
// 3.绑定监听
app.listen(8866, (err) => {
    // 函数体
    if (!err) {
        console.log('测试ajax请求的服务器开启成功!测试地址如下')
        console.log('http://127.0.0.1:8866/1.体验.html')
        // 给3.ajax解析json数据.html 用
        console.log('http://127.0.0.1:8866/3.ajax解析json数据.html')
    }
})
// 4.配一个路由，响应GET请求
// ①演示1.体验.html
app.get('/test_get', (request, response) => {
    // 如果点击按钮终端输出：
    console.log('有人发送请求了')
    response.send('hello_test_get!!')
})
// ②演示ajax解析json字符串
app.get('/get_person', (request, response) => {
    console.log('有人请求get_person了')
    const person = { name: '熊大', age: 18, sex: '男' }
    response.send(JSON.stringify(person))
})

// 5.暴露静态资源
app.use(express.static(__dirname + '/web'))


<style>
        #cont {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin-top: 20px;
        }
</style>
<body>
    <!-- 点击按钮 无刷新无抖动跳转 -->
    <!-- 1.测试ajax基本使用 -->
    <button id='btn'>点我发送(用原生js发送ajax里的get请求)</button>
    <div id="cont"></div>
    <script>
        let btn = document.getElementById('btn')
        let cont = document.getElementById('cont')

        btn.onclick = () => {
            // 发送ajax请求
            // 一：创建 xhr 实例对象
            const xhr = new XMLHttpRequest()
            console.log(xhr.readyState)        //0
            // 二：指定发送请求的method和url
            xhr.open('GET', 'http://127.0.0.1:8866/get_person')
            // 三：发送请求
            xhr.send()

            // 四：绑定监听：当状态改变时
            // xhr内部有5种状态，值分别为0、1、2、3、4
            // 0：实例出来的那一刻            4：数据接收完毕
            // xhr内部有5种状态，值分别为0、1、2、3、4
            /*        0：初始状态：实例出来的那一刻  
                      1：open已经调用了，但是send还没有调用，此时可以修改请求头内容
                      2：send已经调用了，已经无法修改请求头
                      3：已经回来一部分数据了，小的数据会在此阶段一次性接收完毕，较大的数据有待进一步接收
                      4：数据接收完毕
            */
            // responseType 指定返回数据的格式：自动解析JSON字符串,在open后面写，和下面的③一起使用
            xhr.responseType = 'json'
            xhr.onreadystatechange = () => {
                // console.log(xhr.readyState)   //五个状态，连续输出4次
                if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status <= 300)) {  //状态码
                    // // ①手动解析JSON字符串，
                    // const Obj = JSON.parse(xhr.response)
                    // console.log(Obj)  //hello_test_get!!
                    // cont.innerHTML = `<h3>${xhr.response}</h3>`

                    // ②对象的解构：
                    // const { name, age, sex } = JSON.parse(xhr.response)
                    // cont.innerHTML = (`
                    //     <ul>
                    //         <li>姓名：${name}</li>
                    //         <li>年龄：${age}</li>
                    //         <li>性别：${sex}</li>
                    //     </ul>`)

                    // // ③自动解析json在open后
                    console.log(xhr.response)//直接就是对象形式的了
                }
            }
        }
    </script>
</body>

七：延伸解构赋值

上面第六条html代码里有对象的解构赋值，下面介绍标准的解构赋值和react里面的连续解构赋值

1.标准的解构赋值

        let obj = { a: 1, b: { c: 5 } }
        let { c } = obj.b
        console.log(c)  //5

2.react里面的连续解构赋值

        let obj = { a: 1, b: { c: 5 } }
        let { b: { c } } = obj
        console.log(c)       //5

延伸给c重命名为aaa

        let obj = { a: 1, b: { c: 5 } }
        let { b: { c: aaa } } = obj
        console.log(aaa)     //5

八：请求异常与超时的处理

1.系统主动设置：

2.给用户一个按钮，让用户主动取消请求

 

九：避免用户多次重复发送请求（前几次取消，只留最后一次）

十：XMLHttpRequest实例化对象的API

 const xhr = new XMLHttpRequest()  //创建 xhr 实例对象

为jquery的ajax请求添加超时timeout时间的操作方法
10-18
当客户端向服务器发送Ajax请求时，如果服务器没有在合理的时间内响应，就会造成用户界面的卡顿，甚至导致用户的不良体验。 首先，我们来了解下jQuery中Ajax请求的超时timeout属性。在Ajax请求中设置timeout属性可以...
重复请求——取消上次请求
最新发布
黄凯达的博客
02-24 1996
为什么要处理重复请求？在某些场景下，同个接口重复请求时（参数不同），如果第一次请求的耗时比第二次请求耗时长，那么会导致页面最终渲染的是第一次请求的结果，由此产生错误的显示。
Ajax技术原理
你好啊cbw
03-16 1213
1.Ajax简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。 AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下。 2.Ajax所包含的技术 AJAX 是⼏种原有技术的结合体。它由下列技术组合⽽成。 1.使⽤CSS和XHTML来表示。 2.使⽤DOM模型来交互和动态显示。 3.使⽤XMLHttpRequest来..
XMLHttpRequest、jQuery、axios、fetch 几种ajax请求方式
LouYQ0213的博客
10-09 477
XMLHttpRequest、jQuery、axios、fetch
使用new XMLHttpRequest请求JSON数据
weixin_44692296的博客
03-04 2148
const getJson = () => { const xhr = new XMLHttpRequest(); xhr.open("GET", url, true); // url 请求地址 // xhr.responseType = "blob"; // json格式不需要 xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.r
XMLHttpRequest() 请求 返回结果JSON 对象与JSON 字符串处理
热门推荐
JHON07的博客
10-28 1万+
好久没有看JavaWEB项目了突然拿起来，而且是原生的项目，中JSON 字符串的处理 json.stingfy() 将对象，数组转换为字符串，json.parse() 将字符串转成json 对象 JSON.stringify（数组或者对象） JSON.parse(字符串) 详细用法请参考：https://www.cnblogs.com/panmy/p/5925986.htm...
jQuery中$.ajax()和$.getJson()同步处理详解
12-08
在jQuery中，$.ajax()和$.getJSON()是两种常见的用于发送Ajax请求的方法，它们主要用于与服务器进行异步数据交互。然而，在某些特定场景下，如处理表单提交前的验证，可能需要同步处理请求，确保数据正确无误后再...
jQuery Ajax异步处理Json数据详解
12-08
在提供的示例中，当用户点击按钮时，`$.getJSON` 会向 `demo_ajax_json.js` 发送请求，并在成功接收到数据后，通过 `$.each` 遍历 JSON 对象的每个字段，将其添加到页面的 `div` 元素中。这是基本的 JSON 数据获取和...
js与jQuery终止正在发送的ajax请求的方法
10-23
然而，在某些情况下，我们可能需要终止一个正在发送的AJAX请求，例如用户点击取消按钮、页面跳转、超时等情况。JavaScript和jQuery都提供了终止正在发送的AJAX请求的方法，本文将对此进行详细介绍。 首先，我们了解...
JavaScript异步（XMLHttpRequest）引起的错误
weixin_49856607的博客
11-23 1052
js自身不会等待--js异步操作返回的数据，通过回调函数解决
XMLHttpRequest 请求失败也需要给出提示
weixin_42575505的博客
02-15 1966
是的，当XMLHttpRequest请求失败时，给用户一个提示是一个好的做法。这可以帮助用户了解请求是否成功，如果请求失败，他们可以采取适当的行动，例如重新发送请求或与技术支持联系。 以下是一些可能导致XMLHttpRequest请求失败的常见原因： 网络连接问题：如果用户的网络连接出现问题，请求可能会失败。这可能是由于网络连接中断、DNS解析问题、服务器故障等原因引起的。 服务器端错误：如果服...
原生js XMLhttprequest请求onreadystatechange执行两次问题解决
kis_wuyan的博客
04-28 3687
原生js XMLhttprequest请求onreadychange执行两次解决 最近做到一个页面需要兼容IE，然后就写了一个原生 XMLhttprequest请求 直接上错误代码 xmlHttp = new XMLHttpRequest(); xmlHttp.open("post","https://baidu.com/mianxiang/baidu/biancheng"); xmlHttp.setRequestHeader("Content-Type","applicat
使用XMLHttpRequest解析json
weixin_33829657的博客
04-17 418
不适用内函数或者promise的方式，可以在外部提取到json数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> ...
使用XmlHttpRequest对象发送一次ajax请求
面朝大海，春暖花开
02-08 1229
使用XMLHttpRequest object对象发送一次ajax请求 XMLHttpRequest对象中的open方法 open(“method”, “URL”[, asyncFlag[, “userName”[, “password”]]]) property description method The HTTP method used to ope...
AJAX 多次发送异步请求的 XmlHttpRequest 对象的设置
孔繁玉的专栏
05-25 3145
<br />业务需求：<br />第一步：加载商品类别，点“加载种类” 按钮<br /> <br /><br /> <br />第二步：选择商品种类显示该类别的所有商品，也是异步请求：<br /> <br /><br /> <br />这时要注意xmlHttpRequest的创建及 onreadystatechange 回调函数的设置<br /><br /><br /><html><br />  <head><br />    <base href="<%=basePath%>"><br />    <ti
XMLHttpRequest—必知必会
冷晨四点的太阳
07-28 5389
前言 做web开发,我们都知道浏览器通过XMLHttpRequest对象进行http通信 在实际开发中我们使用的是各种框架封装了的XMLHttpRequest对象,对具体实现往往一知半解.所以为了换框架好上手,请求有异常好调试,有必要深入学习一下XMLHttpRequest 本文从基础XMLHttpRequest开始,一步步把它封装为更实用的框架级别 实例 一个最简单的http请求 let xhr = new XMLHttpRequest(); xhr.open('GET', '/url'
jQuery Ajax与getJSON获取后台JSON数据详解
本文主要介绍了如何使用jQuery的Ajax和getJSON方法来获取后台的普通JSON数据以及层级结构的JSON数据。通过实例代码展示了这两种方法的使用步骤，并提供了运行效果的截图。 在JavaScript中，jQuery库提供了方便的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值