认识 AJAX 请求 访问 数据

AJAX

一、什么是Ajax？

利用ajax技术，通过前后端数据交互，从而改变页面内容同时页面不用刷新，提高了用户体验

二、Ajax的运行

AJAX必须依赖服务执行，即使用http/https协议来运行。

三、创建Ajax核心对象

// W3C标准：
var xhr = new XMLHttpRequest();
// IE标准： 
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

// 兼容处理
var xhr;
if(window.XMLHttpRequest){
     
	xhr = new XMLHttpRequest();
} else {
     
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

四、建立连接

// 语法：
xhr.open(type, url, true);

open() 方法中:

• 第1个参数指请求的发送方式，值为get或post。
• 第2个参数指请求的url路径。
• 第3个参数指请求是异步还是同步，如果写true表示异步（默认true），写false表示同步。

五、发送请求

// 语法：
xhr.send();

如果是get方式发送请求，send()命令中不用写任何参数

如果是post方式发送请求，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

六、接收响应

// 就绪状态变化的事件函数
xhr.onreadystatechange = function(){
     
	// 如果就绪状态为 4 ， 即：请求已完成，且响应已就绪
	// status 状态码为 200  即： “OK” 
	if(xhr.readyState == 4 && xhr.status == 200){
     
		// 一般用 responseText 获取后端传回的数据
		alert(xhr.responseText);
	}
}