AJAX

发表于 | 分类于

1.AJAX介绍

AJAX主要是实现页面和 web 服务器之间数据的异步传输。
举个简单例子，不采用AJAX的页面，当用户在页面发起请求时，就要进行整个页面的刷新，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，不能进行其他操作。也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低，用户体验差。采用AJAX的页面，可以实现页面的局部更新，而不是整个页面的更新；并且发起请求后，用户还可以进行页面上的其他操作。这就是异步的方式。客户端和服务端间只传递需要的数据，效率高，用户体验性好。

2.如何发送一个ajax请求

  1. 创建一个对象 XMLHttpRequest
    var xhr = new XMLHttpRequest();为了支持ie6以及更早的版本，要 var xhr=new ActiveXObject()
  2. 监听请求成功后的状态变化
  3. 设置请求参数
  4. 发起请求
  5. 操作DOM，实现动态局部刷新

3.监听请求成功的状态变化

  • onreadystatechange：用来监听readyState的变化的
  • readyState：表示当前请求的后台的状态
  • status：表示处理的结果

    当 readyState 等于 4 且状态为 200 时，表示响应已就绪。

4.向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

1
2
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

5.实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

6.jQuery ajax()

语法：jQuery.ajax([settings])
settings可选。用于配置 Ajax 请求的键值对集合。

1
2
3
4
5
6
7
8
9
10
11
12
 $.ajax({
    url: 'json.php',
    type: 'get',
    data: { id: 1, name: '张三' },
    // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
    dataType: 'json',
    success: function (res) {
      // 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
      // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
      console.log(res)
    }
})

参考网页：W3school-AJAX教程