使用XMLHttpRequest

请求种类

通过XMLHttpRequest的请求可以通过同步和异步的方式获取数据,请求的种类在XMLHttpRequest的open()方法的第三三个可选参数async设置。如果这个参数是true或者没有特别指定,那么XMLHttpRequest讲师异步,否则将是同步传输。总而言之,你要尽可能的少使用同步传输。

Note: 在Geoko30.0(Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)以后,考虑到用户体验的不好影响,主线程上的异步传输被弃用

处理response

responseXML 属性

如果你使用XMLHttpRequest来获取远程的XML文档的内容,那么responseXML属性将返回一个DOM对象,此对象包含了一个被解析的XML文档,这个文档难解析和计算。下面5大主要的方法来处理这个XML文档:

  1. 使用 XPath 来强调(指向)部分内容。
  2. 使用 JXON 将其转化成Javascript对象树
  3. 手动的解析或者序列化XML成为字符串亦或对象。
  4. 使用 XMLSerializer 来序列化DOM树变成strings亦或files
  5. RegExp可以被使用如果你提前知道了XML文档的内容。 如果你想去掉换行符,你可以使用正则来扫描换行符,但是这是不得已才能使用的方法,因为XML文档中的细微改变将会导致该方法的失败。

responseText 属性包括了 HTML 文档

如果你使用XMLHttpRequest来获取远程HTML文件的内容,那么responseText属性是一个包含了一系列HTML标签的字符,难解析和计算。

下面三个方法可以用来处理:

  1. 使用XMLHttpRequest.responseXML属性
  2. 使用fragment.body.innerHTML将内容注入到一个document fragment的主体中
  3. RegExp可以被使用如果你提前知道了HTML的responseText的内容。 如果你想去掉换行符,你可以使用正则来扫描换行符,但是这是不得已才能使用的方法,因为XML文档中的细微改变将会导致该方法的失败。

处理二进制数据

虽然XMLHttpRequest被常用来发送和接受文本化的数据,但是它同样可以发送和接受二进制数据。

var oReq = new XMLHttpRequest();
oReq.open("GET", url);
// retrieve data unprocessed as a binary string
oReq.overrideMimeType("text/plain; charset=x-user-defined");
/* ... */

XMLHttpRequest Level 2 增加了新的responseType属性将使得二进制数据处理更加简便

var oReq = new XMLHttpRequest();

oReq.onload = function(e) {
  var arraybuffer = oReq.response; // not responseText
  /* ... */
}
oReq.open("GET", url);
oReq.responseType = "arraybuffer";
oReq.send();

监视进程

XMLHttpRequest 提供了监听一系列在请求正在进行中时发生的事件。这些事件包括了定期进度提醒,错误提醒等。

var oReq = new XMLHttpRequest();

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

oReq.open();

// ...

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

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

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

function transferCanceled(evt) {
  console.log("The transfer has been canceled by the user.");
}

第3到6行监听,在使用XMLHttpRequest进行数据转换时发送的事件。

Note: 你需要在调用call()事件之前添加监听。否则,监听事件将不会执行。

进程事件存在于下载和上传传输事件中。下载事件在XMLHttpRequest对象本身上被触发,就像上例一样。上传事件在XMLHttpRequest.upload对象中被触发,如下:

var oReq = new XMLHttpRequest();

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

oReq.open();

Note: 进程事件在协议file: 中不可以使用。

Note: 从 Gecko 9.0 开始,进度事件现在可以依托于每一个传入的数据块,包括进度事件被触发前在已经接受了最后一个数据包且连接已经被关闭的情况下接收到的最后一个块。这种情况下,当该数据包的 load 事件发生时 progress 事件会被自动触发。这使你可以只关注 progress 事件就可以可靠的监测进度。

Note:在 Gecko 12.0 中,当 responseType 为 "moz-blob" 时,如果你的 progress 事件被触发,则响应的值是一个包含了接收到的数据的 Blob 。

使用 loadend 事件可以侦测到所有的三种加载结束条件(abort、load、error):

req.addEventListener("loadend", loadEnd);

function loadEnd(e) {
  alert("The transfer finished (although we don‘t know if it succeeded or not).");
}

需要注意的是,没有方法可以确切的知道 loadend 事件接收到的信息是来自何种条件引起的操作终止;但是你可以在所有传输结束的时候使用这个事件处理。

提交表单和上传文件

XMLHttpRequest 的实例有两种方式提交表单:

第二种方式( 使用 FormData API )是最简单最快捷的,但是缺点是被收集的数据不是字符串形式的。
第一种方式反而是最复杂的但也是最灵活和最强大。

只使用 XMLHttpRequest

在大多数用例中,提交表单时即便不使用 FormData API 也不会要求其他的 API。唯一的例外情况是,如果你要上传一个或多个文件,你需要额外的FileReader API。

提交方法简介

一个 html <form> 可以用以下四种方式发送:

  • 使用 POST 方法,并设置 enctype 属性为 application/x-www-form-urlencoded (默认)
  • 使用 POST 方法,并设置 enctype 属性为 text/plain
  • 使用 POST 方法,并设置 enctype 属性为 multipart/form-data
  • 使用 GET 方法(这种情况下 enctype 属性会被忽略)

现在,我们提交一个表单,它里面有两个字段,分别被命名为 foo 和 baz。如果你用 POST 方法,那么服务器将会接收到一个字符串类似于下面三种情况之一,其中的区别依赖于你采用何种编码类型:

  • Method: POST; Encoding type: application/x-www-form-urlencoded (default):
Content-Type: application/x-www-form-urlencoded

foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
  • Method: POST; Encoding type: text/plain:
Content-Type: text/plain

foo=bar
baz=The first line.
The second line.
  • Method: POST; Encoding type: multipart/form-data:
Content-Type: multipart/form-data; boundary=---------------------------314911788813839

-----------------------------314911788813839
Content-Disposition: form-data; name="foo"

bar
-----------------------------314911788813839
Content-Disposition: form-data; name="baz"

The first line.
The second line.

-----------------------------314911788813839--

相反的,如果你用 GET 方法,一个像下面这样的字符串将被简单的附加到 URL:

?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
时间: 2024-10-13 13:55:00

使用XMLHttpRequest的相关文章

html5 XMLHttpRequest 图片异步上传

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <tilte>uploadFile</title> <script> function uploadFile(){ var formData = new FormData(); var files = document.getElementById('file').files; var file

AJAX 使用XMLHttpRequest对象发送和接受数据

XMLHttpRequest是XMLHttp组件的对象,通过这个对象,Ajax可以像桌面应用程序一样只与服务器进行数据层的交换,而不必每次都刷 新界面,也不必每次将数据处理的工作都交给服务器来做:这样既减轻了服务器负担又回忆了响应速度,缩短了用户的等待时间. XMLHttpRequest对象与Ajax       在Ajax应用程序中,XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据.       需要注意的是JavaScript本身并不具有向

XMLHttpRequest使用详解

1.什么是XMLHttpRequest XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信,这就是我们熟悉的AJAX.早期,各个浏览器的实现都不同,HTML5之后,W3C进行了统一.2.XMLHttpRequest使用示例 <script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.timeout = 3000; xhr.ontimeout = func

jquery.js:8672 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user&#39;s experience. For more help, check https://xhr.spec.whatwg.org/.

html5谷歌流浪器报错:jquery.js:8672 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. 解决方法: 所有的a标签加上:javascript:void(0) <a href="

XMLHttpRequest对象解读

<!DOCTYPE html> <html> <body> <script> function reqListener () { console.log(this); console.log(this.getAllResponseHeaders()); console.log(this.responseText); } var params = "lorem=ipsum&name=binny"; var oReq = new XM

Ajax中的XMLHttpRequest对象详解(转)

XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求的技术.后来Mozilla.Netscape.Safari.Firefox和其他浏览器也提供了XMLHttpRequest类,虽然这些浏览器都提供了XMLHttpRequest类,但它们创建XMLHttpRequest类的方法并不相同.XMLHttpRequest使我们可以使用JavaScript向

Ajax异步XMLHttpRequest对象

示例Ajax: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

ajax中基本兼容各浏览器的XMLHttpRequest的创建

function createXHR(){ var xhr = null; if(window.XMLHttpRequest){//判断当前浏览器是否支持XMLHttpRequest xhr = new XMLHttpRequest(); }else if(window.XMLHttpRequest){//判断当前浏览器是否支持XMLHttpRequest,这是对于IE浏览器的判断 try{ xhr = new ActiveXObject("Msxml2.XMLHTTP");//IE6

XMLHttpRequest简介

要真正实现这种绚丽的奇迹,必须非常熟悉一个 JavaScript 对象,即 XMLHttpRequest. 下面给出将要用于该对象的很少的几个 方法和属性. ·open():建立到服务器的新请求. ·send():向服务器发送请求. ·abort():退出当前请求. ·readyState:提供当前 HTML 的就绪状态. ·responseText:服务器返回的请求响应文本. 1. 创建新的 XMLHttpRequest 对象 <script language="javascript&q

XMLHttpRequest 对象

XMLHttpRequest 对象 通过 XMLHttpRequest 对象,您可以在不重新加载整个页面的情况下更新网页中的某个部分. XMLHttpRequest 对象 XMLHttpRequest 对象用于幕后与服务器交换数据. XMLHttpRequest 对象是开发者的梦想,因为您可以: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 创建 XMLHttpRequest 对象 所有现代的浏览器(IE7+.Firef