JS——Ajax

使用

语法：

ajax(url,funSu,funFa);

参数说明：

url：文件路径，绝对或相对都行。

funSu：读取成功执行函数

funFa：读取失败执行函数

实例：

请求并显示静态txt文件

ajax("fileName.txt", function(str){    alert(str);},function(){    alert("失败")});

字符集编码

请求文件、JS、HTML编码要统一。

否则，会出现乱码。

缓存，阻止缓存

浏览器会自动缓存，这样就可能导致了用户想得到的信息不能及时更新。

缓存原理：

浏览器是根据域名进行缓存的，
只要url不变，在一定的时间就会读取缓存的数据显示到页面，而不是向服务器请求。

阻止缓存：

使用ajax请求文件的时候，文件路径加上一个一直在变化的参数，
例如使用Date对象的getTime方法。

实例：

//上面的url写成下面这样"fileName.txt?t="+new Date().getTime()

获取数组或json文件

//arr.txt(json)[{a:1, b:2},{c:11, d:12}]//ajax获取ajax("arr.txt?t="+new Date().getTime(), function(str){    var arr = eval(str);    //现在获取a的值    alert(arr[0].a);},function(){    alert("失败")});

获取文件后，显示在页面

//arr.txt[{user:'Tim',pass:'123456'},{user:'Chen',pass:'234567'},{user:'Kly',pass:'345678'}]//ajaxhtml<input id = "btn1" type = "button" value = "出来吧" /><ul id = "ul1"></ul>jsvar oBtn = document.getElementById("btn1");var oUl  = document.getElementById("ul1");oBtn.onclick = function(){    ajax("arr.txt="+new Date().getTime(), function(str){    var arr = eval(str);        for(var i = 0; i < arr.length; i++){            var oLi = document.createElement("li");            oLi.innerHTML = "用户名：<strong>'arr[i].user+'<strong>密码：<span>'arr[i].pass+'</span>";            oUl.appendChild(oLi);        }    },function(){        alert("失败")    });}

HTTP请求

请求过程

完整的请求过程：

1. 建立TCP连接；
2. web浏览器向web服务器发送请求命令；
3. web浏览器发送请求头信息
4. web服务器应答
5. web服务器发送应答头信息
6. web服务器向浏览器发送数据
7. web服务器关闭TCP连接

简化一下：

1. 创建Ajax对象（XMLHttpRequest对象）
2. 连接到服务器
3. 发送请求
4. 接收返回值

请求组成部分

请求一般有以下几个部分组成：

1.HTTP请求的方法或动作，比如是GET还是POST请求；2.正在请求的URL地址；3.请求头，包含一些客户端环境信息，身份验证信息等；4.与请求头之间，有一空行。   请求体（请求正文），可以包含客户提交的查询字符串信息，表单信息等。

GET && POST 请求方式

• GET

  使用URL传递参数容量小（2000个字符）安全性差有缓存

• POST

  不通过URL容量大（2G）安全性较好没有缓存

XMLHttpRequest发送请求（IE10+）

• 调用HTTP请求：
  open(method , url , async)

• 将请求发送到服务器上：
  send(string)

async :

同步（false）/异步（true）

默认是true，所以可以不写。

XMLHttpRequest获取响应（IE10+）

响应组成部分

1.一个数字和文字组成的状态码，用来显示请求是成功还是失败；2.响应头，和请求用一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等。3.响应体（响应正文）

我们通过onreadystatechange事件获取响应信息。

首先，我们需要通过readyState属性和HTTP状态码，监听一下服务器接收完请求没有。


readyState属性：

状态码：

简单来讲，网页只有在HTTP状态码为200，readyState为4的情况下才能正确响应。

响应操作方法

           reponseText: 获得字符串形式的响应数据            reponseXML: 获得XML形式的响应数据    status、statusText: 以数字和文本形式返回HTTP状态码getAllResponseHeader(): 获取所有的响应报头   getResponseHeader(): 查询响应中的某个字段的值

实例：

获取一个a.txt文件

html<input id = "btn1" type = "button" value = "读取">js//1.创建Ajax对象（IE7+）var oAjax = new XMLHttpRequest( );//2.连接服务器oAjax.open('GET','a.txt',true);//3.发送请求oAjax.send();//4.接收返回值oAjax.onreadystatechange = function(){    //读取完成    if( request.readyState === 4){        //读取成功        if(request.status === 200){            alert("成功："+oAjax.responseText);                }else{            alert("失败"+oAjax.status)        }    }}

JSON格式使用Ajax

主要差异在读取成功后

//读取成功        if(request.status === 200){            //使用JSON.parse()解析数据            var data = JSON.parse(oAjax.responseText);            if(data.success){                alert("成功："+oAjax.responseText);                }else{                alert("失败："+oAjax.status);            }           }else{            alert("失败"+oAjax.status)        }

XMLHttpRequest Level2

http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

https://segmentfault.com/a/1190000004322487