JavaScript跨域請求技巧——XMLHttpRequest實現

一、什麼是跨域請求

跨域請求是指在一個域名下的文檔或程序試圖去請求另一個域名下的資源，這種行為是被同源策略所禁止的。Same-origin policy是一種安全機制，它限制了從同一個源加載文檔或腳本的非同源的請求。但是在實際開發中，我們經常需要跨域進行數據的交互，如何實現跨域請求就成為一個十分重要的問題。

二、XMLHttpRequest的基本使用

XMLHttpRequest對象是實現AJAX的基礎。它可以在無需重新加載整個頁面的情況下，向服務器發出請求和接收響應。下面是一個基本的XMLHttpRequest使用方法：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com', true);
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

首先需要創建一個XMLHttpRequest對象，並使用open()方法指定HTTP方法（GET或POST）、請求的URL和是否異步處理。接着定義onreadystatechange事件，該事件在請求狀態發生變化時觸發，我們在其中對請求的狀態做出處理。最後，我們使用send()方法來發送請求，如果發送的是POST請求，則需要傳遞參數。

三、常見的跨域請求方式

1. JSONP（JSON with Padding）

JSONP是一種跨域請求方式，它實現起來非常簡單，只需要定義一個回調函數就可以了。在HTML頁面中，定義一個script標籤，並指定請求的URL和回調函數名稱：

<script type="text/javascript">
    function handleResponse(data) {
        console.log(data);
    }
    var script = document.createElement('script');
    script.src = 'http://www.example.com/data?callback=handleResponse';
    document.head.appendChild(script);
</script>

服務器需要將數據封裝在回調函數中返回，如：

handleResponse({"name": "John", "age": 30, "city": "New York"});

相對於XMLHttpRequest，JSONP有一個很大的優點，就是可以跨域調用服務器端的函數。但是JSONP也有它的不足之處，它只能支持GET請求，不能處理POST請求等複雜請求。

2. CORS（Cross-Origin Resource Sharing）

CORS是一種標準的跨域請求方式，它通過在服務端設置特殊的HTTP頭信息來實現跨域。在前端代碼中，我們只需要像普通的XMLHttpRequest一樣發送請求即可，如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com', true);
xhr.withCredentials = true; // 設置跨域允許發送Cookie
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

服務器端需要設置Access-Control-Allow-Origin頭信息，允許指定的域名進行跨域請求：

Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Credentials: true // 允許跨域發送Cookie

CORS可以支持複雜請求，如POST、PUT和DELETE等，相比JSONP更為靈活。但是CORS要求服務器端必須設置相應的頭信息，如果服務器沒有正確設置，那麼請求會被瀏覽器攔截。

3. 代理請求

代理請求是一種將跨域請求轉化為同域請求的方法。我們可以在自己的服務器端定義一個代理接口，在這個接口中發出跨域請求，並將請求結果返回給前端頁面。前端頁面通過調用同域的代理接口實現跨域請求，下面是一個代理請求的實現示例：

代理接口代碼：

app.get('/proxy', function (req, res) {
    var targetUrl = req.query.url;
    request(targetUrl, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            res.send(body);
        }
    });
});

前端請求代碼：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/proxy?url=' + encodeURIComponent('http://www.example.com'), true);
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

代理請求可以實現跨域請求，但是要求在服務器端進行額外的編碼和處理，增加了服務器端的負擔。

四、總結

以上就是幾種常見的跨域請求方式，每種方式都有自己的優缺點。在實際開發中，我們需要根據具體的情況選擇合適的跨域請求方式。最後要注意，在跨域請求時，我們需要保證數據的安全性。避免在跨域過程中數據被篡改或竊取。