ajax 基础原理笔记

已于 2023-10-08 22:28:59 修改
阅读量57 收藏
点赞数
文章标签： ajax 前端 javascript
于 2023-09-05 21:58:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq115482677/article/details/132700735
版权

1.XMLHttprequst

//1.创建XMLHttpRequst对象
	const XHR = new XMLHttpRequest
	//2.配置请求方法和请求url地址
	XHR.open('GET','http://hmajax.itheima.net/api/province')
	//3.监听loadend事件，接受响应结果
	XHR.addEventListener('loadend',()=>{
		console.log(XHR.response)
		JSON.parse(XHR.response)
	})
	//4.发送请求
	XHR.send()

运行结果:

2.XMLHttprequst中携带参数 
//在XMLHttpRequst对象中携带参数
	//1.创建XMLHttpRequst对象
	const XHR = new XMLHttpRequest
	//2.配置请求方法和请求url地址
	XHR.open('GET','http://hmajax.itheima.net/api/city?pname=辽宁省')
	//3.监听loadend事件，接受响应结果
	XHR.addEventListener('loadend',()=>{
		console.log(XHR.response)
		JSON.parse(XHR.response)
	})
	//4.发送请求
	XHR.send()
运行结果：

3.XMLHttprequst中携带多个参数

//在XMLHttpRequst对象中携带多个参数
	const obj={
		pname:'北京',
		cname:'北京市'
	}
	//将参数转位url码
	const paramsObj = new URLSearchParams(obj)
	const newObj = paramsObj.toString()
	//1.创建XMLHttpRequst对象
	const XHR = new XMLHttpRequest
	
	//2.配置请求方法和请求url地址
	XHR.open('GET',`http://hmajax.itheima.net/api/area?${newObj}`)
	//3.监听loadend事件，接受响应结果
	XHR.addEventListener('loadend',()=>{
		console.log(XHR.response)
		JSON.parse(XHR.response)
	})
	//4.发送请求
	XHR.send()

 运行结果：

 4.XMLHttprequst提交数据

//在XMLHttpRequst传递参数
	const user={
		username:'itheima9167',
		password:'7654321'
	}
	//将参数转位json数据
	
	const paramsObj = JSON.stringify(user)
	//1.创建XMLHttpRequst对象
	const XHR = new XMLHttpRequest()
	
	//2.配置请求方法和请求url地址
	XHR.open('POST',`http://hmajax.itheima.net/api/register`)
	//设置请求头
	XHR.setRequestHeader('Content-Type','application/json')
	//3.监听loadend事件，接受响应结果
	XHR.addEventListener('loadend',()=>{
		console.log(XHR.response)
		JSON.parse(XHR.response)
	})
	//4.发送请求
	XHR.send(paramsObj)

运行结果：

使用promise 管理异步对象

什么是promise？

表示管理一个异步操作最终状态和结果值的对象

为什么要学习promise？

成功和失败状态，可以关联对应的处理程序，了解axios内部原理

Promise使用步骤

const p = new Promise((res,rej)=>{
		setTimeout(()=>{
			//模拟成功
			res('执行成功')
		},500)
	})
	p.then((res)=>{
		console.log(res)
	}).catch(error=>{
		console.log(error)
	})

执行结果:

const p = new Promise((res,rej)=>{
		setTimeout(()=>{
			//模拟成功
			// res('执行成功')
			//模拟失败
			rej('执行失败')
		},500)
	})
	p.then((res)=>{
		console.log(res)
	}).catch(error=>{
		console.log(error)
	})

运行结果:

Promise的三种状态

使用Pormise管理XMLHttprequs

const p = new Promise((res,rej)=>{
			const XHR = new XMLHttpRequest()
			XHR.open('GET','http://hmajax.itheima.net/api/province')
			XHR.addEventListener('loadend',()=>{
				if (XHR.response.status == 200) {
					res(XHR.response)
				} else{
					rej(new Error(XHR.response))
				}
			})
			XHR.send()
		})
		p.then(res=>{
			console.log(res)
		}).catch(error=>{
			console.log(error)
		})

运行结果:

封装简易axios

const p = (config)=>{
			return new Promise((res,rej)=>{
			const XHR = new XMLHttpRequest()
			XHR.open(config.methods||'GET',config.url)
			XHR.addEventListener('loadend',()=>{
				if (XHR.response.status == 200) {
					res(XHR.response)
				} else{
					rej(new Error(XHR.response))
				}
			})
			XHR.send()
		})
		} 
		p({
			url:'http://hmajax.itheima.net/api/province'
		}).then(res=>{
			console.log(res)
		}).catch(error=>{
			console.log(error)
		})

运行结果：

封装POST方式携带参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		const p = (config)=>{
			return new Promise((res,rej)=>{
			const XHR = new XMLHttpRequest()
			XHR.open(config.methods||'GET',config.url)
			XHR.addEventListener('loadend',()=>{
				if (XHR.response.status == 200) {
					res(XHR.response)
				} else{
					rej(new Error(XHR.response))
				}
			})
			if(config.data){
				const dataUrl = JSON.stringify(config.data)
				XHR.setRequestHeader('Content-Type','application/json')
				XHR.send(dataUrl)
			}else{
				XHR.send()
			}
			
		})
		} 
		p({
			url:'http://hmajax.itheima.net/api/register',
			methods:'POST',
			data:{
				username:'ithei21312323123',
				password:'123123123'
			}
		}).then(res=>{
			console.log(res)
		}).catch(error=>{
			console.log(error)
		})
	</script>
</html>

 运行结果:

使用promise链式调用解决回调地狱

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		const pointer = ''
		const p = (config)=>{
			return new Promise((res,rej)=>{
			const XHR = new XMLHttpRequest()
			XHR.open(config.methods||'GET',config.url)
			XHR.addEventListener('loadend',()=>{
				// if (XHR.response.status == 200) {
					res(XHR.responseText)
				// } else{
				// 	rej(new Error(XHR.response))
				// }
			})
			if(config.data){
				const dataUrl = JSON.stringify(config.data)
				XHR.setRequestHeader('Content-Type','application/json')
				XHR.send(dataUrl)
			}else{
				XHR.send()
			}
			
		})
		} 
		const that = this
		p({
			url:'http://hmajax.itheima.net/api/province'
		}).then(res=>{
			const resList = JSON.parse(res)
			console.log(resList)
			this.pointer = resList.list[0]
			return p({url:'http://hmajax.itheima.net/api/city?pname='+this.pointer})
		}).then(res => {
			console.log(res)
		})
	</script>
</html>

 运行结果:

使用async await解决回调地狱

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用async await解决回调地狱</title>
	</head>
	<body>
	</body>
	<script src="https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		const province = null
		const getProvince = async()=> {
			this.province = await axios({url:'http://hmajax.itheima.net/api/province'})
			console.log(this.province.data.list[0])
		} 
		const getCity = async()=> {
			const city = await axios({url:'http://hmajax.itheima.net/api/city',params:{pname:this.province}})
			console.log(this.city)
		} 
		
		getProvince()
		getCity()
	</script>
</html>

 运行结果：

使用 try catch 捕获错误

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script src="https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		const getProvince = async()=> {
			try{
				const res = await axios({url:'http://hmajax.itheima.net/api/province1'})
				console.log(res)
			}catch(e){
				//TODO handle the exception
				console.log(e)
			}
			
		} 
		
		getProvince()
	</script>
</html>

运行结果:

 事件循环 异步任务直接进入宿主环境进行倒计时，完成后进入任务队列，同步任务直接进入调用栈，执行任务。调用栈中没任务后循环，将任务队列中的任务推入调用栈

运行结果：1 3 5 2 4

 

2最后执行

promise.all 将所有promise对象合在一起，全部执行成功后进入.then，有任何一个失败都触发catch 

能不能把我的愿望还给我
关注
ajax原理简述,一张图搞懂Ajax原理
weixin_42130889的博客
08-05 707
本文整理在，我的github上。欢迎Star。原理说起ajax，就不得不说他背后的核心对象XMLHttpRequest，而说到XMLHttpRequest我觉得，从它的readyState状态说起是最好的切入点。个人觉得，只要弄清楚了readyState的这几个状态，其实ajax的原理也就算弄清楚了。为了更方便您理解，笔者特意画了一张状态图。您只需要看懂这张图ajax原理，您就算通关了；并且很难忘...
Ajax学习笔记－基础原理
微也的博客
08-23 979
之前对于Ajax能实现简单基本的应用，但并不了解它的原理，就是俗话说的“代码的搬运工”，不踏实，这几天重新看了下Ajax的内容，今天分享下这次的学习吧。 Ajax, asynchronous javascript and xml(个人比较喜欢知道它的全拼），即为异步的 javascript 和XML； 简单讲下，javascript是一种网络的脚本语言；XML（extensible marku
ajax基础学习笔记整理
冰雪为融的博客
03-07 340
一、ajax原理及功能ajax：Asynchronous JavaScript and XML  翻译为中文异步的JavaScript和XML（用JavaScript异步形式去操作XML）ajax的特点：无刷新页面就可以完成数据交互。ajax的优点：节省用户操作时间，提高用户体验，减少数据请求。不需要浏览器刷新去发送请求，它可以通过js内置的ajax对象，来完成当前浏览器的这种请求行为，我们可以请...
AJAX基础笔记
qq_43645678的博客
09-17 1139
AJAX 基础笔记
Ajax、HTTP基础笔记
linziwang的博客
04-07 2143
一服务器的基本概念与初识 1.1、URL地址的概念 URL（全称是JniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能征确定位资源的存放位置，从而成功访问到对应的资源。 常见的URL举例： http://www.baidu.com http://www.taobao.com http://www.cnblogs.com/liulongbinblogs/p/11649393.html 1.2、URL地址的组成部分 UL地
AJAX基础知识笔记
为梦想而奋斗，无悔_一叶扁舟的点滴成长！
10-28 654
举个例子：普通B/S模式(同步/WEB1.0)       AJAX技术(异步/WEB2.0)        *  同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事        *   异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕      同步是指：发送方发出数据后，等接收方发回响应以后才发下一个        
JSON及AJAX超详细笔记
2301_78399805的博客
05-05 554
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
经验笔记：Ajax学习
qq_45831414的博客
09-04 1301
Ajax并不是一种新的编程语言，而是一种使用现有Web技术的新方法，主要依靠对象来实现浏览器与服务器之间的数据交换。尽管名称中含有XML，但Ajax实际上可以使用多种数据格式，如JSON、XML、纯文本等。其最大的优点在于可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。通过学习Ajax，我们可以让Web应用变得更加高效和用户友好。同时，了解Fetch API和Axios这两种现代解决方案可以帮助我们根据项目需求做出最合适的选择。不断实践和探索，将使你在Web开发领域更加游刃有余。
AJAX 基础理论学习笔记
BigOrange的博客
05-23 334
AJAX ：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX = 异步 JavaScript 和 XML。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 AJAX 工作原理 原生发ajax请求步骤： a.创建XMLHttpRequest对象； b.设置地址参数并发送请求； c.回调结果。 响应数据格式： responseText 获得
韩顺平ajax视频笔记,韩顺平AJAX和jquery笔记整理
weixin_33199783的博客
08-05 153
《韩顺平AJAX和jquery笔记整理》由会员分享，可在线阅读，更多相关《韩顺平AJAX和jquery笔记整理(10页珍藏版)》请在人人文库网上搜索。1、韩顺平AJAX和jquery笔记整理第一天 . 3 ajax是什么 . 3 ajax 的运行原理分析 . 3 ajax在什么地方用的多 . 4 使用ajax与服务器通信的的步骤 . 4 ajax的post方式请求 . 8 ajax处理返回xml ...
JsUnit详解——《ajax基础》笔记（二）
05-26
本篇笔记主要聚焦在JsUnit的使用方法和与Ajax基础的结合，通过实例来深入理解其工作原理。 一、JsUnit的基本概念 JsUnit的核心在于测试用例（Test Case）。每个测试用例由一系列测试方法组成，每个方法对应一个...
Ajax和jQuery学习笔记
03-29
#### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使得网页能够实现局部...
ajax学习笔记
11-30
### AJAX学习笔记 #### 一、引言 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。...
AJAX笔记
03-22
本笔记将围绕AJAX的核心概念、工作原理及实际应用展开。 ### 1. AJAX核心概念 - **异步通信**：与传统的HTTP请求不同，AJAX允许浏览器在不重新加载整个页面的情况下与服务器进行通信。 - **JavaScript**：AJAX主要...
7、使用JSON向服务器发送数据——ajax基础笔记
05-26
在“使用JSON向服务器发送数据——ajax基础笔记”这个主题中，我们首先会了解如何创建一个XMLHttpRequest对象。在JavaScript中，你可以通过`new XMLHttpRequest()`来实例化一个对象，然后利用它的方法如`open()`、`...
AJAX 2——Bootstrap弹框使用、图书管理案例、图片上传方法
最新发布
weixin_72043867的博客
10-05 664
Bootstrap弹框使用、图书管理案例图书信息增删查改、图片上传格式及方法
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 425
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
【漏洞复现】孚盟云oa AjaxSendDingdingMessage接口 存在sql注入漏洞
qq_48368964的博客
09-28 1174
孚盟与阿里强强联手将最受青睐的经典C系列产品打造成全新的孚盟云产品，让用户可以用云模式实现信息化管理，让用户的异地办公更加流畅，大大降低中小企业在信息化上成本，用最小的投入享受大型企业级别的信息化服务，使中小企业在网络硬件环境、内部贸易过程管理与快速通关形成一套完整解决方案。Web程序中对于用户提交的参数未做过滤直接拼接到SQL语句中执行，导致参数中的特殊字符破坏了SQL语句原有逻辑，攻击者可以利用该漏洞执行任意SQL语句，如查询数据、下载数据、写入webshell、执行系统命令以及绕过登录限制等。
AJAX(简介以及一些用法)
m0_63233901的博客
09-24 1092
对象和服务器进行数据交互的方式就是。，它可以帮助我们轻松实现网页与服。）我们可以理解为：在网页中。务器之间的数据交互。
Ajax学习笔记：从入门到精通
1. **Ajax基础知识** Ajax的核心是JavaScript异步通信，它利用XMLHttpRequest对象作为后台与服务器端通信的桥梁。通过创建XMLHttpRequest对象、打开连接、发送请求以及处理响应，Ajax可以实现页面的无刷新更新。 2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值