Ajax的简单基础

什么是 AJAX ？

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

同步请求：返回的是整张页面，会刷新整个页面，他是串行的过程，只能同时做一件事。

异步请求：返回的是字符串（页面的部分信息），不会刷新整个页面，不会阻塞当前主线程。

AJAX通过核心对象XMLHttpRequest在后台发起子线程，该子线程负责此次的请求，会请求服务器，服务器会返回一个字符串，该字符串会封装在XMLHttpRequest里的responseText属性中，然后请求返回客户端，可通过xhr.responseText获取服务器返回的字符串，然后通过DOM技术修改DOM树。由于是子线程在发起请求，所以不会阻塞当前显示页面的主线程，即异步请求。由于返回的是字符串且是通过DOM技术在修改DOM树，所以不会刷新整张页面，即局部刷新，这就是我们所说的AJAX异步请求，局部刷新。

应用场景：需要请求服务器，但只需要更新局部页面信息时。

AJAX的开发流程

1、创建核心对象xhr(不同浏览器创建此对象的方式不同)

var xhr;

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xhr=new XMLHttpRequest();

} else {

// IE6, IE5 浏览器执行代码

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

2、初始化xh---->目的：告知xhr以什么方式发送，发送到什么位置且携带什么参数。

get方式：xhr.open(“get”,url?传递参数);

post方式：xhr.open(“post”,url);，

若需要传递参数则需指定参数格式

xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

3、发送异步请求

get方式：xhr.send();

post方式：若无参数xhr.send();

若需要传递参数，则xhr.send(“需要传递给服务器的参数”);

注：从请求发出到请求返回，xhr.readyState的属性（标识xhr的请求状态）会经历以下几个阶段的变化：

=0，表示初始化但并没有发送异步请求

=1，表示已发送异步请求

=2，表示已发送完毕

=3，表示开始返回

=4，表示返回完毕

4、设置监听，通过xhr.onreadystatechange属性

注：xhr.status为协议码，表示请求的状态（例：404,500），当其为200时，表示请求成功

xhr.onreadystatechange = function(){

if(xhr.readyState==4 && xhr.status==200){//返回完整，请求成功

var res = xhr.responseText;//获取返回值

//拿到返回值后可对dom操作，局部刷新页面

}

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body οnlοad="load()">
	</body>
	<script type="text/javascript">
		function  load(){
			
			
			//1.创建核心对象xhr
			var xhr;
			if (window.XMLHttpRequest) { 
				// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
					xhr=new XMLHttpRequest(); 
				} else { 
					// IE6, IE5 浏览器执行代码 
					xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
				}
			
			//2.初始化xhr
			xhr.open("GET","index.html");
			//3.发送异步请求
			xhr.send();
			//4.设置监听
			xhr.onreadystatechange = function(){
			if(xhr.readyState==4 && xhr.status==200){//返回完整，请求成功
			var res = xhr.responseText;//获取返回值
			//拿到返回值后可对dom操作，局部刷新页面
			alert(res);
				}
			}
			
		}
		
		
		
		
		
		
		
		
		
		
	</script>
</html>

还有JQuery对Ajax的封装：

演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table id="testTable">
				<tr>
					<td>中国</td>
					<td>秦国</td>
				</tr>
			
		</table>
		<input type="button" value="异步刷新用户列表" οnclick="testAjax()"/>
	</body>
	<script src="jquery.1.9.2.min.js" type="text/javascript">
	</script>
	<script type="text/javascript">
		
		
		function testAjax(){
				$.ajax({
					type:"get",    //发送请求的方式，默认请求方式为get
					url:"/Jquery/jason.txt",           //发送到什么位置
					success:function(res){//会在返回完整，请求成功时调用，其中的参数是返回值
						
						for(var i=0;i<res.length;i++){
			
							$("#testTable").append("<tr><td>"+res[i].id+"</td><td>"+res[i].name+"</td></tr>");
						}
					},
					dataType:"json"
				});
			}
		
		
		
		
		
		
		
	</script>
	
	
	
	
	
	
	
</html>