jQuery中ajax异步请求的四种方式

1.Ajax原理

特点: 局部刷新:异步调用(加载)
调用原理说明:
1.用户将请求发给AJAX引擎进行处理.之后等待引擎返回数据.
2.ajax引擎接收到用户的请求之后.,代替用户访问后端服务器,
3.后端服务器接收请求之后,执行业务处理. 并且将返回值返回.
4.ajax引擎收到返回值结果之后,要在第一时间通知给用户. 利用回调函数将数据传给客户端.ajax调用成功.

2.异步请求方式

2.1$.ajax()方式

$.ajax()：是最核心的方法。

$.ajax()方法是一个有力并且直接的创建Ajax请求的方法。使用一个选项对象作为参数传给它，这个选项对象的属性配置了完成请求所需要的所有指令。
$.ajax()提供了成功以及失败的回调函数。
语法：
$.ajax({name:value, name:value, … })

<script type="text/javascript">
  	$(function() {
  		$.ajax({
			type:"POST",
			url:"/findAjax",
			//data:{"id":100,"name":"喵"}
			data:"id=100&name=喵",
			success:function(result){
				for(var user of result){
					let id=user.id;
					let name=user.name;
					let age=user.age;
					let sex=user.sex;
					let tr="<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td>/tr>"
					$("#tab1").append(tr);
					}
			},
			error:function(){
				alert("请求失败!!!")
			},
			cache:false,//默认值true（缓存）
			async:true//默认值true异步、false同步
		});
  	})
</script>

参考: jQuery ajax() 方法.

2.2$.get()方式

语法：
$.get(url地址,param传递的参数,回调函数,返回值类型)
注：
参数：可选；
返回值类型：可以根据数据自动匹配类型（一般可以省略）

<script type="text/javascript">
	$(function(){
			$.get("/findAjax",function(result){
				//1.可以使用js中的for循环
				/* for(let i=0; i<result.length;i++){
					
				} */
				
				/* for(let index in result){
					console.log(index);
				} */
			
				for(let user of result){
					let id = user.id;
					let name = user.name;
					let age = user.age;
					let sex = user.sex;
					let tr  = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
					$("#tab1").append(tr);
				}
			});
	})
</script>

2.3$.post()方式

语法：
$.post(url地址,param传递的参数,回调函数,返回值类型)
注：
参数：可选；
返回值类型：可以根据数据自动匹配类型（一般可以省略）

<script type="text/javascript">
	$(function(){
			$.post("/findAjax",function(result){
				for(let user of result){
					let id = user.id;
					let name = user.name;
					let age = user.age;
					let sex = user.sex;
					let tr  = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
					$("#tab1").append(tr);
				}
			});
	})
</script>

2.4$.getJSON()方式

$.getJSON()是专门为ajax获取json数据而设置的，并且支持跨域调用。
注：JSON是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。
语法：
$.getJSON(url地址,param传递的参数(可选),回调函数)

<script type="text/javascript">
	$(function(){
			$.getJSON("/findAjax",function(result){
				for(let user of result){
					let id = user.id;
					let name = user.name;
					let age = user.age;
					let sex = user.sex;
					let tr  = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
					$("#tab1").append(tr);
				}
			});
	})
</script>

拓展: jQuery API 中文文档.