Ajax的相关问题

最新推荐文章于 2024-08-16 23:08:28 发布

李少侠666

最新推荐文章于 2024-08-16 23:08:28 发布

阅读量137

点赞数

分类专栏：三阶段文章标签： java

原文链接：https://blog.csdn.net/qq_16804847/article/details/119104063?spm=1001.2014.3001.5501

版权

三阶段专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.前后端调用流程

在这里插入图片描述
关于JSON：**JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。**它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成

2.Ajax

2.1 Ajax的介绍

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

局部刷新
异步访问

2.2 Ajax为什么可以异步

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

异步原因: 有Ajax引擎
步骤:

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

2.3 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>

3.跨域

3.1同源策略

要素1: 浏览器地址: file:///D:/workspace/cgb2105/webDemo/userList.html 展现页面
要素2: Ajax请求地址: http://localhost:8090/getAll
要求: 如果浏览器的地址与Ajax请求地址如果满足 HTTP请求协议/请求的域名/端口号 要求3项必须相同则满足同源策略. 浏览器可以解析返回值,则请求正确.

3.2跨域解决策略

1.JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的
核心知识: 利用 <script src属性=“获取远程服务器数据”> 实现跨域访问.
2.跨域资源共享( CORS ) ,通过Http 响应头信息标识哪些网址可以访问服务器.现在几乎所有的浏览器默认支持CORS. 在请求之前会进行"预检" 如果预检成功,则在一段时间之后无需校验(30分钟).

李少侠666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的相关问题

1.前后端调用流程关于JSON：**JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。**它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成2.Ajax2.1 Ajax的介绍Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, Jav
复制链接

扫一扫

专栏目录