面试必备之ajax原始请求_m0_63171455的博客-CSDN博客

      最后更新:2022-01-03 11:00:21 手机定位技术交流文章

      AJAX规定对网页进行渐进式更新,这意味着可以在不刷新整页的情况下对网页的具体内容进行修改,以下文章中载有最初的ajax请求的信息,可供有需要的朋友查阅。 欲获得节目制作资料,请到此办理。

      XMLttp 请求类

      简介

      HTTP 协议用于在浏览器和服务器之间交换信息。 当浏览器向服务器发送 HTTP 请求时, 用户会在浏览器地址栏中写入一个网络 URL, 或者通过网络格式向服务器提交材料 。

      1999年,微软发布Internet Explorer 5浏览器。 照片来自Flickr用户pic. twitter. com。首次引入了新的功能:允许 JavaScript 程序向服务器发送 HTTP 请求 。3⁄4 ̄ ̧漯B它直到2004年Gmail和2005年Google地图首次上映和2005年Google地图才找到摆脱困境的办法。才引起广泛重视。2005年2月,AJAX这一术语首次公开发表。这是Asyncronous JavaScript和XML的缩写。这是一个逐步的 JavaScript 通讯。从服务器获取 XML 文件以便从服务器提取数据这篇文章是全球之声在线特稿的一部分。而不是重新加载整个网页。后来,AJAX成为 JavaScript 脚本的代名词, 启动 HTTP 连接 。也就是说,如果你开始和剧本对话 你就可以利用它它被称为AJAX通信。2006年,W3C还公布了其国际标准。

      航空和宇宙航空研究开发机构具体载有以下阶段。

      1. 创建 XMLttp 请求实例 。
      2. 提出 HTTP 请求 。
      3. 获取服务器的响应数据
      4. 更新网页数据

      概括起来,就是一句话,AJAX 通过原生的XMLHttpRequest对象提出 HTTP 请求 。,收到服务器数据后再进行处理。现在,服务器以 JSON 格式返回所有数据 。XML 格式已过时 。尽管如此,AJAX这一短语已成为一个通用术语。字面意义消失了

      AJAX 的主要界面是 XMLttprequest, 而 XMLttprequest的主要界面是 AJAX 。用于在浏览器和服务器之间交换信息。尽管名字包括XML和HTTP,但不可能。它实际上可以使用一些协议(例如,文件或ftp)。数据可以任何格式(包括文本和二进制)发送。

      XMLtpExcess 是一个构建函数, 使用新命令生成示例。 它没有参数 。

      1

      var xhr = new XMLHttpRequest();

      当您已经建立新示例时, 您可以使用 Open () 函数给生成 HTTP 连接设定某些设置 。

      1

      xhr.open( 'GET' , ' http://www.example.com/page.php ' , true );

      上面的代码描述了连接给定服务器站点的 Get 方法连接。 第三个正确参数表示请求是敌对的 。

      然后指定回声函数以监听通信状态的变化(已备状态属性)。

      1

      2

      3

      4

      5

      xhr.onreadystatechange = handleStateChange;

      function handleStateChange() {

      // ...

      }

      如果 XMLHttprequest 对象对上面代码的更改状态,则调用监听方法处理状态变化。

      最后, Send () 函数用于发送请求 。

      1

      xhr.send( null );

      前一个代码中的 Send () 参数为无效, 表明请求是在没有数据体的情况下发送的。 如果提出了 POST 请求, 则必须在此指定数据体 。

      一旦从服务器收到的数据可以访问,AJAX将不会更新整个网页,而只是更新网页的相关区域,以免干扰用户正在做的事情。

      注意,AJAX 只能向同源网址(协议、域名、端口都相同)提出 HTTP 请求 。,如果发出跨域请求,就会报错(详见《同源政策》和《CORS 通信》两章)。

      以下是如何以最基本的形式使用 XMLttprequest 对象的例子。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      17

      18

      19

      var xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function (){

      / / / 如果通信成功,身份将改为4。

      if (xhr.readyState === 4){

      if (xhr.status === 200){

      console.log(xhr.responseText);

      } else {

      console.error(xhr.statusText);

      }

      }

      };

      xhr.onerror = function (e) {

      console.error(xhr.statusText);

      };

      xhr.open( 'GET' , '/endpoint' , true );

      xhr.send( null );

      样本 XMLttp 请求属性

      XMLHttpRequest.readyState

      XMLtp request. Read State 提供了一个数字, 显示样本对象的当前状态。 此属性只读, 可以返回以下值之一 。

      0 表示生成了 XMLttpExpress 示例,但尚未调用 Open () 函数 。

      1 已调用开放 () 方法, 但示例的发送 () 方法尚未使用, 例子的设定 Excourse charker () 函数仍可用于设定 HTTP 请求的头信息 。

      2 引用了Send () 函数,它描述了示例,并收到了服务器头条信息和状态代码。

      3 显示数据正文( 身体部分) 正在从服务器获取信息。 此时, 如果示例的响应类型属性等于文本或空字符串, 响应文本属性包含先前收到的信息中的一部分 。

      4 表示服务器的数据已全部收到, 或当前接收失败 。

      在沟通过程中,随时随案件对象改变其状态时,即时国家财产的价值就会发生变化。 任何这种价值的变化都会引发即时国家变化事件。

      1

      2

      3

      4

      5

      6

      7

      var xhr = new XMLHttpRequest();

      if (xhr.readyState === 4) {

      / 停止处理服务器返回数据的请求

      } else {

      / 显示提示“ 加载.. ”

      }

      4. 在其他情况下,有人表示,HTTP的请求仍在进行中。

      XMLHttpRequest.onreadystatechange

      XMLttp request. Onready statechange 属性导致监听功能。当事件发生时(例如,待发状态值改变时),该属性会被引用。

      但是,例如,如果中止() 方法被用于终止 XMLHttp request 请求, 它将会改变待发状态属性, 导致 XMLHttp request. is already statechange 属性的调用 。

      下面是一个例子。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' , ' http://example.com ' , true );

      xhr.onreadystatechange = function () {

      if (xhr.readyState !== 4 || xhr.status !== 200) {

      return ;

      }

      console.log(xhr.responseText);

      };

      xhr.send();

      XMLHttpRequest.response

      服务器返回的数据体(即 HTTP 响应的主体部分) 由 XMLttpRequest. Response 属性代表 。它可能是任何类型的信息。它的真菌类似于一个字符串、对象、二进制对象等等。此类型由 XMLHttp 请求. reponseType 属性决定 。XMLttp 请求的属性。 响应是只读的 。

      如果请求未获成功或数据不足,此属性设为无效 。但是,如果响应类型属性是文本或空字符串,在没有请求结束(已准备状态=3级)的情况下, 博客写道:反应属性包括服务器返回的数据部分。

      1

      2

      3

      4

      5

      6

      7

      var xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {

      if (xhr.readyState === 4) {

      handler(xhr.response);

      }

      }

      XMLHttpRequest.responseType

      XMLttp 请求。 回应类型属性是一个字符串 。显示服务器返回的数据类型这个属性是可写的,在援引 Send () 函数之前, 您可以使用 Open () 方法 。设置这个属性的值,指示浏览器如何解释它收到的数据。如果响应类型参数设置为空字符串,与默认文本相同

      以下值可以指定给 XMLttpResources. ResponseType 属性。

      • “(空字符串):等于文本,表示服务器将返回文本数据。
      • “ rarybuffer” 指ArrayBuffer 对象, 意指服务器提供二进制阵列 。
      • “ blob” : 一个布洛布天体, 表示服务器提供二进制天体 。
      • “文档”:一个文档对象,表示服务器返回一个。
      • "Json"是指JSON的物体
      • "文字"是一个字符串。

      上面几种类型之中,大多数时候,这种内容的风格是适当的。直接处理案文也比较方便。此文档类型适合返回 HTML/ XML 文档 。这意味着,那些开放CORS网站的人,Ajax可用于直接获取网页。你不必再分析 HTML 字符串了应指导已检索数据的多姆操作。blob 数据类型适合于读取二进制数据 。比如图片文件。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' , '/path/to/image.png' , true );

      xhr.responseType = 'blob' ;

      xhr.onload = function (e) {

      if ( this .status === 200) {

      var blob = new Blob([xhr.response], {type: 'image/png' });

      // 或者

      var blob = xhr.response;

      }

      };

      xhr.send();

      如果您将此属性设置为 ArrayBuffer, 您将能够处理基于数组的二进制数据 。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' , '/path/to/image.png' , true );

      xhr.responseType = 'arraybuffer' ;

      xhr.onload = function (e) {

      var uInt8Array = new Uint8Array( this .response);

      for ( var i = 0, len = uInt8Array.length; i < len; ++i) {

      // var byte = uInt8Array[i];

      }

      };

      xhr.send();

      如果该财产的价值是json,浏览器将自动返回 JSON. Prose () 函数的结果 。也就是说,xhr. 反应特性(注意,不是xhr,不是文字,是文字这是JSON的物体

      XMLHttpRequest.responseText

      XMLttp request. ResponseText 属性返回从服务器返回的只读文本。 此属性只有在 HTTP 提出要求时才提供全部数据 。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' , '/server' , true );

      xhr.responseType = 'text' ;

      xhr.onload = function () {

      if (xhr.readyState === 4 && xhr.status === 200) {

      console.log(xhr.responseText);

      }

      };

      xhr.send( null );

      XMLHttpRequest.responseXML

      从服务器收到的 HTML 或 XML 文档对象由 XMLttp 请求返回。 ResponseXML 属性返回 。该属性为只读。如果这一请求未获批准,或者,收到的数据不能作为XML或HTML处理。此属性设为无效 。

      如果 HTTP 对内容- Type 信头信件的反应为文本/ xml 或 application/ xml, 则该属性有效 。因此,在发出请求之前必须发出请求。XMLttp 请求。 响应Type 和 XMLtp 请求。 响应Type 属性被设置为文档 。如果 HTTP 回复的内容- Type 头值不是文本/ xml 或应用程序/ xml,然而,为了从应答XML获得数据(即了解数据以DOM格式提供),我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道 我不知道强制进行 XML 解析 。

      此属性返回直接解析的文档 DOM 树 。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' , '/server' , true );

      xhr.responseType = 'document' ;

      xhr.overrideMimeType( 'text/xml' );

      xhr.onload = function () {

      if (xhr.readyState === 4 && xhr.status === 200) {

      console.log(xhr.responseXML);

      }

      };

      xhr.send( null );

      XMLHttpRequest.responseURL

      XMLttp request. ResponseURL 属性是代表传输数据的服务器网站的字符串 。

      1

      2

      3

      4

      5

      6

      7

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' , ' http://example.com/test ' , true );

      xhr.onload = function () {

      http://example. com/这篇文章是埃及2011年抗议活动特别报导的一部分。

      console.log(xhr.responseURL);

      };

      xhr.send( null );

      应当指出, 此属性的值并不总是和 Open () 函数所请求的地址相同。 如果服务器端有跳跃, 此属性返回数据实际返回的站点。 另外, 如果原始 URL 包含一个锚( 区块), 则该属性会删除锁定点 。

      XMLHttpRequest.status,XMLHttpRequest.statusText

      XMLttpExpress 的状态属性返回整数。显示服务器返回的 HTTP 状态代码 。一般来说,如果通信成功的话,如果服务器不返回状态代码, 状态代码为 200 。因此,该财产的默认值为200。请求发出之前,该属性为0。该属性只读。

      • 200,OK,定期进入。
      • 301,永久移动,
      • 302,暂时移动,暂时移动
      • 304,没有改变,没有改变,没有改变
      • 307 临时中转 即时转
      • 未经授权、未经授权、未经授权、未经授权
      • 拒绝进入,不能进入,403
      • 404,未找到,未指定网站
      • 内部服务器错误 500,服务器错误

      一般而言,只有状态代码2xx和304表明服务器已恢复正常运行。

      1

      2

      3

      4

      5

      6

      7

      8

      if (xhr.readyState === 4) {

      if ( (xhr.status >= 200 && xhr.status < 300)

      || (xhr.status === 304) ) {

      / 处理服务器返回的数据

      } else {

      // 出错

      }

      }

      XMLttp 请求的状态文本属性返回字符串 。显示服务器发送的状态警告 。这和地位财产不一样这些财产拥有全部国家信息。比如说"好"和"找不到"在发出请求之前(即在援引 Open () 函数之前),如果服务器不提供状态提示, 此属性的值为空字符串 。此属性的值默认设定为确定值 。该属性为只读属性。

      XMLHttpRequest.timeout,XMLHttpRequestEventTarget.ontimeout

      XMLttpExpress 的超时属性给出一个数字,显示多少毫秒已经通过,如果请求仍然不确定,则立即结束。如果参数等于零,则没有时间限制。

      XMLttpExpressEvent 目标的超时属性用于指定当发生超时事件时执行的监听功能。

      下面是一个例子。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      17

      18

      19

      20

      21

      var xhr = new XMLHttpRequest();

      var url = '/server' ;

      xhr.ontimeout = function () {

      console.error( 'The request for ' + url + ' timed out.' );

      };

      xhr.onload = function () {

      if (xhr.readyState === 4) {

      if (xhr.status === 200) {

      / 处理服务器返回的数据

      } else {

      console.error(xhr.statusText);

      }

      }

      };

      xhr.open( 'GET' , url, true );

      / 指定了10秒的加班费。

      xhr.timeout = 10 * 1000;

      xhr.send( null );

      事件监听属性

      下列事件由 XMLttprequest 对象指定一个监听功能。

      • 加载启动: 加载启动事件( HTTP 请求) XMLttp 请求. listing 函数
      • XMLttp 请求中的进度事件(发送和装入数据)
      • XMLtp resources. onabort: 中止事件( 例如, 请求中止) 。 中止 () 是用户定义的监听功能 。
      • 用 XMLttp Request. listen 函数监听错误事件( 请求失败) 。
      • XMLttpRequest 中装入的监听功能: 加载事件( 请求成功完成)
      • XMLttpResources 中的监听功能:超时事件(用户定义的时限超过,请求未完成) 。
      • 在 XMLttp Request 中, 上载端的监听功能: 事件应该加载 。( 请求完成, 无论成功与否) 。

      下面是一个例子。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      17

      18

      xhr.onload = function () {

      var responseText = xhr.responseText;

      console.log(responseText);

      // process the response.

      };

      xhr.onabort = function () {

      console.log( 'The request was aborted' );

      };

      xhr.onprogress = function (event) {

      console.log(event.loaded);

      console.log(event.total);

      };

      xhr.onerror = function () {

      console.log( 'There was an error!' );

      };

      将事件对象参数传递到进度事件监听功能。对象有三个属性:已装入的属性返回已经转让的数据数量;已装入的属性返回已经传输的数据数量;已装入的属性返回已经传输的数据数量;已装入的属性返回全部数据量按财产总量填报。长度可计算属性返回布尔值 。如果能够确定装载进度,则设定此值。在所有这些监听功能中,参数只能用于进度事件监听功能。其他函数中没有任何参数。

      应当指出,如果存在网络问题(例如,当服务器无法到达服务器时,单错误事件无法获得不正确的信息,换句话说,可能没有不正确的项目,因此只能显示虚假报告的建议。

      XMLHttpRequest.withCredentials

      XMLttp 请求。 有证书的属性是一个布尔值, 这意味着它是真实的或虚假的 。表示跨域请求时,是否或是否用户数据(例如,请求中将包括 cookie 和真实的 HTTP 信头信息,以及用户信息(例如,请求中将包括 cookie 和经认证的 HTTP 信头信息)。默认为false,当博客要求跨域访问时, 他写道:com, 因为它已经安装在这个系统上, Cookie(如果有的话)。

      如果您想要交叉域 AJAX 查询以交付 cookie, 请将属性设置为 True 证书。 相同的源码请求不需要添加此属性 。

      1

      2

      3

      4

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' , ' Example Domain ' , true );

      xhr.withCredentials = true ;

      xhr.send( null );

      服务器必须明确返回头条信息 Access- control- Allow- Recential, 此属性才能正常运行 。

      1

      Access-Control-Allow-Credentials: true

      具备了具有全权证书的属性,Cookies不仅通过跨域请求发送,而且还通过域内请求发送。您也可以配置由远程主机提供的 Cookie 。反之也成立,如果不具备具有全权证书的财产,因此,即使浏览器是特别需要的 来建立Cookie, 跨域 AJAX 请求,浏览器也会忽略。

      应当指出,脚本总是遵守统一标准,无法从文档中找到。带有证书属性的交叉域 Cookie 对饼干或 HTTP 回复的标题信息没有任何影响。

      XMLHttpRequest.upload

      XMLtp 请求不仅可以发送请求,还可以接收请求。还可以发送文件,以下是 AJAX 文件上传的例子 。发送文件以后,可使用 XMLTtp 请求. 上载属性获取对象 。通过观察这个对象,上传进度为已知 。实现这一点的最常见办法是监测下列目标事件:装载启动、装载、装载、中止、错误、进展和超时。

      假定网页上有一个<progress>元素。

      1

      < progress min = "0" max = "100" value = "0" >0% complete</ progress >

      当文件被上传时,您可以通过在上传属性中添加一个进度事件监听功能来获取上传进度 。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      17

      18

      function upload(blobOrFile) {

      var xhr = new XMLHttpRequest();

      xhr.open( 'POST' , '/server' , true );

      xhr.onload = function (e) {};

      var progressBar = document.querySelector( 'progress' );

      xhr.upload.onprogress = function (e) {

      if (e.lengthComputable) {

      progressBar.value = (e.loaded / e.total) * 100;

      // 兼容不支持 <progress> 元素的老式浏览器

      progressBar.textContent = progressBar.value;

      }

      };

      xhr.send(blobOrFile);

      }

      upload( new Blob([ 'hello world' ], {type: 'text/plain' }));

      XMLttp 请求方法示例

      XMLHttpRequest.open()

      XMLttprequest的打开() 函数用于指定 HTTP 请求参数或初始化 XMLHttprequest treat 对象。 它可能总共接受五个参数 。

      1

      2

      3

      4

      5

      6

      7

      void open(

      string method,

      string url,

      optional boolean async,

      optional string user,

      optional string password

      );

      • 方法:指HTTP动词技术,如Get、POST、PUT、DELETE、HEAD等等。
      • URL: 指示发送指定的 URL 请求 。
      • Async: 布尔值这不是第一次提出请愿。默认为true。如果你指定了假的,传输功能负责等待服务器提供回复。另一个组织者(_A)该参数可选。因为同步 AJAX 查询可能导致浏览器的响应丢失 。许多浏览器被禁止参加主要对话。只有内部工人是允许的所以,此选项绝不应设定为假 。
      • 用户: 指用于认证的用户名, 默认为空字符串。 此参数是可选的 。
      • 密码 : 这是用于认证的密码 。 此参数是可选的 。 默认值是一个空字符串 。

      必须指出,使用开放()技术重复AJAX请求等于使用中止(),终止请求。

      发送下列POST要求的样本。

      1

      2

      var xhr = new XMLHttpRequest();

      xhr.open( 'POST' , encodeURI( 'someURL' ));

      XMLHttpRequest.send()

      XMLHttpRequest.send()方法用于实际提出 HTTP 请求 。。它的参数是可选的,如果不带参数,HTTP 请求中只有一个 URL 。没有数据体,GET请求是一个常见的例子;如果有参数,就表示除了头信息,此外,还有包含准确信息的一系列数据。POST要求是一个常见的例子。

      以下是GET请求的例子。

      1

      2

      3

      4

      5

      6

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' ,

      ' Example Domain ' + encodeURIComponent(id),

      true

      );

      xhr.send( null );

      Get 要求的参数作为查询字符串附在 URL 上方代码中。

      以下是POST要求的一些例子。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      var xhr = new XMLHttpRequest();

      var data = 'email='

      + encodeURIComponent(email)

      + '&password='

      + encodeURIComponent(password);

      xhr.open( 'POST' , ' http://www.example.com ' , true );

      xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );

      xhr.send(data);

      必须指出,在调用 Send () 函数之前,必须设置所有 XMLttp请求的监听活动。

      交付的数据是发送方法的参数,可以使用多种格式的数据作为参数。

      1

      2

      3

      4

      5

      6

      void send();

      void send(ArrayBufferView data);

      void send(Blob data);

      void send(Document data);

      void send(String data);

      void send(FormData data);

      如果 Send () 用于发送 DOM 对象, 则数据在交付前被绑住。 如果发送了二进制数据, 最好发送 ArrayBufferView 或 Blob 对象, 允许在 Ajax suidateSend () 上传文件, 用于发送 DOM 对象, 则数据在交付前被绑住。 如果发送了二进制数据, 则最好发送 ArrayBufferView 或 Blob 对象, 允许通过 Ajax 上传文件 。

      以下是如何提供窗体数据的一些例子。“表格数据”对象可用于创建表格数据。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      var formData = new FormData();

      formData.append( 'username' , '张三' );

      formData.append( 'email' , 'zhangsan@example.com' );

      formData.append( 'birthDate' , 1940);

      var xhr = new XMLHttpRequest();

      xhr.open( 'POST' , '/register' );

      xhr.send(formData);

      上述代码中的“窗体数据”对象生成窗体数据,然后使用发送()函数传输,该函数的影响与以下发送的窗体数据相同。

      1

      2

      3

      4

      5

      6

      < form id = 'registration' name = 'registration' action = '/register' >

      < input type = 'text' name = 'username' value = '张三' >

      < input type = 'email' name = 'email' value = 'zhangsan@example.com' >

      < input type = 'number' name = 'birthDate' value = '1940' >

      < input type = 'submit' onclick = 'return sendForm(this.form);' >

      </ form >

      以下示例说明“表格数据”对象如何用于在传输数据前处理数据。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      function sendForm(form) {

      var formData = new FormData(form);

      formData.append( 'csrf' , 'e69a18d7db1286040586e6da1950128c' );

      var xhr = new XMLHttpRequest();

      xhr.open( 'POST' , form.action, true );

      xhr.onload = function () {

      // ...

      };

      xhr.send(formData);

      return false ;

      }

      var form = document.querySelector( '#registration' );

      sendForm(form);

      XMLHttpRequest.setRequestHeader()

      XMLttpRequest. SetExcourse checker () 函数用于为浏览器已同意的 HTTP 请求设定 HTTP 信头信息 。此函数必须在 Open () 方法之后和 Send () 方法之前被引用。如果该方法被多次援引,设定同一个字段,每次调用时,该值将合并成一个单一值。

      此方法接收两个参数 : 第一个是代表初始信件字段名称的字符串, 第二个是字段值 。

      1

      2

      3

      xhr.setRequestHeader( 'Content-Type' , 'application/json' );

      xhr.setRequestHeader( 'Content-Length' , JSON.stringify(data).length);

      xhr.send(JSON.stringify(data));

      上述代码首先设定页眉“字体-类型”,表示数据是以JSON格式发送的;然后设定Fontent-Length,表示数据长度;最后是传输JSON数据。

      XMLHttpRequest.overrideMimeType()

      XMLttpExpress 的 overMimeType () 函数用于定义 MIME 类型 。替换服务器返回的真正 MIME 类型 。让浏览器以不同的方式处理它。举例来说,服务器返回文本/ xml 作为数据类型 。浏览器出于各种原因无法评估错误 。目前无法获取任何数据。为了拿到原始数据,MIME 类型可以更改为文本/计划 。因此,浏览器不会自动分析。因此,我们能够获得原始案文。

      1

      xhr.overrideMimeType( 'text/plain' )

      必须指出,在发送()函数之前必须调用该方法。

      更改服务器返回的数据类型,在典型条件下,这不是要推行的战略。如果您想要服务器返回给定的数据类型,请使用以下语法。响应类型属性可用于通知服务器 。就像下面的例子。如果服务器无法返回数据类型,将使用此方法。更改的只是超过MimeType () 函数。

      1

      2

      3

      4

      5

      6

      7

      8

      var xhr = new XMLHttpRequest();

      xhr.onload = function (e) {

      var arraybuffer = xhr.response;

      // ...

      }

      xhr.open( 'GET' , url);

      xhr.responseType = 'arraybuffer' ;

      xhr.send();

      XMLHttpRequest.getResponseHeader()

      XMLttpRequest 请求的收发回复源() 函数返回 HTTP 信头信息字段的值,如果没有收到服务器回应或字段不存在则返回无效。 此方法的参数不区分大小写 。

      1

      2

      3

      4

      5

      6

      7

      8

      function getHeaderTime() {

      console.log( this .getResponseHeader( "Last-Modified" ));

      }

      var xhr = new XMLHttpRequest();

      xhr.open( 'HEAD' , 'yourpage.html' );

      xhr.onload = getHeaderTime;

      xhr.send();

      如果存在多个同名字段,则其值与单个字符串相连,每个字段用逗号和空格分隔。

      XMLHttpRequest.getAllResponseHeaders()

      要返回字符串, 请使用 XMLttp 请求。 Get AllResponse Hiaders () 。显示服务器发送的所有 HTTP 信头 。格式为字符串,另一方面,CRRLF用于将每条头条信息分开(返回汽车+换行符)。如果您没有收到服务器的答复,该属性为null。如果发生网络错误,该属性为空字符串。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      var xhr = new XMLHttpRequest();

      xhr.open( 'GET' , 'foo.txt' , true );

      xhr.send();

      xhr.onreadystatechange = function () {

      if ( this .readyState === 4) {

      var headers = xhr.getAllResponseHeaders();

      }

      }

      上述代码用于检索服务器的所有头信息, 这可能是这样的字符串 。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      date: Fri, 08 Dec 2017 21:04:30 GMTrn

      content-encoding: gziprn

      x-content-type-options: nosniffrn

      server: meinheld/0.6.1rn

      x-frame-options: DENYrn

      content-type: text/html; charset=utf-8rn

      connection: keep-alivern

      strict-transport-security: max-age=63072000rn

      vary: Cookie, Accept-Encodingrn

      content-length: 6502rn

      x-xss-protection: 1; mode=blockrn

      然后处理字符串 。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      var arr = headers.trim().split(/[rn]+/);

      var headerMap = {};

      arr.forEach( function (line) {

      var parts = line.split( ': ' );

      var header = parts.shift();

      var value = parts.join( ': ' );

      headerMap[header] = value;

      });

      headerMap[本文由 在线网速测试 整理编辑,转载请注明出处,原文链接:https://www.wangsu123.cn/news/15592.html

            热门文章

            文章分类