Ajax工作原理

发表于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2018年5月记，总结起来就几句话
//创建xmlhttprequest对象
var xhttp xhttp=new XMLHttpRequest();
//使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器
xhttp.open("POST","ajax_info.txt",true);
//调用onreadystatechange函数
xhttp.onreadystatechange = function(){};
//获得服务器的响应
document.getElementById("demo").innerHTML=xhttp.responseText;
然后为了这四句能正确响应，添加必要的判断
返回的响应也可能是各种形式，需要做各种处理
是不是很简单

名称

Asynchronous JavaScript and XML
异步得JavaScript和XML

作用

在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

同步与异步

异步传输是面向字符的传输，它的单位是字符；异步传输是将比特分成小组来进行传送。一般每个小组是一个8位字符，在每个小组的头部和尾部都有一个开始位和一个停止位，它在传送过程中接收方和发送方的时钟不要求一致

同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。
同步传输通常要比异步传输快速得多，同步传输的开销也比较少

包含的技术

  1. 使用CSS和XHTML来表示
  2. 使用DOM模型来交互和动态显示
  3. 使用XMLHttpRequest来和服务器进行异步通信
  4. 使用javascript来绑定和调用
    重点是3，理解XMLHttpRequest对象

XMLHttpRequest属性

onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息

readyState 对象状态值

  • 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
  • 1 (初始化) 对象已建立，尚未调用send方法
  • 2 (发送数据) send方法已调用，但是当前的状态及http头未知
  • 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
  • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

使用ajax的步骤

  1. 创建xmlhttprequest对象，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。
  2. 使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器
  3. 调用onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数
  4. 使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应

示例

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>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc(){
// 1、创建xmlhttprequest对象
var xhttp;
if (window.XMLHttpRequest)
{
	//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	xhttp=new XMLHttpRequest();
}
else
{
	// IE6, IE5 浏览器执行代码
	xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//var xhttp=new XMLHttpRequest();
// 2、使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器
xhttp.open("POST","ajax_info.txt",true);
//xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 3、onreadystatechange函数
xhttp.onreadystatechange = function(){
	if (xhttp.readyState == 4 && xhttp.status == 200) {
		// 4、使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应
		document.getElementById("demo").innerHTML=xhttp.responseText;
}
};
xhttp.send();
}
</script>
</body>
</html>

处理post表单

post表单数据需要使用xmlhttprequest对象setRequestHeader方法增加一个HTTP头。
post表单例子

1
2
3
xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

处理xml

需要放在if (xhttp.readyState == 4 && xhttp.status == 200) {}里面

1
2
3
4
5
6
7
xmlDoc = xhttp.responseXML;
var txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
	txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;

处理json

使用JSON.parse方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
xmlHttp.open("POST","tigongjson.php");
//设置我们的请求头信息
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//需要放在if (xhttp.readyState == 4 && xhttp.status == 200) {}里面
var data=xmlHttp.responseText;
//json字符串转换成为json对象
data=JSON.parse(data);
var str="";
for(var i=0;i<data.length;i++){
	str+="姓名:"+data[i].name+"<br>";
	str+="年龄:"+data[i].age+"<br>";
	str+="性别:"+data[i].sex+"<br>";
};
div1.innerHTML=str;

其他请参考菜鸟教程

参考：