AJAX学习笔记（2）----使用原生JS实现异步交互

实现异步交互的五个步骤

1.创建HttpRequest对象
2.注册回调函数
3.设置连接信息
4.发送数据开始与服务器进行交互
5.利用回调函数处理数据

---

1：创建HttpRequest对象

var xmlhttp;

if(window.XMLHttpRequest){
    xmlhttp= new XMLHttpRequest();
    if(xmlhttp.overrideMimeType){
        xmlhttp.overrideMimeType('text/xml');
}

else if(ActiveXObject){
var activename=['MSXML2.XMLHTTP','Microsoft.XMLHttp'];
    for(var a=0;a<activename.length;a++){
        try{
            xmlhttp=ActiveXObject(activename[i]);
            break;
        }catch(e){
        }

}

tips:

1.根据浏览器所支持的属性不同来区分浏览器

浏览器	window.XMLHttpRequest	ActiveXObject
Firefox	√	×
Mozillar	√	×
Opera	√	×
Safari	√	×
IE7/IE8	√	√
IE6	√	×

---

2.不同的浏览器需要有不同的创建方式：

浏览器	创建方式
Firefox….	xmlhttp= new XMLHttpRequest();
IE6	xmlhttp=ActiveXObject(activename[i]);

---

3.针对某些特定版本的mozillar浏览器的BUG进行修正:

    if(xmlhttp.overrideMimeType){
        xmlhttp.overrideMimeType('text/xml');
    }

如果来自服务器的响应没有 XML mime-type 头部，则一些版本的 Mozilla 浏览器不能正常运行。

---

4:根据不同的浏览器版本选择相应ActiveX插件:

    var activename=['MSXML2.XMLHTTP','Microsoft.XMLHttp'];
    for(var a=0;a<activename.length;a++){
        try{
            xmlhttp=ActiveXObject(activename[i]);
            break;
        }catch(e){
        }

小技巧：

- 如果匹配到相应的ActiveX控件就跳出循环
- 如果没有匹配到就回抛异常，进行下一个循环

---

2.注册回调函数

xmlhttp.onreadystatechange=callback;

---

tips:

1: xmlhttp.onreadystatechange

该属性直接指向该函数(不要添加括号否则就是直接返回return的结果)
无论请求成功或失败之后均会调用callback

---

3：设置连接信息

xmlhttp.open("Get","Regisiter?uname="+uname,true);

---

tips:

1:第一个参数：设置http请求的方式： GET/POST(大小写皆可)
2:第二个参数：设置提交后台的url
3:第三个参数：true:同步交互/false:异步交互

---

4.发送数据开始与服务器进行交互

---

    xmlhttp.send(null);----GET
    xmlhttp.send(“data1=value&data2=value2”);----POST

---

tips：

提交一共有两种方式这取决于你open中设置的方式
GET:直接在URL中提交即可
POST:需要在send中提交
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-unlencoded");

xmlhttp.send("username="+uname+"&password=456");

---

5.利用回调函数处理数据

---

    function callback(){
    if(xmlhttp.readyState==4){
        if(xmlhttp.status==200){
            var responsetaxt=xmlhttp.responseText;
            $('#is_have').html(responsetaxt);
        }
    }

}

---

tips：

1：判断服务器的就绪状态：

if(xmlhttp.readyState==4){}

数字	状态
0	请求未初始化（还没有调用 open()）。
1	请求已经建立，但是还没有发送（还没有调用 send()）。
2	请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3	请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4	响应已完成；您可以获取并使用服务器的响应了。

---

2：判断http请求状态：

if(xmlhttp.status==200){}

数字	状态
200	交互成功
400	错误请求
404	没有发现文件、查询或URl
500	服务器产生内部错误

---

http请求状态

---

3：获取返回的信息：

var responsetaxt=xmlhttp.responseText;