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>