Ajax入门

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量83 收藏
点赞数
文章标签： ajax javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47897831/article/details/119982777
版权

Ajax入门

ajax介绍

  • Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3]

  • 特点：局部刷新，异步访问

同步请求和异步请求

同步请求
  • 用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.
  • img
异步请求
  • 在这里插入图片描述
  • 步骤：
    • 用户发起Ajax请求，Ajax内部机制将请求交给ajax引擎处理
    • Ajax引擎接收到用户的请求之后，重新发起一个请求，访问后端服务器
    • 当服务器端接收到了ajax请求之后，完成业务处理，之后将数据响应给Ajax引擎
    • Ajax引擎通过事先约定好的回调函数，将服务器数据交还给用户
    • 用户在请求的过程中，可以完成自己的任务
    • tips：多个Ajax的请求，不关注顺序

入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入门案例</title>
	</head>
	<body>
		
		<h1>Ajax请求练习</h1>
		<!-- 使用步骤:
			1.导入JS函数类库
			2.发起Ajax请求,之后业务处理.
		 -->
		 <script src="../js/axios.js"></script>
		 <script>
			/* axios请求方式
			 
				1.请求类型
				   1. get  执行查询业务
				   2. post 执行form表单提交(登录/新增)
				   3. put  执行修改操作 
				   4. delete 执行删除业务时.
				   
				2. axios语法
				   axios.get("url地址信息","参数信息")
						.then(function(args){
							
						})
						
				3. 关于args参数说明
					axios为了统筹请求状态.将所有的数据封装为
					promise对象
					
			 */
			
			/* 
			案例1: 利用axios获取后台用户列表信息
			url: http://localhost:8090/findAll 
			
			*/
			
			axios.get("http://localhost:8090/findAll")
				 .then(function(promise){
					 console.log(promise)
					 console.log(promise.data)
				 })
		 
		 </script>
	</body>
</html>
  • 需要注意的是在使用ajax的时候，需要开启跨域机制，否则访问失败------也就是说需要在对应的控制层加上一个注解（@CrossOrigin）

使用Ajax发起的请求说明

分组:
1.GET/DELETE 用法一致.
2.POST/PUT 用法一致.

get请求

GET-带参数(方式1)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
	</head>
	<body>
		
		 <h1>前后端调用</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			/* 需求1: 查询id=1的用户
			   
			   GET方式1: 动态拼接参数的写法 
			   url: http://localhost:8090/axios/getUserById?id=1
			 */
			let url1 = "http://localhost:8090/axios/getUserById?id=1"
			axios.get(url1).then(promise => {
				console.log(promise.data)
			})
		 </script>
	</body>
</html>
GET-带参数(restFul格式)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
	</head>
	<body>
		
		 <h1>前后端调用</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			/* 
				GET方式2: 利用restFul查询数据
				需求:     查询sex=女 age>18
				
				原因: restFul结构越来越受欢迎,则拼接restFul结构 变得繁琐.
				模板字符串:  
					语法: 一对反引号  ``
					取值: ${key} 形式取值
					优势: 保留代码的格式
					
			 */
			let sex2 = "女"
			let age2 = 18
			//let url2 = "http://localhost:8090/axios/user/"+sex2+"/"+age2
			let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`
			axios.get(url2).then(promise => {
				console.log(promise.data)
			})
		 </script>
	</body>
</html>
GET-带参数(对象写法)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
	</head>
	<body>
		
		 <h1>前后端调用</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			/**
			 * GET方式3: 利用对象实现参数传递
			 * 需求3: 查询 name="王昭君" sex=女 age=19
			 * 参数语法:
			 * 	 数据结构: {}
			 * 	 关键字key(固定写法): params 
			 *   value: 用户需要传递的值
			 */
			let user = {
				name: '王昭君', 
				sex: '女',
				age: 19
			}
			
			let url3 = "http://localhost:8090/axios/getUser"
			axios.get(url3,{params : user})
			     .then(promise => {
					 console.log(promise.data)
				 })
		 </script>
	</body>
</html>

delete请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DELETE请求</title>
	</head>
	<body>
		 <h1>前后端调用-DELETE请求测试</h1>
		 <script src="../js/axios.js"></script>
		 <script>
		 
			/* DELETE测试1:
			   需求: 删除ID=232的数据
			 */
			let url = "http://localhost:8090/axios/deleteById?id=232"
			axios.delete(url)
				 .then( promise => {
					 console.log(promise.data)
				 })
			
		 </script>
	</body>
</html>

post请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>POST请求</title>
	</head>
	<body>
		 <h1>前后端调用-POST请求测试</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			
			/**
			 * 需求: 实现用户新增操作
			 * 语法: axios.post(url,新增参数)
			 * 规则: 如果post/put 传递对象则直接赋值.
			 */
			let user = {
				name: '小燕子',
				age: 18,
				sex: '女'
			}
			let url = "http://localhost:8090/saveUser"
			axios.post(url,user)
			     .then(promise => {
					 console.log(promise.data)
				 })
		 </script>
	</body>
</html>

put请求

put请求1
/**
			 * 需求: 要求将id="238" 
			 * 	     改为name="小鬼当家",age=4,sex=男
			 */
			let user = {
				id: 238,
				name: "小鬼当家",
				age: 4,
				sex: "男"
			}
			let url = "http://localhost:8090/axios/updateUser"
			axios.put(url,user)
				 .then(promise => {
					 console.log(promise.data)
				 })
put请求二
/**
			 * 需求2: 要求将name="小燕子"
			 * 	      改为name="小鬼当家",age=18,sex=男
			 * 难点:  如果有多个参数,并且重复时 如何封装?
			 * 解决方案: 1.restFul + 对象 
			 */
			let name = "小燕子"
			let user2 = {
				name: "小鬼当家",
				age: 18,
				sex: "男"
			}
			
			let url2 = `http://localhost:8090/axios/updateUserByName/${name}`
			axios.put(url2,user2)
				 .then(promise => {
					 console.log( promise.data)
				 })
qq_47897831
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax入门教程
qq_22075913的博客
03-31 5146
Ajax 学习目标 了解Ajax的概念和作用 了解同步和异步的区别 能够使用jQuery的$.get()和$.post()发送Ajax请求 能够使用jQuery的$.ajax()方法发送Ajax请求 能够定义和解析json 能够使用Jackson转换json格式 能够使用fastjson转换json格式 第一章-JS的AJAX 知识点- AJAX的概述 1.目标 能够理解异步的概念 2.路径 什么是Ajax 什么是异步 为什么要学习Ajax 3.讲解 3
Ajax 入门
hexiechuangxin的博客
02-13 1624
Ajax 入门
AJAX入门
weixin_46065399的博客
07-09 626
简单入门AJAX
ajax入门经典
05-03
对于基础比较弱的童鞋来说还是不错的一本参考资料
Ajax入门学习教程（一）
10-20
AJAX（Asynchronous JavaScript And XML）翻译成中文就是“异步Javascript和XML”。下面简单给大家介绍了ajax入门学习知识，需要的的朋友参考下吧
AJAX学习笔记上（学习自用）
yayaye717的博客
07-09 954
AJAX学习笔记上（学习自用）
Ajax与Fetch API在Web开发中的性能、用法与未来趋势比较
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-07 1046
headers: {},})Ajax和Fetch各有优缺点，适用于不同的场景。Ajax作为一种传统的技术，在旧的应用和环境中仍然广泛使用，并且具有较高的灵活性。而Fetch作为现代JavaScript中的API，提供了更简洁、功能更强大的方式来处理网络请求，特别适合使用在现代JavaScript应用中。开发者可以根据实际需求和场景选择合适的技术。
AJAX-个人版-思路步骤整理版
weixin_65644655的博客
07-06 948
前置知识：老式的web创建工程方法就是创建项目然后添加web工件，然后添加lib依赖如：tomcat,servlet，等。 传统请求 对于传统请求操作：整体流程也就是创建静态页面， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>演示传统请求，以及传统请求的缺点</title> </head> <body>
针对不支持AJAX异步查询的虚拟空间做跨站点查询
chenfei829的专栏
07-08 248
最近在做一个ASP+ACCESS的企业小站，因为有中文、英文版分开不同空间不同域名的需求。原构想用AJAX做异步查询相关质保数据，但上线了才发现新网的虚拟空间不支持AJAX异步，咨询客服后也没有效的方法。后来想到：远程JS应该是每天的，把数组做成JS的数据，再做数据组的展示，也能达到异步查询的功能。一、生成JS数组的ASP代码。二、展示JS数组数据的写法。
LibreOffice的国内镜像安装地址和node.js国内快速下载网站
小丁的博客
07-08 307
国内镜像包网址：https://mirrors.cloud.tencent.com/libreoffice/libreoffice/
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 852
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
vue-使用Worker实现多标签页共享一个WebSocket
qq_43548590的博客
07-08 1137
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 422
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 178
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
Webkit简介以及工作流程
最新发布
读心悦
07-10 248
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
ajax入门
05-27
Ajax（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术，通过在不重新加载整个页面的情况下，与服务器异步交换数据，实现页面的部分更新。 以下是入门步骤： 1. 创建 XMLHttpRequest 对象（浏览器内置对象）： ```javascript var xmlhttp = new XMLHttpRequest(); ``` 2. 发送请求（使用 GET 或 POST 方法）： ```javascript xmlhttp.open("GET", "url", true); xmlhttp.send(); ``` 3. 监听状态变化： ```javascript xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 处理响应数据 var responseText = xmlhttp.responseText; } } ``` 4. 处理响应数据： ```javascript var responseText = xmlhttp.responseText; ``` 以上是基本的 Ajax 流程，可以通过处理响应数据来更新页面内容，实现动态效果。在实践中，还需注意跨域问题、数据格式等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值