JS复习:二十一章

一、XHR对象

  Ajax( )对象的核心技术就是XMLHttpRequest对象。

二、XHR的用法

  在使用XHR对象时,要调用的第一个方法是open( ),它接受3个参数:要发送的请求类型("get"、"post")、请求的URL和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子:

  xhr.open("get","example.php","false");

  要发送特定的请求,必须像下面这样调用send( )方法:

  xhr.open("get","example.txt","false";);

  xhr.send(null);

  在接收到响应之前还可以调用abort( )方法来取消异步请求:xhr.abort( );

三、GET请求

  使用GET请求经常会发生一个错误,就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent( )进行编码,然后才能放到URL的末尾;而且所有名-值对儿都必须由和号(&)分隔,如下面的例子所示。

  xhr.open("get","example.php?name1=value1&name2=value2",true);

四、POST请求

  POST请求应该把数据作为主体提交,而GET请求传统上不是这样。POST请求的主题可以包含非常多的数据,而且格式不限。在open( )方法第一个参数的位置传入"post",就可以初始化一个POST请求。

  xhr.open("post","example.php",true);

五、XML2级

1.FormData

  现代Web应用中频繁使用的一项功能就是表单数据的序列化。FormData为序列化表单以及创建与表单格式相同的数据提供了便利。下面的代码创建了一个FormData对象,并向其中添加了一些数据。

  var data=new FormData( );

  data.append("name","Nicholas");

  这个append( )方法接收两个参数:键和值,分别对应表单字段的名字和字段中包含的值。而通过向FormData构造函数中传入表单元素,也可以用表单元素的数据预先向其中填入键值对:

  var data=new FormData(document.forms[0]);

  创建了FormData的实例后,可以将它直接传给XHR的send( )方法,如:xhr.send(new FormData(form));

2.超时设定

  IE8为XHR对象添加了一个timeout属性,表示请求在等待多少毫秒之后就终止。在给timeout设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,就会触发timeout事件。

3.overrideMimeType( )方法

  overrideMimeType( )方法用于重写XHR响应的MIME类型。比如,服务器返回的MIME类型是text/plain,但数据中实际包含的是XML。根据MIME类型,即使数据是XML,responseXML属性中仍然是null。通过调用overrideMimeType( )方法,可以保证把响应当作XML而非纯文本来处理。

  var xhr=createXHR( );

  xhr.open("get","text.php",true);

  xhr.overrideMimeType("text/xml");

  xhr.send(null);

  调用overrideMimeType( )方法必须在send( )方法之前,才能保证重写响应的MIME类型。

六、进度事件

  1.与客户端服务器通信有关的事件:

    (1)loadstart:在接收到响应数据的第一个字节触发。

    (2)progress:在接收响应期间持续不断地触发。

    (3)error:在请求发生错误时触发。

    (4)abort:在因为调用abort( )方法而终止连接时触发。

    (5)load:在接收到完整的响应数据时触发。

    (6)loadend:在通信完成或者触发error、abort或load事件后触发。

七、跨源资源共享

  通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。

  CORS背后的思想:使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应式应该成功,还是应该失败。

  比如一个简单的使用GET或POST发送的请求,它没有自定义的头部,而主体内容是text/plain。在发送该请求时,需要给它附加一个额外的Origin头部,其中包含请求页面的信息,以便服务器根据这个头部信息来决定是否给予响应。下面是一个Origin头部的一个示例:

  Origin:http://www.nczonline.net

  如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息。例如:

  Access-Control-Allow-Origin:http://www.nczonline.net

  如果没有这个头部或者有这个头部但是信息源不匹配,浏览器就会驳回请求。注意:请求和响应都不包含cookie信息。

八、其他跨域技术:

1.图像Ping:

例如:

var img = new Image( );

   img.onload = img.onerror = function(){

     alert("Done!"); 

   };
   img.src = "http://www.example.com/test?name = Nicholas";

  这里创建了一个Image实例,然后将onload和onerror事件处理程序指定为同一个函数。缺点是只能发送GET请求,二是无法访问服务器的响应文本。因此,图像ping只能用于浏览器与服务器间的单向通信。

2.JSONP

  JSONP看起来与JSON差不多,只不过被包含在函数调用中的JSON,就像下面这样:

  callback({"name":"Nicholas"});

  JSONP由两部分组成:回掉函数和数据。回掉函数是当响应到来时应该在页面中调用的函数。回掉函数的名字一般是在请求中指定的。而数据就是传入回掉函数中的JSON数据。

原文地址:https://www.cnblogs.com/koto/p/5305731.html