码迷,mamicode.com
首页 > Web开发 > 详细

XMLHttpRequest

时间:2016-07-13 19:22:57      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:

浏览器在XMLHttpRequest类上定义了他们的HTTP API
XMLHttpRequest类的每个实例表示了一个独立的请求/相应对
HTTP请求包括:HTTP请求方法(post还是get),请求URL,一个可选的请求头集合,一个可选的请求主体
HTTP响应包括:一个数字或者文字组策划过的状态吗(显示请求的成功失败),一个响应头集合,响应主体
步骤:
1.实例化XMLHttpRequest对象 :
var request=new XMLHttpRequest();
2.指定请求

request.open("method","url");
第一个参数:指定HTTP方法或动作,“GET”适用于当URL完全猴子腚请求资源,当请求对服务器没有任何副作用以及当服务器的响应是可缓存的。

                 “POST"常用语form表单,请求主体中包含额外数据(表单数据)且这些数据常存储到服务器上的数据库中(副作用)

第二个参数:url,如果使用绝对url,协议主机和端口常匹配所在文档的对象内容:跨域的请求常常会报错

  3.设置请求头

request.setRequestHeader(“Content-Type”,"text/plain");
对相同请求头调用多次setRequestHeader并不会覆盖,而是赋予多次的值。

复制代码
   /*以post方式发送数据给服务器*/    
function postMessage(msg){
        var request=new XMLHttpRequest();
        request.open("post","handlerPost");
        request.setRequestHeader(‘Content-Type‘,‘text/plain;charset=UTF-8‘);
        request.send(msg);
    }
复制代码
一个HTTP响应:状态吗,响应头集合,响应主体。

XMLHttpRequest对象的属性和方法中可以获得以上值:

1.status和statusText属性以数字和纯文本的格式赶回HTTP状态码。200:请求成功;404:URL不能匹配服务器上任何资源。

2.getResponseHeader()和getResponseHeaders()查询响应头

3.响应主体冲responseText属性中得到文本形式,从responseXML得到Document形式

 

XMLHttpRequest对象通常异步使用:发送请求之后,send()方法立即返回,之后再返回响应。为了在响应准备就绪是得到通知,必须使用readystatechange事件。

XMLHttpRequest的readyState属性指定了HTTP请求的状态,4:响应完成,3:接收到响应主体,2:接受到头信息。

复制代码
    //postMessage("This is post message!");
    //发送一个HTTP    GET请求以获得指定URL内容
    //当响应成功到达,验证它是否是纯文本
    //如果是,把它传递给指定回调函数
    function getText(url,callback){
        var request=new XMLHttpRequest();
        request.open("GET",url);
        request.onreadystatechange=function(){
            //如果请求完成,则它是成功的
            if(request.readyState===4 && request.status===200){
                var type=request.getResponseHeader("Content-Type");
                if(type.match(/^text/))  //确保相应是文本
                    callback(request.responseText);
            }
        }
    }
复制代码
同步响应:
复制代码
    //同步响应
    //发起同步的HTTP GET请求以获得指定URL的内容
    //返回响应文本,或如果请求不成功或响应不是文本就报错。
    function getTextSync(url){
        var request=new XMLHttpRequest();
        request.open("GET",url,false); //把fasle作为第三个参数传递给open(),那么send()方法将阻塞直到请求完成
        request.send(null);

        if(request.status!==200) throw new Error(request.statusText);

        var type=request.getResponseHeader(‘Content-Type‘);
        if(!type.match(/^text/)) throw new Error("Expected textual respomse;got:"+type);

        return request.responseText;
    }
复制代码
响应解码
复制代码
 ///发送HTTP GET响应以获取指定URL内心哦那个
    //当响应到达时候,把它解析后的XML Document对象,解析后的JSON对象或字符串形式传递给回调
    function get(url,callback){
        var request=new XMLHttpRequest();
        request.open(‘GET‘,url);
        request.onreadystatechange=function(){
            if(request.readyState===4 && request.status===200){
                var type=request.getResponseHeader("Content-Type");
                if(type.indexOf("xml") !== -1 && request.responseXML){ 
                    callback(request.responseXML); //Document对象响应
                }else if(type=== ‘application/json‘){
                    callback(JSON.parse(request.responseText)) //JSON响应
                }else {
                    callback(request.responseText);
                }
            }
        };
        request.send(null);
    }
复制代码
不用考虑特殊编码的另一个相应类型application/javascript亦或text/javascript,如果你想使用XMLHttpRequest请求Javascript脚本,然后使用eval()的话,因为<script>能发起跨域请求(JSONP就是运用了这一点),但是XMLHttpRequest API则禁止。

 

web服务器也可使用二进制数据(例如,图片文件)相应HTTP请求。

复制代码
    //使用XMLHttpRequest下载Blob
    //以Blob的形式获取URL指定的内容,并将其传递给指定的回调函数
    function getBlob(url,callback){
        var xhr=new XMLHttpRequest(); //创建一个新的XHR对象
        xhr.open("GET",url); //指定要获取内容的URL
        xhr.responseType="blob"; //以BLOB形式
        xhr.onload=function(){ //onload比onstatechange更容易
            callback(xhr.response); //注意,这里是response不是.responseText
        };
        xhr.send(null);
    }
复制代码
服务器响应的正常解码是建立在服务器端发送的"Content-type"和MIME类型上的。

如果服务器端发送过的是XML文档,但是设置“Content-type”错误,将导致XMLHttpRequest对象将使用错误的编码来相应。

所以overrideMimeType方法将重写服务端返回的MIME类型,注意该方法要在send()之前调用

    //无论服务器端设置的Content-type是什么类型,豆浆把它当作文本类型来处理
    request.overrideMimeType("text/plain;charset=utf-8");
表单编码的请求
复制代码
//将对象{find:"pizza",zipcode:01234,radius:"1km"}变成表单编码的格式 find=pizza&zipcode=01234$radius=1km 的形式
    function encodeFormData(data){
        if(!data) return "";
        var pairs=[];
        for(var name in data){
            if(!data.hasOwnProperty(name)) continue; //跳过继承方法
            if(typeof  data[name] === "function") continue;//跳过方法
            var value=data[name].toString();
            name=encodeURIComponent(name.replace("%20","+"));
            value=encodeURIComponent(value.replace("%20","+"));
            pairs.push(name+"="+value);
        }
        return pairs.join(&);
    }
复制代码
HTTp POST请求包含一个请求主体,它包含客户端传递给服务端的数据。表单数据编码格式的正确MIME类型:

当POST方法提交这种顺序的表单数据时,必须设置“Content-type”请求头为这个值。

复制代码
//使用表单数据发起一个HTTP POST请求
function postData(url,data,callback){
        var request=new XMLHttpRequest();
        request.open("POST",url);
        request.onreadystatechange=function(){
            if(request.readyState===4 && callback)
                callback(request);
        };
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send(encodeFormData(data)); //发送表单编码数据
    }
复制代码
HTTP GET请求没有请求主体:

复制代码
 //使用表单编码数据发起get请求
    function getData(url,data,callback){
        var request=new XMLHttpRequest();
        request.open("GET",url+"?"+encodeFormData(data));
        request.onreadystatechange=function(){
            if(request.readyState===4 && callback) callback(request);
        };
        request.send(null);
    }
复制代码
JSON编码请求

复制代码
    //使用JSON编码主题发起HTTP POST请求
    function postJSON(url,data,callback){
        var request=new XMLHttpRequest();
        request.open("POST",url);
        request.onreadystatechange=function(){
            if(request.readyState===4&&callback)
                callback(request);
        };
        request.setRequestHeader("Content-Type","application/json"); 
        request.send(JSON.stringify(data));
    }
复制代码
HTTP进度事件
在XHR2规范中,XMLHttpRequest对象在请求的不同阶段将触发不同类型的事件,所以不再需要检查readyState属性

 

当调用send()事件时,触发单个loadstart事件,当正在加载服务器的相应时,XMLHttpRequest对象会发生progress事件,通常每隔50毫秒左右,所以可以使用这些事件给用户反馈请求进度。如果请求快速完成,它可能不会触发progress事件。当事件完成时,触发load事件。

 

一个完成的请求不一定是成功的请求,例如:load事件的处理程序应该检车XMLHttpRequest对象的status状态来确定收到的是“200 OK”而不是“400 Not Found”的HTTP响应。

 

HTTP请求无法完成有三种情况,对应三种事件

1.请求超时:timeout时间

2.请求中止:abort事件

3.阻止请求完成:比如太多重定向这样的网络错误:error事件

 

对于任何具体的请求,浏览器只会触发load,abort,timeout和error事件中的一个,一旦这些事件触发后,将触发loadend事件。需要在send()之前进行事件监听,下面是下载事件被触发:

复制代码
var req = new XMLHttpRequest();

req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);

req.open();

...

// progress on transfers from the server to the client (downloads)
function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(evt) {
  alert("The transfer is complete.");
}

function transferFailed(evt) {
  alert("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  alert("The transfer has been canceled by the user.");
}
复制代码
下面是上传事件被触发:

复制代码
var req = new XMLHttpRequest();

req.upload.addEventListener("progress", updateProgress);
req.upload.addEventListener("load", transferComplete);
req.upload.addEventListener("error", transferFailed);
req.upload.addEventListener("abort", transferCanceled);

req.open();
复制代码
判断是否支持progress事件

    if("onprogress" in (new XMLHttpRequest())){
        //支持progress事件
    }
和progress事件相关联的事件对象上有三个有用的属性

1.loaded属性是目前传输的字节数值

2.total属性是自"Content-Length"头传输的数据的整体长度(单位字节)

3.知道上面的长度则lengthComutable为true,反之亦然。

    request.onprogress=function(e){
        if(e.lengthComputable){
            progress.innerHTML=Math.round(100* e.loaded/ e.total)+"% Complete";
        }
    };
中止请求和超时
复制代码
    ///实现超时
    //如果响应成功到达,传入responseText给回调函数
    //如果响应在timeout毫秒内没有到达,中止这个请求
    //浏览器可能在abort()后出发“readystatechange”
    //如果是部分请求结果到达,设置可能设置status属性
    //所以需要设置一个标记,当部分且超时的响应到达时不会调用回调函数
    ///如果使用load事件就没有这个风险
    function timedGetText(url,timeout,callback){
        var request=new XMLHttpRequest();
        var timedout=false;
        //启动计时器,在timeout毫秒之后将终止请求
        var timer=setTimeout(function(){
            timedout=true;
            request.abort();
        },
        timeout);
        
        request.open("GET",url);
        request.onreadystatechange = function(){ //定义事件处理程序
            if(request.readyState !== 4) return; //忽略未完成的请求
            if(timedout) return;                 //忽略终止请求
            clearTimeout(timer);                //取消等待的超时
            if(request.status === 200)          //如果请求成功
                callback(request.responseText); //把response传给回调
        };
        request.send(null);
    }
复制代码
跨域请求
作为同源策略的一部分,XMLHttpRequest对象通常仅可以发起和文档具有相同服务器的HTTP请求,这个限制关闭了安全漏洞,但是同时也阻止了大量适合使用的跨域请求。

CORS支持的跨域请求工作不需要做任何的事情,但是安全细节要了解

1.给open()方法传递的用户名和密码将绝对不会通过跨域请求发送

2.跨域请求不会包含其他的任何用户证书:cookie和HTTP身份验证令牌(token)通常不会作为请求内容发送

 View Code
出现的bug

No Access-Control-Allow-Origin header is present on the requested resource. Origin http://localhost is therefore not allowed access.


XMLHttpRequest2 进行跨域访问时需要服务器许可,不是任何域都接受跨域请求的。先来看一下从 Yahoo YQL 域返回的响应头(Response Header ):注意:

复制代码
1 HTTP/1.1 200 OK
2 Set-Cookie: AO="o=1&s=1&dnt=1"; Version=1; Domain=yahoo.com; Max-Age=630720000; Expires=Sat, 18-Jun-2033 10:07:41 GMT; Path=/
3 Access-Control-Allow-Origin: *
4 Cache-Control: public, max-age=899
5 Content-Type: text/xml;charset=utf-8
6 Content-Encoding: gzip
7 Vary: Accept-Encoding
8 Date: Sun, 23 Jun 2013 10:07:40 GMT
复制代码
注意里面有一条标识 Access-Control-Allow-Origin:* ,这就表示允许跨域访问,所以可以正常访问该域,而对于其他没有该标识的域就会出现禁止访问提示。

 

解决方法:

1.在服务器端设置response头,php是<?php header(Access-Control-Allow-Origin: *); ?>,当然会让你的服务器网站变得很危险

2.在chrom浏览器中设置

  1)安装Chrom插件(你得先翻了墙( ̄▽ ̄)"):点击这里

  2)在windows中window+r打开运行,输入

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
还要注意的一点是:chrome不支持本地运行Access-Control-Allow-Origin,所以为了可以让chrome浏览器在头部发送Access-Control-Allow-Origin,你必须结合你的hosts文件将localhost指定成其他域名:127.0.0.1 localhost yourdomain.com

JSONP
复制代码
function foo(data)
{
    // do stuff with JSON
}

var script = document.createElement(script);
script.src = //example.com/path/to/jsonp?callback=foo

document.getElementsByTagName(head)[0].appendChild(script);
复制代码

 

XMLHttpRequest

标签:

原文地址:http://www.cnblogs.com/socool-hu/p/5667139.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!