当前位置:   article > 正文

JS红宝书读书笔记 — 21.Ajax与Comet

JS红宝书读书笔记 — 21.Ajax与Comet

21.Ajax与Comet

21.1.XMLHttpRequest对象
  • 创建

    var xhr = new XMLHttpRequest();
    // IE7+, Firefox等等
    
    • 1
    • 2
21.1.1.XHR的用法
  • open():启动一个请求以备发送

    // 接受三个参数:请求类型,请求URL(相对于执行代码的当前页面或绝对路径),是否异步发送请求
    xhr.open("get", "example.php", false); 
    
    • 1
    • 2
  • send():发送请求

  • abort():取消异步请求

  • 收到响应

    • 响应的数据会自动填充XHR对象的属性

      • responseText:作为响应主体被返回的文本
      • responseXML:如果响应的内容类型是"text/xml"或者"application/xml",这个属性将保存包含响应数据的XML DOM文档,对非XML数据而言,responseXML属性将为null
      • status:响应的HTTP状态
      • statusText:HTTP状态说明
    • 检测 status 属性并操作

      if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
      } else {
        alert("Request was unsuccessful: " + xhr.status);
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
  • XHR对象的 readyState 属性表示请求/响应过程的当前活动阶段

    • 0:未初始化。尚未调用open()方法

    • 1:启动。已经调用open()方法,但尚未调用send()方法

    • 2:发送。已经调用send()方法,但尚未接收到响应

    • 3:接受。已经接收到部分响应数据

    • 4:完成。已经接收到全部响应数据,并且已经可以在客户端使用了

      var xhr = new XMLHttpRequest(); // 0
      xhr.open('get', 'http://localhost:3000/readystate'); // 1
      xhr.onreadystatechange = function() { // 2, 3, 4
          alert(xhr.readyState);
        	if(xhr.readyState == 4) {
            	console.log(xhr.responseText);
          }
      };
      xhr.send();
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
21.1.2.HTTP头部信息
  • 设置属性

    • Accept:浏览器能够处理的内容类型
    • Accepy-Charset:浏览器能够显示的字符集
    • Accept-Encoding:浏览器能够处理的压缩编码
    • Accept-Language:浏览器当设置的语言
    • Connection:浏览器与服务器之间连接的类型
    • Cookie:当前页面设置的任何Cookie
    • Host:发送请求的页面所在的域
    • Referer:发送请求的页面的URI
  • 用法

    // 在调用 open() 方法之后且调用 send() 方法之前调用 setRequestHeader()
    xhr.open("get", "example.php", true);
    xhr.setRequestHeader("MyHeader", "MyValue");  // key && value
    xhr.send(null);
    
    • 1
    • 2
    • 3
    • 4
  • 获取属性

    var myHeader = xhr.getResponseHeader("MyHeader");
    var allHeaders = xhr.getAllResponseHeaders();
    
    • 1
    • 2
21.1.3.GET请求
  • 查询字符串中的每个拿书的名称和值必须使用encodeURIComponent() 进行编码

  • 所有的键值对都必须以和号 & 分隔

    xhr.open("get", "example.php?name1=value1&name2=value2", true);
    
    • 1
    function addURIParam(url, name, value) {
    	url += (url.indexOf("?") == -1 ? "?" : "&");
    	url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
      return url;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
21.1.4.POST请求
  • 使用XHR模仿表单提交

    xhr.open("post", "postexample.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var form = document.getElementById("user-info");
    xhr.send(serialize(form));
    
    • 1
    • 2
    • 3
    • 4
  • 发送相同的数据,GET请求的速度最多可达POST请求的两倍

21.2.XMLHttpRequest 2级
21.2.1.FormData
var data = new FormData();
data.append("name", "ming");

xhr.open("post", "postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息
21.2.2.超时设定
21.2.3.overideMimeType()方法
  • 用于重写XHR响应的MIME类型
var xhr = creatXHR();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);
  • 1
  • 2
  • 3
  • 4
21.3.进度事件
  • loadstart:在接收到响应数据的第一个字节时触发
  • progress:在接收到响应期间持续不断地触发
  • error:在请求发生错误时触发
  • abort:在因为调用abort( )方法而终止连接时触发
  • load:在接受到完整的响应数据时触发
  • loadend:在通信完成或触发error、abort或load事件后触发
21.3.1.load事件
var xhr = createXHR();
xhr.onload = function() {
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  	alert(xhr.responseText);
	} else {
  	alert("Request was unsuccessful: " + xhr.status);
	}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 只要浏览器接收到服务器的响应,不管其状态如何,都会触发load事件
21.3.2.progress事件*
21.4.跨域资源共享
  • 来源于跨域安全策略,默认情况下XHR对象只能访问域包含它的页面位于同一个域中的资源,这种安全策略可以预防某些恶意行为

  • CORS( Cross-Origin Resource Sharing,跨域资源共享 )

    • 使用自定义的HTTP头部让浏览器与服务器进行沟通

    • 发送请求时,需要额外附加Origin头部,其中包含请求页面的源信息( 协议、域名和端口 ),以便服务器根据这个头部信息来决定是否需要给予响应

      //example
      Origin: http://www.nczonline.net
      
      • 1
      • 2
    • 如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin 头部回发相同的源信息,如果是公共资源,可以回发*

      Access-Control-Allow-Origin: http://www.nczonline.net
      
      • 1
    • 请求和响应都不包含cookie信息

21.4.1.IE对CORS的实现
  • IE8引入了XDR类型,缓解了CSRF和XSS
21.4.2.其他浏览器对CORS的实现
  • 通过XMLHttpRequest对象实现了对CORS的原生支持
21.4.3.Preflighted Requests
  • CORS通过一种叫做Preflighted Requests的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法,以及不同类型的主题内容

  • 使用方法

    • 客户端

      Origin: http://www.nczonline.net
      Access-Control-Request-Method: POST     // 逗号隔开
      Access-Control-Request-Headers: NCZ
      
      • 1
      • 2
      • 3
    • 服务端

      Access-Control-Allow-Origin:  http://www.nczonline.net
      Access-Control-Allow-Origin: POST, GET
      Access-Control-Allow-Origin: NCZ
      Access-Control-Max-Age: 1728000
      
      • 1
      • 2
      • 3
      • 4
  • Preflight请求结束后,结果将按照响应中指定的时间啊缓存起来,而为此付出的代价只是多发送一次HTTP请求

21.4.4.带凭据的请求
  • 默认情况下跨域请求不提供凭据( cookie,HTTP认证及客户端SSL证明等 )

  • 通过将 withCredentials 属性设置为true,可以指定某个请求应该发送凭据

  • 如果服务器接受带凭据的请求,会用下面的HTTP头部来响应

    Access-Control-Allow-Credentials: true
    
    • 1
  • 如果发送的是带凭据的请求,但服务器的响应中没有包含这个头部,那么浏览器就不会把响应交给JS

21.4.5.跨浏览器的CORS
function createCORSRequest(method, url) {
	var xhr = new XMLHttpRequest();
  if("withCredentials" in xhr) {
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
}
var request = createRequest("get", "http://www.somewhere-else.com/page/");
if(request){
  request.onload = function() {
    // 对response进行处理
  };
  request.send();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
21.5.其他跨域技术
21.5.1.图像Ping
  • 一个网页可以从任何网页中加载图像,不用担心跨不跨域

  • 是在线广告跟踪浏览量的主要方式

  • 请求通常是以查询字符串的形式发送的,而响应可以是任意内容

  • 通过图像Ping,浏览器得不到任何具体的数据,但通过侦听load和error事件,它能知道响应是什么时候接收到的

  • 实现

    var img = new Image();
    img.onload = img.onerror = function() {
    	alert("Done");
    };
    img.src = "http://www.example.com/test?name=ming"
    
    • 1
    • 2
    • 3
    • 4
    • 5
  • 缺点

    • 只能发送GET请求
    • 无法访问服务器的响应文本,只能用于浏览器与服务器间的单向通信
21.5.2.JSONP
  • JSONP由两部分组成:回调函数和数据

    • 回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指定的
    • 数据就是传入回调函数中的JSON数据
  • 原理

    • JSONP通过动态

21.5.3.Comet#
  • 实现方式
    • 长轮询
21.5.4.服务端发送事件*
21.5.5.Web Sockets*
21.5.6.SSE与Web Socket2*
21.6.安全
  • CSRF( Cross-Site Request Forgery ) 跨站请求伪造
    • 未被授权的系统会伪造自己,让处理请求的服务器认为它是合法的
    • 解决方法:验证发送者是否有权限访问相应的资源
      • 要求以SSL连接来访问可以通过XHR请求的资源
      • 要求每一次请求都要附带经过相应算法计算得到的验证码
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码探险家/article/detail/836757
推荐阅读
相关标签
  

闽ICP备14008679号