AJAX——ajax原理

server/2024/12/23 6:02:23/

1.XMLHttpRequest

定义:XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。

关系:axios内部采用XMLHttpRequest与服务器交互

好处:掌握使用XHR与服务器进行数据交互,了解axios内部原理

 2.使用XMLHttpRequest

步骤:

1.创建XMLHttpRequest对象

2.配置请求方法和请求url地址

3.监听loadend事件,接收响应结果

4.发起请求

需求:获取并展示所有省份名字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XMLHttpRequest_基础使用</title>
</head><body><p class="my-p"></p><script>/*** 目标:使用XMLHttpRequest对象与服务器通信*  1. 创建 XMLHttpRequest 对象*  2. 配置请求方法和请求 url 地址*  3. 监听 loadend 事件,接收响应结果*  4. 发起请求*/// 1.创建XMLHttpRequest对象const xhr = new XMLHttpRequest()// 2.配置请求方法和请求url地址xhr.open('GET', 'http://hmajax.itheima.net/api/province')// 3.监听loadend事件,接收响应结果xhr.addEventListener('loadend',() => {console.log(xhr.response)const data = JSON.parse(xhr.response)console.log(data.list.join('<br>'))document.querySelector('.my-p').innerHTML = data.list.join('<br>')})// 4.发起请求xhr.send()</script>
</body></html>

总结:

1.AJAX原理是什么?

  • XMLHttpRequest对象

2.为什么学习XHR?

  • 有更多与服务器数据通信方式
  • 了解axios内部原理

3.XHR使用步骤?

  • 创建XHR对象
  • 调用open方法,设置url和请求方法
  • 监听loadend事件,结构结果
  • 调用send方法,发起请求

3.XMLHttpRequest-查询参数 

定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

语法:http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XMLHttpRequest_查询参数</title>
</head><body><p class="city-p"></p><script>/*** 目标:使用XHR携带查询参数,展示某个省下属的城市列表*/const xhr = new XMLHttpRequest()xhr.open('GET','http://hmajax.itheima.net/api/city?pname=辽宁省')xhr.addEventListener('loadend', () => {console.log(xhr.response)const data = JSON.parse(xhr.response)console.log(data)document.querySelector('.city-p').innerHTML = data.list.join('<br>')})xhr.send()</script>
</body></html>

4.地区查询案例

需求:输入省份和城市名字,查询地区列表

请求地址:http://hmajax.itheima.net/api/area?参数名1=值1&参数名2=值2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_地区查询</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标: 根据省份和城市名字, 查询对应的地区列表*/// 1. 给查询按钮-点击事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 收集省份和城市名字const pname = document.querySelector('.province').valueconst cname = document.querySelector('.city').value// 3.组织查询参数字符串const qObj = {pname,cname}// 查询参数对象 -> 查询参数字符串const paramsObj = new URLSearchParams(qObj)const queryString = paramsObj.toString()console.log(queryString)// 4.使用XHR对象,查询地区列表const xhr = new XMLHttpRequest()xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)xhr.addEventListener('loadend', () => {console.log(xhr.response)const data = JSON.parse(xhr.response)console.log(data)const htmlStr = data.list.map(areaName => {return `<li class="list-group-item">${areaName}</li>`}).join('')console.log(htmlStr)document.querySelector('.list-group').innerHTML = htmlStr})xhr.send()})</script>
</body></html>

5.XMLHttpRequest-数据提交

需求:通过XHR提交用户名和密码,完成注册功能

核心:

请求头设置Content-Type:application/json

请求头携带JSON字符串

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XMLHttpRequest_数据提交</title>
</head><body><button class="reg-btn">注册用户</button><script>/*** 目标:使用xhr进行数据提交-完成注册功能*/document.querySelector('.reg-btn').addEventListener('click', () => {const xhr = new XMLHttpRequest()xhr.open('POST','http://hmajax.itheima.net/api/register')xhr.addEventListener('loadend', () => {console.log(xhr.response)})// 设置请求头-告诉服务器内容类型(JSON字符串)xhr.setRequestHeader('Content-Type', 'application/json')// 准备提交的数据const userObj = {username:'itheima001',password:'7654321'}const userStr = JSON.stringify(userObj)// 设置请求头,发起请求xhr.send(userStr)})</script>
</body></html>


http://www.ppmy.cn/server/7651.html

相关文章

Windows平台下的Oracle 19c补丁升级

Windows平台下的Oracle 19c补丁升级 文章目录 Windows平台下的Oracle 19c补丁升级第一章 概述第二章 安装前备份2.1 软件目录备份2.2 权限备份2.3 备份数据库 第三章 安装前检查3.1 查看数据库版本3.2 升级opatch版本 第四章 安装补丁4.1 设置环境变量4.2 关闭oracle相关服务4.…

frp内网穿透工具

frp内网穿透工具 用户——》frps&#xff08;公网&#xff09;——》frpc 下载 [rootvm ~]# wget -c https://github.com/fatedier/frp/releases/download/v0.53.2/frp_0.53.2_linux_amd64.tar.gz [rootvm ~]# tar -xvf frp_0.53.2_linux_amd64.tar.gz [rootvm ~]# ls frp_0…

Linux嵌入式驱动开发-设备树中的中断

文章目录 中断控制器结构节点举例**顶层中断控制器**一级子中断控制器二级子中断控制器 总结 中断控制器结构 节点举例 以imx6ull.dtsi设备树文件举例 顶层中断控制器 intc 节点就是I.MX6ULL 的中断控制器节点 intc: interrupt-controller00a01000 {compatible "arm,…

左值引用与右值引用

目录 右值 与 左值 右值引用 右值引用的用处 move 引用折叠 forward 右值 与 左值 c11增加了一个新的类型&#xff0c;右值引用&#xff0c;记作&#xff1a;&& 。 ● 左值是指在内存中有明确的地址&#xff0c;我们可以找到这块地址的数据&#xff08;可取地址…

【编译原理】03语法分析

1&#xff0c;语法分析的若干问题 1.1 语法分析器的作用 编译器前端的重要组成部分&#xff1a; (1) 根据词法分析器提供的记号流&#xff0c;为语法正确的输入构造分析树(或语法树)。 (2) 检查输入中的语法(可能包括词法)错误&#xff0c;并调用出错处理器进…

民间故事传说(一)

秦始皇为了抵御外敌&#xff0c;修筑了一座伟大的工程&#xff0c;那就是长城。长城在现代看来是一项前无古人&#xff0c;后无来者的工程。和在古代却是劳民伤财&#xff0c;人声怨载的工程。为了修长城&#xff0c;老百姓的日子是苦不堪言&#xff0c;当兵的到处抓人&#xf…

【iOS安全】iOS ARM汇编

mov指令 MOV X22, X0 将X0的值移到X22中 参数传递 参数1&#xff1a;寄存器X0传递 参数2&#xff1a;寄存器X1传递 参数3&#xff1a;寄存器X2传递 参数4&#xff1a;寄存器X3传递 &#xff08;这里的X0传递的就是第一个实际参数&#xff0c;而不是self、selector之类的&…

记录mac上图像处理

自适应二值化 import cv2# 读取图像 image cv2.imread(/Users/sinkarsenic/Downloads/用所选项目新建的文件夹/2.jpg, 0) # 使用灰度模式读取图像# 自适应二值化 adaptive_thresh cv2.adaptiveThreshold(image, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 31, 2…