[知了堂学习笔记]_Ajax入门

1.异步交互

a.浏览器发送请求到服务器端
b.服务器端通过与后台业务框架进行数据处理
c.服务器端处理好的数据转换成XML、Json、Text，同时将数据发送给客户端
d.客户端通过XMLHttpReuquest核心对象对数据进行解析处理
e.最后再将解析好数据通过HTML、CSS等技术进行装饰

2.XMLHttpRequest创建

var xmlHttpReq = false;//初始化XmlHttpRequestfunction createXmlHttpRequest(){    if(window.XMLHttpRequest){        xmlHttpReq = new XMLHttpRequest();//在非IE5    }else if(window.ActiveXObject){//在IE5、IE6        try{            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");        }catch(e){            console.log("=====boom=====");        }    }}

3.发送Ajax请求

function sendRequest(url,params){    createXmlHttpRequest();    xmlHttpReq.open("POST", url, true);    xmlHttpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    xmlHttpReq.send(params);    xmlHttpReq.onreadystatechange = function() {        if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){            //数据解析        }    }}

4.XMLHttpRequest响应属性

a.responseXML:接受服务器端响应XML格式数据

b.responseText：接受服务器端响应文本字符串数据

5.XMLHttpRequest 状态属性

a.readyState：监控服务器端响应变化的状态，状态变化由数字0~4组成

0：请求未初始化
1：服务器连接已经建立
2：请求接收
3：请求处理中
4：请求已经完成，且响应已就绪

b.status：监听 Http Status状态码

200：服务器没有问题，数据完好返回
500：服务器后台代码有问题
404：找不到访问资源

6.XMLHttpRequest 事件属性

onreadystatechange:创建回调函数，接收服务器返回的状态和数据（多种写法）