关于ajax的五大步骤

简介

AJAX = 异步 JavaScript 和 XML

AJAX是一种在无须重新加载整个页面的情况下，能够更新部分网页的技术。

ajax五个基本步骤

1.创建一个异步对象xmlhttp

var xmlhttp= new XMLHttpRequest();

关于XMLHttpRequest 的对象的三个重要的属性：

• onreadystatechange：请求状态改变事件
• readyState：请求状态码
• status：http状态码
• responseText：获得字符串形式的响应数据
• responseXML：或者XML形式的响应数据

 2.设置请求方式和请求地址 通过异步对象的open(method,url,async)

第一个参数：method：请求的类型；GET 或 POST

第二个参数：url：文件在服务器上的位置

第三个参数：async：true（异步）或 false（同步）,这个永远传true，因为AJAX存在的意义就是发异步请求。

xmlhttp.open("GET","01-ajax-get.php",true);

 3.发送请求

通过异步对象的send()发送请求

xmlhttp.send();

 4.监听状态的变化

通过异步对象的onreadystatechange 事件来监听发送的状态变化：

当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，继而实现响应。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当readyState改变时，就会触发onreadystatechange事件。

readyState存有 XMLHttpRequest 的状态。总共5个状态：从0到4发生变化：

• 0: 请求未初始化，还没有调用 open()。
• 1: 服务器连接已建立**，但是还没有发送，还没有调用 send()。
• 2: 请求已接收，正在处理中（通常现在可以从响应中获取内容头）。
• 3: 请求处理中，通常响应中已有部分数据可用了，没有全部完成。
• 4: 请求已完成，且响应已就绪 当状态为4时，此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。

 

5.处理返回的结果

根据状态的变化，处理返回的结果，但在处理结果之前得判断一下，我们请求是否是成功的。通过异步对象的另一个属性status，表示http状态码，通过这个状态码来判断请求是否成功，当成功的时候处理成功返回的的结果。

//4.监听状态变化
xmlhttp.onreadystatechange = function(){
 // 判断当前状态改变是请求完毕的状态吗
 if (xmlhttp.readyState === 4) {
	if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
		// 	5.处理返回的结果；
		//console.log("成功的接收到服务器返回的数据");
       //通过异步对象的responseText属性来获取服务器返回的字符串
       console.log(xmlhttp.responseText);
	}else{
		console.log("不成功！");
	}	
 }
}