HTML5之XMLHttpRequest Level 2 API跨源运用案例

た入场券 2022-06-12 08:36 179阅读 0赞

大家都知道XMLHttpRequest API使得Ajax技术的实现成为了可能。作为XMLHttpRequest的改进版，XMLHttpRequest  Level 2在功能上有了很大的改进。主要体现在以下两个方面：

*  跨源XMLHttpRequest ；
 *  进度事件 （Progress events）

在过去，XMLHttpRequest 仅限于同源通信。XMLHttpRequest Level 2通过CORS(跨源资源共享)实现了XMLHttpRequests。CORS规范要求，对一些敏感行为——如申请证书的请求或除了GET和POST以外的OPTIONS预检请求，必须由浏览器发送给服务器，以确定这种行为能否被支持和允许了，这意味着成功通信的背后或许需要由具备CORS处理能力的服务器来支持。

新版XMLHttpRequest 中最重要的API改进之一是增加了对进度的响应。在XMLHttpRequest之前的版本中，仅有readystatechange一个事件能够被用来响应速度。更糟糕的是，浏览器对该事件的实现并不兼容，如在IE中永远都不会触发readystate 3。

前提条件:首先，页面需要部署在web服务器上；其次，两个页面必须来自不同的域。

127.0.0.1文件crossOriginUpload.html

<!DOCTYPE html>
    <title>上传数据</title>
    <link rel="stylesheet" href="styles.css">
    <script>
    
    function loadDemo() {
        var dataElement = document.getElementById("geodata");
        dataElement.textContent = JSON.stringify(geoData).replace(",", ", ", "g");
    
        //XMLHttpRequest浏览器支持情况检测
        var xhr = new XMLHttpRequest();//为了构建跨源XMLHttpRequest，首先创建一个新的XMLHttpRequest对象
        if (typeof xhr.withCredentials === undefined) {
            document.getElementById("support").innerHTML = "您的浏览器<strong>不支持</strong>XMLHttpRequest跨域";
        } else {
            document.getElementById("support").innerHTML = "您的浏览器<strong>支持</strong>XMLHttpRequest跨域";
        }
    
        var targetLocation = "http://www.vserve365.com/process.php";
    
        function setProgress(s) {
            document.getElementById("progress").innerHTML = s;
        }
    //XMLHttpRequest Level 2不再使用数值型状态表示法，而是提供了命名进度事件。为事件处理程序属性设置相应的回调函数，就可以对这些事件进行监听了。
    //在请求过程中务必确保能够监听到错误。请求不成功有很多原因，如网络故障、访问被拒、目标服务器缺乏对CORS的支持等。

远程服务器文件process.php

<?php  
    header('HTTP/1.1 200 OK');  
    header('Access-Control-Allow-Origin: http://127.0.0.1');  
    $REQUEST\_METHOD = $\_SERVER\['REQUEST\_METHOD'\];  
    switch (strtoupper($REQUEST\_METHOD)) \{  
        case 'POST':  
            $message = '数据上传完成';  
            header('Content-Length: '.strlen($message));  
            header('Content-Type: text/plain');  
            break;  
          
        case 'OPTIONS':  
            header('Access-Control-Allow-Methods: POST');  
            header('Access-Control-Allow-Headers: Content-Type');  
            break;  
    \}

结果截图:

![Center][]

![Center 1][]

[Center]: /images/20220612/9a2d00d23355432ba81102c63bf7108d.png
[Center 1]: /images/20220612/c19daec7913c4b17bc16927339a91d4b.png