Ajax的四步操作

ajax

第一步 创建 XMLHttpRequest 核心对象—》(new)

普通写法

var xhr=new XMLHttpRequest();//有兼容问题   IE6及一下不支持

兼容写法

var xhr=null;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{
	    xhr=new ActiveXObject("Microsoft.XMLHttp");//IE6及一下
	}

封装写法

function getXhr(){
	var xhr=null;
		if(window.XMLHttpRequest){
			xhr=new XMLHttpRequest();
		}else{
			xhr=new ActiveXObject("Microsoft.XMLHttp");//IE6及一下
		}
			return xhr;
}
			
var xhr=getXhr();			

第二步 注册监听

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

因为需要循环将数据加载到页面上， json格式无法循环

解析方法1：

JSON.parse()
var data=JSON.parse(xhr.responseText);
console.log(data);

解析方法2：

eval()
var data = eval("("+ xhr.responseText +")");
	console.log(data);
         		
//可以调用函数进行具体操作
  fn(json);
}
 }

状态值（判断请求的）
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

状态码（判断响应的）
1xx：信息响应类，表示接收到请求并且继续处理
2xx：处理成功响应类，表示动作被成功接收、理解和接受
3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
5xx：服务端错误，服务器不能正确执行一个正确的请求
200: "OK“
304: 文件未改变，页面缓存
404: 未找到页面
500：后台的问题

第三步 建立连接

xhr.open(method,url,async);

method：请求类型，分为get和post方式；格式为字符串；
get: HBuilder的小环境测试
post:必须要搭建集成环境

url：请求地址；格式为字符串；
Async：是否异步；（true：异步；false：同步

例如：

xhr.open('get','one.txt',true);
xhr.open('post','one.txt',true);
post 添加http头，发送信息至服务器时内容编码类型 
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步 发送数据

Get方式与post方式发送的参数不一样
格式：xhr.send（string）；

为get方式请求时，发送null；
xhr.send(null);

为post方式请求时，发送具体参数xhr.send("name='lily'&age=18");