ajax请求的四个步骤

1.什么是ajax：

异步javascript和XML。

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

无刷新读取数据。无需加载整个页面的情况下，刷新页面某一部分。
常用的地方：用户注册和聊天室。

ajax基础

var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//ajax能且仅能从服务器上读取文件信息
    ajax('aaa.txt',function(str){alert(str);});
}

有一个aaa.txt的文件，内容为“大家好”，则通过ajax的读取，能在浏览器中显示出txt的内容。

==注意==：保存的txt文件也必须是utf-8编码，否则不是乱码就是出错

请求并显示静态txt文件

字符集编码：utf-8编码
缓存、阻止缓存，利用url中的‘abc.txt?t=’+new Data().getTime()（毫秒数）

for(var i=0;ifunction(){
        ajax((this.index+1)+".txt?t="+new Date().getTime(),function(str){
            oDiv.innerHTML = str;
        })
    }
}

有三个文件，分别为1.txt：数据一；2.txt：数据二；3.txt：数据三；
通过上述数据则可以在点击相应按钮时显示相应txt文本里的内容；

动态数据：请求js（或json）文件

在服务器上读到的东西全部是以文本（string）的方式，因此无法拿到数组或者json，需要用eval。
eval(str)的使用：讲字符串转换成js代码。
服务器上更多的是放的json或由json组成的数组。

ajax请求的步骤

1.创建XMLHttpRequest

不同浏览器使用的异步调用对象也有所不同，在IE浏览器中异步调用使用的是XMLHTTP组件中的XMLHttpRequest对象，而在Firefox浏览器中则直接使用XMLHttpRequest组件。

    var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();//ie6及以下不兼容，针对主流浏览器
    }else{                             // 针对ie5, ie6
        xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
    }

2.连接服务器

    xmlHttp.open('GET',url,true);  //xmlhttp.open(method,url,async)

method 包含 get 和 post两种方法
url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）

get和post的区别：
（1）是有那个get请求时，参数在url中显示，而使用post方式，则不会显示出来。
（2）使用get请求发送数据量小，post请求发送数据量大
（3）get请求需注意缓存问题，post请求不需要担心这个问题。

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST 没有数据量限制）
3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.向服务器端发送请求

    xmlHttp.send();

4.接受服务器的返回

    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){   //判断交互是否成功
            if(xmlHttp.status == 200){    //获取服务器返回的数据   获取纯文本数据
                //alert('成功：'+xmlHttp.responseText);
                fnSucc(xmlHttp.responseText);
            }else{
                //alert('失败');
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    }

总的代码如下：

function ajax(url,fnSucc,fnFaild){
    // 参数;1.连接服务器的地址 2.成功时函数 3，失败时函数
    // 1. 创建xmlhttprequest对象
    var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();//ie6及以下不兼容，针对主流浏览器
    }else{                             // 针对ie5, ie6
        xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
    }
    //2. 连接服务器
    xmlHttp.open('GET',url,true);  //xmlhttp.open(method,url,async)
    // method 包含 get 和 post两种方法 url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）
    //3.向服务器端发送请求
    xmlHttp.send();
    //4.接受服务器的返回
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){   // 判断交互是否成功
            if(xmlHttp.status == 200){      //获取服务器返回的数据  获取纯文本数据
                //alert('成功：'+xmlHttp.responseText);
                fnSucc(xmlHttp.responseText);
            }else{
                //alert('失败');
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    }
}

XMLHttpRequest取得相应
- responseText:获得字符串形式的响应数据
- responseXML：获得xml形式的响应数据
- status和statusText：以数字和文本形势返回http转态码
- getAllResponseHeader():获得所有的相应
- getResponseHeader()：查询相应中的某个字段的值
- readState属性

readystate的五种返回值所代表的意义：
- 0（未初始化） 还没调用open（）方法
- 1（载入）已经调用send方法(),正在发送请求
- 2（载入完成）send（）方法已经完成，已收到相应
- 3（解析）正在解析响应内容
- 4（完成）相应内容解析完成，可在客户端调用。

ajax中status几种常态说明：
- 100——客户必须继续发出请求
- 101——客户要求服务器根据请求转换HTTP协议版本
- 200——成功
- 201——提示知道新文件的URL
- 300——请求的资源可在多处得到
- 301——删除请求数据
- 404——没有发现文件、查询或URl
- 500——服务器产生内部错