ajax中相关知识点的总结

1. 什么是ajax：
异步javascript和XML
（1）同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
（2）异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯式。
无刷新读取数据=》无需加载整个页面的情况下，刷新页面某一部分。
常用的地方：用户注册和聊天室。
[1] ajax基础

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

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

注意：保存的txt文件也必须是utf-8编码，否则不是乱码就是报错。
[2] 请求并显示静态txt文件

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

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

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

2. 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}.接受服务器的返回

总结ajax请求数据代码如下：

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();
                }
            }
        }
    }
}

需要注意的三个点：

【1】XMLHttpRequest取得相应

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

【2】readystate的五种返回值所代表的意义：

• 0（未初始化） 还没调用open（）方法
• 1（载入）已经调用send方法(),正在发送请求
• 2（载入完成）send（）方法已经完成，已收到相应
• 3（解析）正在解析响应内容
• 4（完成）相应内容解析完成，可在客户端调用。

【3】ajax中status几种常态说明：

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

---