Ajax技术详解与实例演示-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39129186/article/details/118975501

Ajax是一种异步数据获取技术，允许网页局部刷新而不需整体刷新。本文介绍了Ajax的基础概念、工作原理，提供了jQuery实现Ajax的示例，并讲解了模版字符串的使用。通过示例代码展示了如何使用Ajax获取远程数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

–1，概述

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

是异步的技术，用来局部刷新网页。

好处是：在不刷新整个网页的前提下，局部更新数据

特点:
1. 局部刷新
2. 异步访问

-2语法

$.ajax({

type: , //请求的方式，get/post

url: , // 交给具体的哪个程序去处理

contentType: , //请求时的数据的类型 text html jpg json

data: , //请求时要携带的参数

dataType: , //服务器返回数据的类型 text html jpg json

success: function(data){ //请求成功后自动调用的

},

error: function(data){ //请求失败后自动调用的

}

})

<!DOCTYPE html>

<html>

<head>

<script src="js/jquery-1.8.3.min.js"></script>

<script>

$(function(){    //文档就绪事件

$.ajax({    //发起Ajax请求数据

type: "POST",

url: "http://p.3.cn/prices/mgets",

contentType: "application/json;charset=utf-8",

data: { //拼接的参数

"skuIds": "J_100003717483"

},

dataType: "jsonp",

success: function(data) {   //返回的结果

//[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]

$('#p1').text("返回数据：" + JSON.stringify(data));

$('#p2').text("商品编号：" + data[0].id);

$('#p3').text("商品价格： " + data[0].op);

},

error: function(data) {

alert("提交失败" + JSON.stringify(data));

}

});

});

</script>

</head>

<body>

<p id="p1">这是p1</p>

<p id="p2">这是p2</p>

<p id="p3">这是p3</p>

</body>

</html>

2 Ajax为什么可以异步

同步:
当用户发起请求时,如果后端服务器没有返回数据,此时用户页面无法展现. 一直出于加载的状态 (整个页面同时刷新)

异步原因: 有Ajax引擎
步骤:
1. 用户将请求发送给Ajax引擎. 之后JS继续向下执行.
2. Ajax引擎接收用户请求之后,通过代理的方式访问后端服务器.
3. 后端服务器接收请求之后,执行业务操作,最终将响应的结果返回值代理服务器(Ajax引擎)
4. 引擎通过回调函数的方式返回给用户数据.

3 jQuery下载

网址: https://jquery.com/

4 jQuery前后端调用

4.1 JS中循环写法

基础循环写法

//JS可以将接收的JSON串动态转化为JS对象
	$.get(url,function(data){
		//循环遍历返回值
		for(var i=0; i<data.length;i++){
			console.log(data[i])
		}
	})

2.in关键字

//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
	//循环遍历返回值
	//in 遍历数组下标
	for(index in data){//从0开始
		console.log(data[index])
	}
})

3.of 关键字

//JS可以将接收的JSON串动态转化为JS对象
				$.get(url,function(data){
					//循环遍历返回值
					//of 关键字 直接获取遍历对象
					for(user of data){
						console.log(user)
					}
				})

5 模版字符串

说明: 模版字符串语法从ES5以后提供的
语法: 反引号
特点:
1. 被反引号包裹的都是字符串可以随意换行可以保留代码结构.
2. 可以动态的从对象中获取数据语法: ${对象.属性}

用法:

	for(user of data){
				//获取数据信息
				var tr = 
				`<tr align="center">
					<td>${user.id}</td>
					<td>${user.name}</td>
					<td>${user.age}</td>
					<td>${user.sex}</td>
				 </tr>`
				 
				 //将tr标签追加到表格中
				 $("#tab1").append(tr)
			}

6 Ajax获取远程数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo</title>
		<!-- html是一种解释执行的语言 -->
		<!-- 导入JS函数类库 -->
		<script src="jquery-3.6.0.min.js"></script>
		<script>
			
			//让页面加载完成之后,再次调用
			//编程方式: 函数式编程
			$(function(){
				
				/**
				 * 常见Ajax写法:
				 * 	 1.$.ajax({})
				 *   2.$.get()   get类型
				 *   3.$.post()
				 * 	 4.$.getJSON()
				 */
				
				/**
				 * 语法说明:
				 * 	$.get(url,data,function(data){},dataType)
				 * 参数说明:
				 * 		1.url: 请求服务器的网址
				 * 		2.data: 前端向服务器传递的参数  字符串
				 * 		3.回调函数: 请求成功之后开始回调
				 * 		4.dataType: 返回值结果的数据类型. 可以省略自动判断
				 *	
				 */
				var url = "http://localhost:8090/getAll"
				/**
				 * 关于data语法: id=100  name="tom"
				 * 写法: 25上课!!!!
				 * 		1.JS对象写法
				 * 		  {id:100,name:"tom"}
				 * 		2.字符串拼接
				 * 		  id=100&name=tom
				 */
				//var data = "id=100&name=tom"
				var data = {id:100,name:"tom"}
				
				//JS可以将接收的JSON串动态转化为JS对象
				$.get(url,function(data){
					//循环遍历返回值
					//of 关键字 直接获取遍历对象
					for(user of data){
						//获取数据信息
						var tr = 
						`<tr align="center">
							<td>${user.id}</td>
							<td>${user.name}</td>
							<td>${user.age}</td>
							<td>${user.sex}</td>
						 </tr>`
						 
						 //将tr标签追加到表格中
						 $("#tab1").append(tr)
					}
				})
			})
			
				/**
				 * 传统Ajax 功能强大
				 */
				$.ajax({
					url: "http://localhost:8090/getAll",
					type: "get",
					data: {id:100,name:"tomcat"},
					success: function(data){
						console.log(data)
					},
					error: function(data){//浏览器的返回值
						console.log(data)
					},
					async: true  //默认为true 异步   false 同步调用
				})

				
			
			/* 
			 1. 基本循环
			 for(var i=0; i<data.length;i++){
			 	console.log(data[i])
			 }
			 
			 2.in 关键字
			 for(index in data){
			 	console.log(data[index])
			 }
			 
			 */
			
		</script>
	</head>
	<body>
		<table id="tab1" border="1px" align="center" width="80%">
			<tr>
				<td colspan="4" align="center"><h1>用户列表</h1></td>
			</tr>
			<tr>
				<td align="center">编号</td>
				<td align="center">姓名</td>
				<td align="center">年龄</td>
				<td align="center">性别</td>
			</tr>
			<!-- <tr>
				<td align="center">100</td>
				<td align="center">黑熊精</td>
				<td align="center">3000</td>
				<td align="center">男</td>
			</tr> -->
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 ajax提交数据并入库</title>
		
		<script src="old/jquery-1.8.3.min.js"></script>
		<script>
			function fun(){
				$.ajax({
					type: "get" , //要使用的请求方式
					url:"http://localhost:8080/car/save" , //要访问的服务器程序
					data: {  //请求参数
						"id":"10", 
						"name":"BMW",
						"price":"9.9" 
					},
					success: function(data){ //成功时的方案 
						console.log(data);
						console.log(data.id);
						alert(100);
					}
				})
			}
		</script>
	</head>
	<body>
		
		<a onclick="fun()" href="#">点我提交数据</a>
		
	</body>
</html>