js权威指南——18章脚本化http(一)基础ajax

概述

ajax的主要特点是使用脚本操纵HTTP和WEB服务器进行数据交换，不会导致页面重载。微博应用可以使用ajax技术把用户的交互数据记录到服务器中，也可以开始只显示简单页面，之后按需加载额外的数据和页面组件来提升应用的启动时间。

comet：在comet中，web服务器发起通信并异步发送消息到客户端。

实现ajax和comet的方式有多种

-  使用<img>元素的src属性，参数作为src的查询值传给web服务器，服务器返回透明图片或不可见的图片。
 缺点为数据传输为单向的。
-  使用<iframe>   元素，返回一个带有响应内容的html文档，并将其返回给web浏览器。
 脚本通过遍历iframe的文档对象获取信息。缺陷:受限于同源策略的影响。
-  <script>的src属性，能设置url并发起HTTP GET请求。它可以跨域通信而不受同源策略的影响。
服务器响应采用json编码，执行脚本时JavaScript解析器自动将其解码。由于使用JSON的数据格式，也叫JSONP
- XMLHttpRequest API,它定义了用脚本操纵HTTP的API。

18.1 使用XMLHttpRequest

HTTP请求头由4部分构成

HTTP请求方法
正在请求的URL
一个可选的请求头集合，其中可能包括身份验证信息
一个可选的请求主体

发起HTTP请求的步骤，必须按照顺序进行调用否则会发生异常

1.对xmlHttpRequest进行实例化

//对ie7之前进行兼容
if(window.XMLHttpRequest===undefined){
    window.XMLHttpRequest=function(){
        try{
            return new ActiveXObject("Msxml2.XMLHTTP.6.0");
        }catch(e1){
            return new ActiveXObject("Msxml2.XMLHTTP.3.0");
        }catch(e2){
            throw new Error("XMLHttpRequest is not supported")
        }
    }
}

var request=new XMLHttpRequest();//对xmlHttpRequest进行实例化

2.指定方法和url
方法：GET POST DELETE HEAD OPTIONS PUT
URL：相对文档的url，或指定绝对URL，须符合同源原则
example

    request.open('GET',"data.csv");

3.设置请求头
```
 request.setRequestHeader("content-type","text/plain");
```
请求头重复设置不会被覆盖，而是包含多个值
不能自己指定的头：Content-Length 、Date 、Referer、 User-Agent
4.指定可选的主体并发送

request.send(null);//get请求没有主体

取得响应

服务器返回的HTTP响应包含3部分

一个数字和文字组成的状态码，用来显示请求的成功或者失败
一个响应头集合
响应主体

可以通过XMLHttpRequest对象的属性和方法使用：

status和statusText属性以数字和文本的形式返回HTTP状态码。这些属性保存标准的HTTP值，像200和“OK”表示成功请求，404和“Not Found”表示URL不能匹配任何资源。
使用getResponseHeader()和getAllResponseHeaders()能查询响应头。
响应主题可以从responseText属性中得到文本形式的，从responseXML属性中得到Document形式的。

常量	值	含义
UNSENT	0	open()未调用
OPENED	1	open()已调用
HEADERS_RECEIVED	2	接收到头信息
LODADING	3	接收到响应主题的信息
DONE	4	响应完成

使用例子

function getText(url,callback){
    var request=new XMLHttpRequest();
    request.open("POST",url);
    request.onreadystatechange=function(){
        if(request.readyState==4&&request.status==200){
            var type=request.getResponseHeader("Content-Type");
            if(type.match(/^text/)){
                callback(request.responseText);
            }
        }
    }
    request.send(null);
}

当request第三个参数是false时，实现同步。

常见的mime类型：

text/plain, text/html,text/css 获取request.responseText
text/xml 获取 request.responseXML
application/json 获取JSON.parse(request.responseText)

编码请求主体

表单数据编码格式

   使用等号把名字和值分开，使用&分开名值对
   表单数据编码格式的正式MIME类型：application/x-www-form-urlencoded
   js对象的表单编码形式
   {
       find：“pizza”，
       radius："1111km"
   }

JSON编码

指定头Content-Type
mime类型：application/json
JSON.stringify(data);//将对象序列化

XML编码请求

XMLHttpRequest没有预先指定头，会自动设置一个合适的头

multipart/form-data

当html表单同时包含文件上传元素和其他元素时，必须使用该请求来用POST方法提交表单

var formData=new FormData()//对formdata进行序列化
formData.append(name,value);

HTTP进度事件

下载进度
1. 调用send(）时会触发loadstart()事件
2. 加载服务器响应，触发progress事件，50ms
3. 事件完成，触发load事件（需要确定状态码）
  请求无法完成
  - 超时，timeou事件
  - 中止，abort事件
  - 网络错误，error事件.
上传进度
XMLHttpRequest对象的属性upload属性，值为一个对象，定义方法addEventListense(),progress的集合。

js权威指南——18章 脚本化http(一)基础ajax

概述

18.1 使用XMLHttpRequest

取得响应

编码请求主体

HTTP进度事件

猜你喜欢

js权威指南——18章脚本化http(一)基础ajax