【AJAX】Ajax中XMLHttpRequest的请求响应及触发事件

【Ajax介绍】

在介绍ajax之前我们先来说一下同步和异步

同步：就是在一段时间内只做一件事，当浏览器访问服务器时，客户端只能等待服务器的响应，不能做其他事情。比如：输入网址访问页面、a标记的默认跳转、submit按钮的表单提交

异步：就是在一段时间内，可以同时做很多件事，当浏览器访问服务器时，不耽误用户在网页上做其他的操作。比如：用户的重复性验证、聊天室

Ajax是什么

AJAX 全称（Asynchronous JavaScript and XML），是异步的JavaScript和XML。传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。而ajax的大优点就是异步性，可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。

本质上讲就是，使用js提供的XMLHttpRequest对象异步的向服务器发送请求，并接受响应数据（格式是 xml(已过时)）AJAX中，服务器响应回来的是部分的数据而不是完整的页面，并且可以以无刷新的效果来更改页面中的局部内容。

【获取Ajax核心对象-XMLHttpRequest】

XMLHttpRequest是ajax的基础，它用于后台服务器交换数据，这意味着，可以在不重新加载网页的情况下，对网页某部分进行更新。下面我们简称 xhr。

XMLHttpRequest的标准创建：

var xhr=new XMLHttpRequest();

IE8以下版本不支持上面的标准创建，采用下面的创建方式：

var xhr=new ActiveXObject("Microsoft.XMLHttp");

为了避免麻烦，在编程过程中，可以通过window.XMLHttpRequest判断浏览器是否支持XMLHTTPRequest（），如果 window.XMLHttpRequest的值是null的话，说明需要通过 ActiveXObject()创建，否则 需要通过 XMLHttpRequest() 来创建。

		var xhr; 
		//判断浏览器是否支持 XMLHttpRequest
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			//浏览器不支持 XMLHttpRequest
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}

【XMLHttpRequest的请求响应及触发事件】

请求

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

方法	描述
open(method，url，isAsyn)	创建请求： method：请求的类型（get或post） url：文件在服务器上的位置 isAsyn：true（异步）或false（同步）
send(body)	发送/提交请求： body=null ——没有主体的提交方式如get提交 body=string类型数据——有请求主体的提交方式如post提交

使用get提交方式，发送请求数据：

在请求地址后，拼接请求参数(查询字符串)
		...
		xhr.open("get","xx.php?name=value&name1=value1",true);
		...

		ex:
		xhr.open("get","check.php?uname=zs&upwd=123",true);
		在 check.php 中，如何获取 uname 和 upwd 值?
		$uname=$_REQUEST["uname"];
		$upwd=$_REQUEST["upwd"];

使用post方式发送请求：

1、提交的请求数据
提交的请求数据需要按照指定的格式拼好，放在 send() 中传递

xhr.send("name1=value1 & name2=value2");

2、设置一个请求消息头
POST 提交方式，必须将 Content-Type 的请求消息头更改为 application/x-www-form-urlencoded
在发送请求之前：

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                关于get提交和post提交的区别，详细可参考这篇博客：get与post传输

响应

如需获得来自服务器的响应，需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	接收字符串形式的响应数据。
responseXML	接收XML 形式的响应数据。

responseText 属性返回字符串形式的响应，因此可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

其他属性

属性	描述
readyState - 属性	作用：表示xhr对象的请求状态，由 0 - 4 表示 5个状态 0 : 请求尚未初始化 1 : 已经打开到WEB服务器的连接，正在向服务器发送请求 2 : 请求完成 3 : 正在接收服务器端的响应 4 : 接收响应数据成功 注意：当 readyState的值为4的时候，表示所有的响应都已经接收完毕。
status - 属性	作用：服务器的响应状态码，目前只记住200即可 当值为200时，表示服务器已经正确的给出所有的响应
onreadystatechange - 事件	作用：当 xhr 的readyState 属性值发生改变的时候，要自动激发的操作。

onreadystatechange语法：

xhr.onreadystatechange = function(){
//每当xhr.readyState的值，发生变化时，要执行的操作。
	//判断 xhr.readyState 为4的时候 并且 xhr.status 为 200的时候，才能获取正常的响应数据
	if(xhr.readyState == 4 && xhr.status == 200){
			//可以接收响应回来的数据 
			//responseText 属性，表示服务器响应回来的文本
			var resText=xhr.responseText;
			}
	}

【发送异步请求步骤汇总】

1、创建 / 获取 XHR 对象

2、创建请求 ：xhr.open(method，url，isAsyn)

3、设置 xhr 的 onreadystatechange 事件
判断readyState 以及 status 的值，并接收响应

xhr.onreadystatechange=function(){
				if(xhr.readyState==4&&xhr.status==200){
					xhr.responseText;
				}
			}

4、发送请求:xhr.send();