html5+ XMLHttpRequest 与mui ajax用法_html5 plus xmlrequest-CSDN博客

本文链接：https://blog.csdn.net/puyangdev/article/details/61917160

Javascript XMLHttpRequest网络请求

XMLHttpRequest 是一个 JavaScript 对象，它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。而且除了HTTP ,它还支持file 和 ftp 协议

XMLHttpRequest 让发送一个HTTP请求变得非常容易。你只需要简单的创建一个请求对象实例，打开一个URL，然后发送这个请求。当传输完毕后，结果的HTTP状态以及返回的响应内容也可以从请求对象中获取。

XMLHttpRequest网络请求的一般步骤：

第一步：创建一个 XMLHttpRequest 实例
new XMLHttpRequest();
第二步：初始化HTTP请求参数
void open(
DOMString method,
DOMString url,
optional boolean async,
optional DOMString user,
optional DOMString password
);
method：请求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下个参数是非HTTP(S)的URL,则忽略该参数.
url：该请求所要访问的URL
async：一个可选的布尔值参数，默认为true,意味着是否执行异步操作，如果值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。如果为值为true，一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true,如果multipart属性是true，否则将会出现一个意外。
user：用户名,可选参数,为授权使用;默认参数为空string.
password：密码,可选参数,为授权使用;默认参数为空string.
第三步：发送请求
send();
发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
如下例：
var xhr = new XMLHttpRequest();
xhr.onload = function () {
console.log(this.responseText);
};
xhr.onreadystatechange = function() {
console.log(this.readyState);
};
xhr.open("get", "https://www.baidu.com", true);
xhr.send();
我们在hbuilder里面打开，控制台会报错：
[Web浏览器] "XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access."
用浏览器打开，按F12在控制台console下查看也会发现上述错误，这是为啥呢？
这是因为普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略。只要先获取了跨域请求许可，就可以进行跨域请求。
同源策略：如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置 document.domain属性将它们认为是同源的。

我们用hbuilder新建一个app工程，然后运行下面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
    <body>
        <script type="text/javascript">
            document.addEventListener('plusready', function(){
                var xhr = new plus.net.XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    switch ( xhr.readyState ) {
                        case 0:
                            console.log( "xhr请求已初始化" );
                        break;
                        case 1:
                            console.log( "xhr请求已打开" );
                        break;
                        case 2:
                            console.log( "xhr请求已发送" );
                        break;
                        case 3:
                            console.log( "xhr请求已响应");
                            break;
                        case 4:
                            if ( xhr.status == 200 ) {
                                alert( "xhr请求成功："+xhr.responseText );
                            } else {
                                console.log( "xhr请求失败："+xhr.readyState );
                            }
                            break;
                        default :
                            break;
                    }
                }
                xhr.open("GET", "https://www.baidu.com/");
                xhr.send();
            }, false );
        </script>
</body>
</html>