html5+ XMLHttpRequest

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 ispresent on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access."

用浏览器打开，按F12在控制台console下查看也会发现上述错误，这是为啥呢？

这是因为普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略。只要先获取了跨域请求许可，就可以进行跨域请求。

同源策略：如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置 document.domain属性将它们认为是同源的。

跨域请求的几种常用方法

A域名中的js文件：

 

function CreateScript(src){
    var el = document.createElement('script');
    el.src = src;
    el.async = true;
    el.defer = true;
    document.body.appendChild(el);
}

// 响应的方法
function jsonpcallback(rs) {
    console.log(JSON.stringify(rs));
    document.getElementById("output").innerHTML = JSON.stringify(rs);
}
            
// 发起get请求
CreateScript('http://127.0.0.1:888?userid=001&callback=jsonpcallback');

B域名中node服务器：

 

var http = require('http');  
var url = require('url');  
  
var data = {
    'name': 'yk', 
    'age': '22'
};
  
http.createServer(function(req, res){  
    // 将url字符串转换成Url对象
    var params = url.parse(req.url, true);  
    console.log(params);
    // 查询参数
    if(params.query){
        // 根据附件条件查询
        if(params.query.userid === '001'){
            // 判断是否为jsonp方式请求，若是则使用jsonp方式，否则为普通web方式
            if (params.query.callback) {  
                var resurlt =  params.query.callback + '(' + JSON.stringify(data) + ')';
                res.end(resurlt);  
            } else {  
                res.end(JSON.stringify(data));
            }
        } 
    }      
}).listen(888);