zoukankan      html  css  js  c++  java
  • 从xhr说起

    原生xhr对象存在较多的兼容性,IE6及之前版本使用ActiveXObject对象来创建,IE7以后使用兼容版本的MSXML2.XMLHttp、MSXML2.XMLHttp3.0、MSXML2.XMLHttp6.0.

    ie7之前版本

     1 function createXHR() {
     2     if (typeof arguments.callee.activeXString !== 'string') {
     3         var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
     4         for (var i = 0,len = versions.length;i < len;i++) {
     5             try {
     6                 var xhr = new ActiveXOject(versions[i]);
     7                 arguments.callee.activeXString = versions[i];
     8             } catch (ex) {
     9 
    10             }
    11         }
    12     }
    13     return new ActiveXOject(arguments.callee.activeXString);
    14 }

    ie7、FIreFox、Opera、Chrome及Safari都支持之原生XHR对象

     1 function createXHR() {
     2     if (typeof XMLHttpRequest !== 'undefined') {
     3         return new XMLHttpRequest();
     4     } else if (typeof ActiveXObject !== 'undefined') {
     5         if (typeof arguments.callee.activeXString !== 'string') {
     6             var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
     7             for (var i = 0,len = versions.length;i < len;i++) {
     8                 try {
     9                     var xhr = new ActiveXOject(versions[i]);
    10                     arguments.callee.activeXString = versions[i];
    11                     return xhr;
    12                 } catch (ex) {
    13                     continue;
    14                 }
    15             }
    16         }
    17         return new ActiveXObject(arguments.callee.activeXString);
    18     } else {
    19         throw new Error("no xhr object available");
    20     }
    21 }

    XHR对象用法

    1、调用open,接受三个参数:请求类型,请求链接,请求是否异步

    xhr.open('get', 'test.action', false);

    2、调用send,发送特定数据,如果没有特定数据,也必须传入null,某些浏览器是会检测改参数

    xhr.send(null)

    3、服务器响应后,响应后的数据会自动填充XHR对象的属性

    responseText:响应主体被返回的文本

    responseXML:如果响应内容类型是'text/xml'或'application/xml',这个属性中将包含着响应数据的XML DOM文档

    status: 响应的HTTP状态

    statusText: http状态说明

    我们一般使用是status状态码来检测状态。

    1 xhr.onreadystatechange = function() {
    2     if (xhr.readyState == 4) {
    3         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    4             console.log(xhr.statusText);
    5         } else {
    6             console.log('unsuccessful');
    7         }
    8     }
    9 };

    4、检测readyState属性

    上面没有检测onreadystatechange事件,属于同步请求,我们大部分还是需要使用异步请求,所以我们可以使用上面的函数来监听readyState的每次变化。

    0未初始化,尚未调用open;

    1启动,调用open,尚未调用send;

    2发送,调用send,尚未接受响应;

    3接受,已接受部分数据;

    4完成,接受全部数据。

    每一次的readyState的变化都会触发readyStatechange事件,故而我们可以用过readystate来检测不同阶段。设置onreadystatechange事件必须在open之前。

     1 var xhr = new createXHR();
     2 xhr.onreadystatechange = function(){
     3     if(xhr.readyState == 4){
     4         if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
     5             console.log(xhr.statusText);
     6         }else{
     7             console.log("Request was unsuccessful:" + xhr.status);
     8         }
     9     }
    10 };
    11 xhr.open("get","example.php",true);
    12 xhr.send(null);

    http头部信息

    默认情况浏览器在发送XHR请求同时,发送很多头信息

    Accept: 浏览器能处理的内容类型

    Accept-Charset:浏览器能够显示的字符集

    Accept-Encoding:浏览器能处理的压缩编码

    Accept-Language:浏览器当前设置的语言

    Connection:浏览器与服务器之间连接的类型

    Cookie:当前页面设置的任何Cookie

    Host:发送请求页面所在的域

    Referer:发送请求页面所在的域

    User-Agent:浏览器所有代理用户字符串

    1、设置自定义头信息,setRequestHeader方法,参数为键值对,不过必须在open之后send之前

    2、获取头部自定义信息,getResponseHeader方法,参数为字符串。

    GET请求

    1、get请求参数url的查询字段必须经过正确的编码才行。使用encodeURIComponent进行编码,不能用用encodeURI,这两编码范围不一样。

     参数编码
    1 function addURLParam (url,name,value) {
    2     if (url && name && value) {
    3         url += (url.indexOf("?") == -1 ? "?" : "&");
    4         url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    5     }
    6     return url;
    7 }

    2、post请求

    默认服务器对post请求和提交表单请求并不会一视同仁,必须用程序来读取发送过来的原始数据,从中去有用部分。可以通过设置Content-Type为application/x-www-form-urlencoded来模拟表单。

     1 function submitData(){
     2     var xhr = createXHR();
     3     xhr.onreadystatechange = function (event){
     4         if(xhr.readyState == 4){
     5             if((xhr.status >= 200 && xhr.status < 300)||xhr.status == 304){
     6                 alert(xhr.responseText);
     7             }else{
     8                 alert("Request was unsuccessful:"+ xhr.status);
     9             }
    10         }
    11     };
    12     xhr.open("post","postexample.php",true);
    13     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    14     var form = document.getElementById("user-info");
    15     xhr.send(serialize(form));
    16 }

    浏览器差异

    1、超时设置

    IE8为XHR对象添加了一个timeout属性,表示请求等待响应多少毫秒之后终止。

     1 var xhr = createXHR();
     2 xhr.onreadystatechange = function(event){
     3     try{
     4         if(xhr.readyState == 4){
     5             if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
     6                 alert(xhr.responseText);
     7             }else{
     8                 alert("Request was unsuccessful:"+ xhr.status);
     9             }
    10         }
    11     }catch (ex){
    12         //假设由ontimeout事件处理程序处理
    13     }
    14 };
    15 xhr.open("get","timeout.php",true);
    16 xhr.timeout = 1000;
    17 xhr.ontimeout = function(){
    18     alert("Request did not not return in a second.");
    19 };
    20 xhr.send(null);

    还有一些onload、progress事件,可以通过这两事件做一些特殊的事情。

    附上自己写的xhr地址:https://github.com/schacker/xhr

    附上status各种状态码

    • 100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分
    • 101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议
    • 200 OK 一切正常,对GET和POST请求的应答文档跟在后面。
    • 201 Created 服务器已经创建了文档,Location头给出了它的URL。
    • 202 Accepted 已经接受请求,但处理尚未完成。
    • 203 Non-Authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝
    • 204 No Content 没有新文档,浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的
    • 205 Reset Content 没有新的内容,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容
    • 206 Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它
    • 300 Multiple Choices 客户请求的文档可以在多个位置找到,这些位置已经在返回的文档内列出。如果服务器要提出优先选择,则应该在Location应答头指明。
    • 301 Moved Permanently 客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL。
    • 302 Found 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。
    • 303 See Other 类似于301/302,不同之处在于,如果原来的请求是POST,Location头指定的重定向目标文档应该通过GET提取
    • 304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
    • 305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取
    • 307 Temporary Redirect 和302(Found)相同。许多浏览器会错误地响应302应答进行重定向,即使原来的请求是POST,即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因,HTTP 1.1新增了307,以便更加清除地区分几个状态代码:当出现303应答时,浏览器可以跟随重定向的GET和POST请求;如果是307应答,则浏览器只能跟随对GET请求的重定向。
    • 400 Bad Request 请求出现语法错误。
    • 401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头,浏览器据此显示用户名字/密码对话框,然后在填写合适的Authorization头后再次发出请求。
    • 403 Forbidden 资源不可用。
    • 404 Not Found 无法找到指定位置的资源
    • 405 Method Not Allowed 请求方法(GET、POST、HEAD、Delete、PUT、TRACE等)对指定的资源不适用。
    • 406 Not Acceptable 指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定的不兼容
    • 407 Proxy Authentication Required 类似于401,表示客户必须先经过代理服务器的授权。
    • 408 Request Timeout 在服务器许可的等待时间内,客户一直没有发出任何请求。客户可以在以后重复同一请求。
    • 409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突,因此请求不能成功。
    • 410 Gone 所请求的文档已经不再可用,而且服务器不知道应该重定向到哪一个地址。它和404的不同在于,返回407表示文档永久地离开了指定的位置,而404表示由于未知的原因文档不可用。
    • 411 Length Required 服务器不能处理请求,除非客户发送一个Content-Length头
    • 412 Precondition Failed 请求头中指定的一些前提条件失败
    • 413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求,则应该提供一个Retry-After头
    • 414 Request URI Too Long URI太长
    • 416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头
    • 500 Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求
    • 501 Not Implemented 服务器不支持实现请求所需要的功能。例如,客户发出了一个服务器不支持的PUT请求
    • 502 Bad Gateway 服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答
    • 503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如,Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头
    • 504 Gateway Timeout 由作为代理或网关的服务器使用,表示不能及时地从远程服务器获得应答
    • 505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本
  • 相关阅读:
    【Java】基本类型和引用类型(值传递)
    Linux学习笔记:什么是x86
    Java volatile keyword
    C语言可变參实现參数累加返回
    [Network]Application Layer
    linux下select,poll,epoll的使用与重点分析
    卷积神经网络(CNN)基础介绍
    ScrollView嵌套ExpandableListView显示不正常的问题
    【leetcode】 Unique Binary Search Trees II (middle)☆
    【leetcode】 Unique Binary Search Trees (middle)☆
  • 原文地址:https://www.cnblogs.com/ACMxike20111726/p/6194692.html
Copyright © 2011-2022 走看看