ajax基本操作

josion.

已于 2022-09-16 14:37:12 修改

阅读量82

点赞数

分类专栏： js 文章标签： ajax

于 2022-04-12 22:09:34 首次发布

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

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ajax技术

原始的网页开发方式是前后端合一的，代码写在一起，我请求一个地址，服务器就以相应正文的形式返回给我一个页面。Ajax的出现就改变了这一现象，我们可以借此获取所需的特定数据，在不重载整个页面的情况下进行数据更新。

Ajax为什么可以异步

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

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

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

ajax请求注意事项

用对象接收而不使用@RequestBody注解情况

 /**
     * 需求: 查询name=tomcat age=18 sex=女的用户
     * 要求使用:restFul
     * URL: http://localhost:8090/user/tomcat/18/女
     * restFul的优化:
     *  如果{参数名称}与对象中的属性名称一致,
     *      则SpringMVC动态的为对象赋值,
     *      @PathVariable 可以省略
     * 注意事项:
     *      前后端的参数的传递必须保持一致!!!!
     */
    @GetMapping("/user/{name}/{age}/{sex}")
    public User restGetUser(User user){
        //执行后续的业务操作 userService
        return user;
    }

 /**
     * URL: http://localhost:8090/getUserByUser?id=1&name="张三"
     * 参数: user对象的数据
     * 返回值: User
     */
    @GetMapping("/getUserByUser")
    public User getUserByUser(User user){
        //1.SpringMVC如果解析到参数是对象 先获取其中的Get方法
        // getId()/getName()......
        //2.将方法get去除首字母小写~~~id1111/name/age/sex
        //3.实例化一个User对象之后调用setxxx()方法实现赋值
        //4.最终方法中获取一个实例化的User对象
        //String id = request.getParameter("id");
        return user;
    }

JSON嵌套

JS中循环写法
基础循环写法

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

in关键字

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

of 关键字

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

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">111</td>
				<td align="center">发到付</td>
				<td align="center">333</td>
				<td align="center">人呀</td>
			</tr> -->
		</table>
	</body>
</html>

同源策略

览器的地址与Ajax请求地址如果满足 HTTP请求协议/请求的域名/端口号要求3项必须相同则满足同源策略

跨域解决策略

JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

核心知识: 利用 <script src属性=“获取远程服务器数据”> 实现跨域访问.

CORS 跨域资源共享

跨域资源共享( CORS ) ,通过Http 响应头信息标识哪些网址可以访问服务器.现在几乎所有的浏览器默认支持CORS. 在请求之前会进行"预检" 如果预检成功,则在一段时间之后无需校验(30分钟).

josion.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax基本操作

Ajax为什么可以异步同步:当用户发起请求时,如果后端服务器没有返回数据,此时用户页面无法展现. 一直出于加载的状态 (整个页面同时刷新)异步原因: 有Ajax引擎步骤:用户将请求发送给Ajax引擎. 之后JS继续向下执行.Ajax引擎接收用户请求之后,通过代理的方式访问后端服务器.后端服务器接收请求之后,执行业务操作,最终将响应的结果返回值代理服务器(Ajax引擎)引擎通过回调函数的方式返回给用户数据.JSON嵌套JS中循环写法基础循环写法//JS可以将接收的JSON串动态转化
复制链接

扫一扫