AJAX学习1

1.创建Ajax对象
var xhr=new XMLHttpRequest();
2.告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.example.com'); //get或者request地址
3.发送请求
xhr.send();
4.获取服务器端与客户端的相应数据
xhr.onload=function(){console.log(xhr.responseText)}
5.JSON.parse(); //将Json字符串转换为Json对象
6.get请求方式
xhr.open('get'，'http://www.aidneg.com')
7.POST请求方式
xhr.setRequestHeader('Content-Type'，'application/x-www-form-urlencoded')//设置请求参数的类型
xhr.send('name=zhangsan&age=20')//发送请求
7.1请求参数的格式：
1.application/x-www-form-urlencoded
2.application/json //{name:'zhangsan',age:'20'}
在请求中指定Content-Type属性值为application/json,告诉服务器端当前请求参数的格式是Json;
JSON.stringify();//将Json对象转换为json字符串
8.Ajax状态码
在创建ajax对象，配置ajax对象，发送请求，以及接受完服务端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码
0：请求未初始化(还没有调用open())
1:请求已经简历，但是还没有发送
2：请求已经发送
3:请求正在处理，通常相应中已经有部分数据
4:响应已经完成
xhr.readyState //获取Ajax状态码
获取服务器端的响应
onreadystatechange 事件 当Ajax状态码发生变化时将自动触发该事件。
xhr.onreadystatechange=function(){
console.log(xhr.readyState);
if(xhr.readState ==4){
console.log(xhr.resonseText);
}
}
9.Ajax错误处理
1.网络畅通，服务器能接收到请求，服务器端返回的结果不是预期结果。通过xhr.status获取http状态码
2.当网络中断时会触发onerr事件
10.Ajax封装
问题：发送一次请求代码过多，发送多次请求代码冗余且重复
解决方案:将请求代码封装到函数中，发请求时调用函数即可。
11.
xhr.getResponseHeader('Content-Type') //获取响应头中的数据
responseText =JSON.parse(responseText) //将json字符串转化为json对象
12. 采用模板引擎
1.将模板引擎的库文件引入到当前页面

2.准备art-template模板