Ajax 笔记/练习

Ajax

异步JavaScript和XML

作用

实现 HTML 在不整体刷新的情况下,通过后台服务器,请求数据并局部更新页面内容

  • 操作流程

    image-20231019150656824

Ajax 使用

  • XMLHttpRequest

    通过new 关键字可以创建XMLHttpRequest() 对象。

    var req = new XMLHttpRequest();
    
    方法和属性说明
    req.open(method, url, async)method:[GET|POST] url:url async:[true(异步,默认) | false(同步)]
    req.send()发送HTTP 请求
    req.responseText获得字符串形式的响应数据。
    readyState存有XMLHttpRequest 的状态。 请求发送到后台后,状态会从0 到4 发生变化: 1:服务器连接已建立。 2:请求已接收。 3:请求处理中。 4:请求已完成,且响应已就绪。
    req.onreadystatechange每当readyState 属性改变时,就会调用该函数。
    status状态码

image-20231019150731887

  • 创建 Ajax 对象

    var xhr = new XMLHttpRequest()
    
  • onreadystatechange

    readyState 的值发生变化就会触发该事件

    xhr.onreadystatechange = function () {// 每次readyState 改变的时候触发该事件
    }
    
  • 配置连接信息

    Ajax 对象中的 .open 方法用来配置请求信息

    xhr.open("GET","aj.php",true);
    
    • 第一个参数是本次的请求方式 get / post / put / …
    • 第二个参数是本次请求的 url
    • 第三个参数是本次请求是否是异步,true (默认)表示异步,false 表示同步
    • xhr.open('get','/data.php')
  • 发送请求

    xhr.send()
    

Ajax 状态码

  • readyState

    readyState === 0 : 表示未初始化完成,也就是 open 方法还没有执行
    readyState === 1 : 表示配置信息已经完成,也就是执行完 open 之后
    readyState === 2 : 表示 send 方法已经执行完成
    readyState === 3 : 表示正在解析响应内容
    readyState === 4 : 表示响应内容已经解析完毕,可以在客户端使用了

    只有当 readyState === 4 的时候,我们才可以正常使用服务端给我们的数据,配合 http 状态码 status===200 两个条件都满足本次请求才可以完成

    如果XMLHttpRequest对象的readyState属性值等于4,表示异步调用过程完毕,就可以通过XMLHttpRequest对象的 responseText 属性或 responseXml 属性来获取数据

使用 Ajax 发送请求时携带的参数

  • 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

    然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
  • get 请求的参数就直接在 url 后面进行拼接就可以

    const xhr = new XMLHttpRequest()
    // 直接在地址后面加一个 ?,然后以 key=value 的形式传递 // 两个数据之间以 & 分割
    xhr.open('get', './data.php?a=100&b=200')
    xhr.send()
    

    这样服务端就能接受到两个参数 一个是 a,值是 100,一个是 b,值是 200

  • post 请求的参数是携带在请求体 send() 中的,所以,不需要再 url 后面拼接

    const xhr = new XMLHttpRequest()
    xhr.open('post', './data.php')
    xhr.send('a=100&b=200')
    // 如果是用 ajax 对象发送 post 请求,必须要先设置一下请求头中的 content- type
    // 告诉一下服务端我给你的是一个什么样子的数据格式 xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded')
    

Ajax 封装使用实例

  • index.html 文件

    <!DOCTYPE html>
    <html>
    <head><meta charset="UTF-8">
    </head>
    <body><div>part_one</div><input type="button" value="点击局部刷新" onclick="part_refresh()"><div id="d1"></div>
    </body>
    <script>function part_refresh(){// 创建点击 button 触发刷新的方法var xhr = new XMLHttpRequest();// 创建 Ajax 对象xhr.onreadystatechange=function re(){// 当 readyState 的值发生变化时执行此方法中的代码	if(xhr.readyState===4 && xhr.status===200){// 当内容解析完毕,并且成功处理了请求时执行语句document.getElementById("d1").innerHTML=xhr.responseText;// 在网页上第二个 <div> 标签内输出获取的 xhr 对象文本格式的响应数据}}xhr.open("GET","aj.php",true);// 配置连接信息xhr.send();// 发送请求}
    </script>
    </html>
    
  • aj.php 文件

    <?php
    $str = "hello";
    echo $str;
    ?>
    
  • 将 index.html 文件和 aj.php 文件放入 PHPstudy 的 www 目录下

    开启 phpstudy

  • 在浏览器地址栏打开 127.0.0.1/index.html

    image-20231019150746449

    点击局部刷新按钮后

    可以看到第二个源代码 div 块中的值发生变化

    image-20231019150754987

局部刷新与整页刷新的区别

  • 整页刷新

    手动更改源代码中第一个 <div> 块中的文本内容

    image-20231019150811540

    点击整页刷新按钮,发现更改的内容恢复到更改前的状态

    image-20231019150902692

  • Ajax 局部刷新

    手动更改源代码中第一个 <div> 块中的文本内容

    image-20231019150947151

    点击局部刷新按钮,发现手动更改的内容未发生改变,而下方刷新出来了新的内容,源代码中手动更改的 <div> 块未改变,第二个 <div> 代码块刷新后发生改变

    image-20231019151002779

前端跨域问题

同源策略

协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源

同源策略限制以下几种行为:

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM和JS对象无法获得
  • AJAX 请求不能发送
URL说明是否允许通信
127.0.0.1/index.html
127.0.0.1/aj.php
同一域名,不同文件或路径允许
http://www.domain.com:8000/a.js
http://www.domain.com/b.js
同一域名,不同端口不允许
http://www.domain.com/a.js
https://www.domain.com/b.js
同一域名,不同协议不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js
域名和域名对应相同ip不允许
http://www.domain.com/a.js
http://x.domain.com/b.js
http://domain.com/c.js
主域相同,子域不同不允许
http://www.domain1.com/a.js
http://www.domain2.com/b.js
不同域名不允许

Ajax 练习

同步请求

  • 环境:

    • ajax.html 放在 phpstudy 的 www 页面下
    • flag.php 放在 phpstudy 的 www 页面下
    • 浏览器访问 127.0.0.1/ajax.html
    • 开启 phpstudy
  • 效果:等待五秒同步刷新文本框和获取的 flag

  • ajax.html 代码

    <!DOCTYPE html>
    <html lang="zh">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
    </head>
    <body><textarea name="" id="kuang" cols="30" rows="10"></textarea>
    </body>
    <script>var x=new XMLHttpRequest;// 创建 Ajax 对象x.open("GET","http://127.0.0.1/flag.php",false);// 配置连接信息x.send();// 发送请求var flag=x.responseText;// 创建变量 flag 接收数据console.log(flag);document.getElementById("kuang").value=flag;// 将文本框中的字符修改为获取的 flag
    </script>
    </html>
    
  • flag.php 代码

    <?php sleep(5); ?>
    ajax flag
    

    image-20231019170929894

异步请求

  • 环境:

    • ajax.html 放在 phpstudy 的 www 页面下
    • flag.php 放在 phpstudy 的 www 页面下
    • 浏览器访问 127.0.0.1/ajax.html
  • 效果:

    浏览网页立刻加载文本框,等待五秒后加载获取的 flag

    点击局部刷新按钮五秒后,flag 重新获取,而页面不刷新

    <!DOCTYPE html>
    <html lang="zh">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
    </head>
    <body><textarea name="" id="kuang" cols="30" rows="10"></textarea><input type="button" value="局部刷新" onclick="flush()">
    </body>
    <script>function flush(){// 创建点击 button 触发刷新的方法var x=new XMLHttpRequest;// 创建 Ajax 对象x.open("GET","http://127.0.0.1/flag.php",true);// 配置连接信息x.send();// 发送请求x.onreadystatechange=function(){// 当 readyState 的值发生变化时执行此方法中的代码	var flag=x.responseText;// 创建变量 flag 接收数据console.log(flag);document.getElementById("kuang").value=flag;// 将文本框中的字符修改为获取的 flag}}flush()</script>
    </html>
    

    image-20231019172433622

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rclone连接Onedrive

一、Rclone介绍 Rclone是一款的命令行工具&#xff0c;支持在不同对象存储、网盘间同步、上传、下载数据。 我们这里连接的onedrive&#xff0c;其他网盘请查看官方文档。 注意&#xff1a; 需要先在Windows下配置好了&#xff0c;然后再将rclone配置文件复制到Linux的rclone配…

Go语言中:list := make([]Item, 0) var list []Item 这两种写法有什么区别?

list : make([]Item, 0) 和 var list []Item 都是用于创建一个切片&#xff08;slice&#xff09;的语法&#xff0c;但它们在 Go 中有一些区别。 list : make([]Item, 0)&#xff1a; 这是一种使用 make 函数来创建切片的方式&#xff0c;其中 Item 是切片的元素类型。make 函…

Elasticsearch:painless script 语法基础和实战

摘要&#xff1a;Elasticsearch&#xff0c;Java script的作用 script是Elasticsearch的拓展功能&#xff0c;通过定制的表达式实现已经预设好的API无法完成的个性化需求&#xff0c;比如完成以下操作 字段再加工/统计输出字段之间逻辑运算定义查询得分的计算公式定义特殊过…

cnn 直线检测笔记

目录 mlsd直线检测: ULSD-ISPRS曲线检测 划线标注工具: 可视化标注代码: mlsd直线检测: mlsd_pytorch

JavaScript中 判断网络状态的几种方法

1. 使用 Navigator onLine 属性 Navigator onLine 属性判断浏览器是否在线&#xff0c;在线返回 true&#xff0c;离线返回 false&#xff1b; Navigator onLine 是只读属性&#xff0c;所有主流浏览器都支持 onLine 属性&#xff1b; if (window.navigator.onLine) {console…

【proteus】8086仿真、汇编语言

1.创建好新项目 2.点击source code 弹出VSM 3. 4.注意两个都不勾选 可以看到schematic有原理图出现 5. 再次点击source code 6.project/project settings&#xff0c;取消勾选embed 7. add 8.输入文件名保存后&#xff1a; 注意&#xff1a;proteus不用写dos的相关语句 。

【NPM】particles.vue3 + tsparticles 实现粒子效果

在 NPM 官网搜索这两个库并安装&#xff1a; npm install element-plus --save npm i tsparticles使用提供的 vue 案例和方法&#xff1a; <template><div><vue-particlesid"tsparticles":particlesInit"particlesInit":particlesLoaded&…

Kubernetes 学习总结(39)—— Kubernetes 之 Pause 容器详解

一、概念和作用 在 Kubernetes 中&#xff0c;Pause 容器是一种特殊类型的容器&#xff0c;它的主要作用是充当依赖其他容器的容器&#xff0c;为其他容器提供一个可靠的、隔离的运行环境。 Pause 容器是一种轻量级的容器&#xff0c;它本身不包含任何业务逻辑&#xff0c;只是…

华为OD 磁盘容量排序(100分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…

自然语言处理---Transformer机制详解之BERT模型特点

1 BERT的优点和缺点 1.1 BERT的优点 通过预训练, 加上Fine-tunning, 在11项NLP任务上取得最优结果.BERT的根基源于Transformer, 相比传统RNN更加高效, 可以并行化处理同时能捕捉长距离的语义和结构依赖.BERT采用了Transformer架构中的Encoder模块, 不仅仅获得了真正意义上的b…

华为OD机试 - 代表团坐车 - 动态规划(Java 2023 B卷 200分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…

Ubuntu 22.04 中安装 fcitx5

Ubuntu 22.04 中安装 fcitx5 可以按照以下步骤进行&#xff1a; 添加 fcitx5 的 PPA 首先&#xff0c;添加 fcitx5 的官方 PPA&#xff1a; sudo add-apt-repository ppa:fcitx-team/fcitx5更新软件包列表 sudo apt update安装 fcitx5 sudo apt install fcitx5 fcitx5-conf…

信息学奥赛一本通1000:入门测试题目

1000&#xff1a;入门测试题目 时间限制: 1000 ms 内存限制: 32768 KB 提交数: 318392 通过数: 190210 【题目描述】 求两个整数的和。 【输入】 一行&#xff0c;两个用空格隔开的整数。 【输出】 两个整数的和。 【输入样例】 2 3 【输出样例】 5 思路&#…

Mysql表结构差异比较

1、背景 我们在开发过程中&#xff0c;大部分情况下都是好几个版本一起并行&#xff0c;有时候如果某个版本表结构改动较大&#xff0c;但是忘记了记录DDL脚本&#xff0c;这个时候需要人工去把新增或修改的DDL脚本整理出来&#xff08;主要是为了解决 数据库新增字段&#xff…

高效表达三步

一、高效表达 高效表达定主题搭架子填素材 第一&#xff1a; 1个核心主题&#xff0c;让别人秒懂你的想法 &#xff08;表达要定主题&#xff09; 第二&#xff1a; 3种经典框架&#xff0c;帮你快速整理表达思路 第三&#xff1a; 2种表达素材&#xff0c;让发言更具说服力…

在 Python 中执行 Shell 命令并获取输出

在本文中&#xff0c;我们将学习如何借助 os.system() 从 Python 脚本执行 cmd 命令。 我们还将学习如何借助 Python 中的 subprocess 模块以更简单的方式从脚本执行 cmd 命令。 从 Python 脚本执行 CMD 命令并使用 os.system() 获取输出 我们出于不同目的在命令提示符或任何其…

JAVA IO-序列化与反序列化

1.注意&#xff1a; 输入和输出都是从程序的角度来说的。 字节流&#xff1a;一次读入或读出是8位二进制。 字符流&#xff1a;一次读入或读出是16位二进制。 字节流和字符流的原理是相同的&#xff0c;只不过处理的单位不同而已。后缀是Stream是字节流&#xff0c;而后缀是Rea…

可视化 | python可视化相关库梳理(自用)| pandas | Matplotlib | Seaborn | Pyecharts | Plotly

文章目录 &#x1f4da;Plotly&#x1f407;堆叠柱状图&#x1f407;环形图&#x1f407;散点图&#x1f407;漏斗图&#x1f407;桑基图&#x1f407;金字塔图&#x1f407;气泡图&#x1f407;面积图⭐️快速作图工具&#xff1a;plotly.express&#x1f407;树形图&#x1f…

正点原子嵌入式linux驱动开发——Linux中断

不管是单片机裸机实验还是Linux下的驱动实验&#xff0c;中断都是频繁使用的功能&#xff0c;在裸机中使用中断需要做一大堆的工作&#xff0c;比如配置寄存器&#xff0c;使能IRQ等等。但是Linux内核提供了完善的中断框架&#xff0c;只需要申请中断&#xff0c;然后注册中断处…

怎样修改ESP32的CPU主频

ESP32的主频默认设置为160mhz&#xff0c;但ESP32最高可以跑到240mhz&#xff0c; 修改方法&#xff1a; idf.py menuconfig --> Component config --> ESP System Settings --> CPU frequency 可以看到三个选项&#xff0c;80&#xff0c;160&#xff0c; 240&…