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

已于 2022-04-05 19:33:51 修改
阅读量298 收藏 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 实例对象

美美| ू•ૅω•́)ᵎᵎᵎ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax 普通文本 XML解析 json 解析
love20yh的专栏
07-07 229
ajax 1、获取xmlHttpRequest，创建异步对象 var xmlHttp= createXMLHttpRequest(); function createXMLHttpRequest() { try { return new XMLHttpRequest();//主流浏览器 } catch (e) { ...
XmlHttpRequest执行了两次
weixin_34357267的博客
03-18 883
2019独角兽企业重金招聘Python工程师标准>>> ...
使用XmlHttpRequest对象发送一次ajax请求
面朝大海，春暖花开
02-08 1209
使用XMLHttpRequest object对象发送一次ajax请求 XMLHttpRequest对象中的open方法 open(“method”, “URL”[, asyncFlag[, “userName”[, “password”]]]) property description method The HTTP method used to ope...
XMLHttpRequest、jQuery、axios、fetch 几种ajax请求方式
LouYQ0213的博客
10-09 442
XMLHttpRequest、jQuery、axios、fetch
Ajax技术原理
你好啊cbw
03-16 534
1.Ajax简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。 AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下。 2.Ajax所包含的技术 AJAX 是⼏种原有技术的结合体。它由下列技术组合⽽成。 1.使⽤CSS和XHTML来表示。 2.使⽤DOM模型来交互和动态显示。 3.使⽤XMLHttpRequest来..
AJAX中同时发送多个请求XMLHttpRequest对象处理方法
10-30
AJAX中同时发送多个请求XMLHttpRequest对象处理方法
javascript解析ajax返回的xml和json格式数据实例详解
11-27
本文实例讲述了javascript解析ajax返回的xml和json格式数据。分享给大家供大家参考，具体如下： 写个例子，以备后用 一、JavaScript 解析返回的xml格式的数据： 1、javascript版本的ajax发送请求 （1）、创建...
AJAX跨域请求JSONP获取JSON数据的实例代码
12-10
Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用XMLHttpRequest 函数获取数据...
通过jsonp获取json数据实现AJAX跨域请求
01-19
它在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页，ajax 使用XMLHttpRequest对象在后台与服务器交换数据，XMLHttpRequest 是 AJAX 的基础，它允许客户端 JavaScript 通过 HTTP请求连接到远程服务器...
使用new XMLHttpRequest请求JSON数据
weixin_44692296的博客
03-04 2100
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...
web开发时使用xmlhttprequest向后端传递数据成功，后端向前端返回处理结果报错405
qq_45899904的博客
10-19 2211
开发环境： 本地服务器：Tomcat 开发平台：IDEA 问题描述： 使用IDEA在web开发中，前端使用xmlhttprequest向后端servlet发送数据，并获取后端处理的结果时，网页中显示错误代码：405-方法不允许；但是后端可以正常获取到前端传入的数据，后端处理的结果也是正确的。 前端向后端传递参数的代码如下： xmlHttp 原因分析： 提示：这里填写问题的分析： 例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handle
XMLHttpRequest超时事件
#维多利亚的秘密#
06-21 5899
《IE8 & 9开发实战：基于下一代IE的应用开发》第3章用AJAX和JSON来丰富Web应用程序的功能，本章将介绍Internet Explorer中的一些新功能和经过升级的功能，使开发人员能够增强动态Web应用程序的功能，并使其更为流畅。我们将会讨论兼容性和互操作性场景，重点讨论IE中可能会对现有应用程序产生影响的产品变化，并提供一些有用的详尽示例，用来演示如何将网站与IE中经过更新的AJAX
快速点击，多次请求同一接口，怎样让结果渲染为最后一次请求的结果
weixin_41798613的博客
06-24 3792
如果多次点击请求同一接口，因为请求是异步的，可能会导致结果最后渲染为上一次搜索的结果，那么如何避免这种情况呢？ 第一步：定义一个字段num data() { return { num: 0 }; } 第二步：请求接口事件里 this.num ++; let a = this.num; 然后在接口返回后判断num与a是否相等，若相等，说明是最后一次请求，则进行数据处理。 async getKeywordEmit(val, clear,platform){ this.n
【ajax】7.请求：请求超时与网络异常处理+取消请求+请求重复发送问题
weixin_43210113的博客
12-07 765
〇、前情提要 在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。 参考： 我的笔记： 【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记 https://blog.csdn.net/weixin_43210113/article/details/110628389 b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020
XMLHttpRequest对象
Man_Humble
08-13 790
Ajax和XMLHttpRequest
ajax xhr与$.ajax区别
最新发布
03-06
3. 功能扩展：$.ajax方法提供了更多的功能扩展，例如设置请求超时时间、处理跨域请求、发送JSON数据等，而XHR需要手动编写代码实现这些功能。 4. 简化操作：$.ajax方法封装了XHR对象的一些常用操作，例如设置请求...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值