XMLHttpRequest 详解

目录

 XMLHTTPRequest对象

1,HTTP请求的时限 

2,FormData对象

3,上传文件 

4,跨域资源共享(CORS)


XMLHTTPRequest对象

        XMLHTTPRequest对象,顾名思义:是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后,ajax操作就此诞生。

AJAX = Asynchronous JavaScript and XML,翻译为:异步的 JavaScript 和 XML。ajax就是基于浏览器提供的XMLHttpRequest对象来实现的。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。自从有了ajax之后,我们就可以实现异步的加载网页。

XML 指可扩展标记语言(eXtensible Markup Language)。我们在浏览器中使用XMLHTTPRequest对象在服务器之间通信,传输的数据是使用XML的方式,但最终还是会被转换成json数据格式来被我们使用。

XHR的使用流程:

  • 首先我们需要新建一个XMLHttpRequest实例

 var xhr = new XMLHttpRequest();

  • 然后,向远程主机发出一个HTTP请求

xhr.open('GET', 'example.php');
xhr.send(); 

  • 接着,就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化,指定回调函数 

 xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
      alert( xhr.responseText );
    } else {
      alert( xhr.statusText );
    }
  };

  • 上面的代码包含了老版本XMLHttpRequest对象的主要属性:

 xhr.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。
 xhr.status:服务器返回的状态码,等于200表示一切正常。
 xhr.responseText:服务器返回的文本数据
 xhr.responseXML:服务器返回的XML格式的数据
 xhr.statusText:服务器返回的状态文本。

  • 新版本的XMLHttpRequest对象,做出了大幅改进。 

 可以设置HTTP请求的时限
 可以使用FormData对象管理表单数据
 可以上传文件
 可以请求不同域名下的数据(跨域请求),CORS。
 可以获取服务器端的二进制数据
 可以获得数据传输的进度信息

1,HTTP请求的时限 

xhr.timeout = 3000;
xhr.ontimeout = function(event){
  alert('请求超时!');

上面的语句,将最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还有一个timeout事件,用来指定回调函数。

2,FormData对象

AJAX操作往往用来传递表单数据。为了方便表单处理,HTML 5新增了一个FormData对象,可以模拟表单

//首先,新建一个FormData对象。
var formData = new FormData();

//然后,为它添加表单项。
formData.append('username', '张三');
formData.append('id', 123456);

//最后,直接传送这个FormData对象。这与提交网页表单的效果,完全一样。
xhr.send(formData);

3,上传文件 

新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件

假定files是一个"选择文件"的表单元素(input[type="file"]),我们将它装入FormData对象。

 var formData = new FormData();

for (var i = 0; i < files.length;i++) {
  formData.append('files[]', files[i]);
}

xhr.send(formData);

4,跨域资源共享(CORS)

       新版本的XMLHttpRequest对象,可以向不同域名的服务器发出HTTP请求。这叫做跨域资源共享。使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。

 

你可能感兴趣的:(AJAX,xmlhttprequest,ajax,http,javascript,xml)