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");