使用XMLHttpRequest執行Ajax請求

昨天，一個朋友，問我一個問題：

經過查找網絡資源，發如今服務器端識別Ajax請求和通常請求的的方法。大部分說到，經過http請求頭中X-Requested-With的值來區分。如此，朋友經過以下代碼執行了請求，卻始終沒有找到這個標誌信息：

// 此只做爲測試代碼
var req = new XMLHttpRequest();
req.open('GET', 'http://www.baidu.com', true);
req.send();

經過firebug，監聽到的請求信息中，沒有在請求頭中發現 X-Requested-With的信息。

分析這個問題：

其實，咱們經過js中的XMLHttpRequest，發送的爲基本的header信息，如此，懷疑X-Requested-With的這個標誌位是本身設置下的。

接下來，我用經過jquery的Ajax進行了一次請求，發現存在這個標誌位。接下來爲了證實個人思路，去jquery的源碼中，查看一下Ajax那段代碼，從中找到了咱們須要的信息，即：

// X-Requested-With header
// For cross-domain requests, seeing as conditions for a preflight are
// akin to a jigsaw puzzle, we simply never set it to be sure.
// (it can always be set on a per-request basis or even using ajaxSetup)
// For same-domain requests, won't change header if already provided.
if ( !s.crossDomain && !headers["X-Requested-With"] ) {
	headers[ "X-Requested-With" ] = "XMLHttpRequest";
}

如此，證實咱們的思路是正確的，那麼咱們如何向XMLHttpRequest請求頭中添加這個信息呢？

很簡單，查了一下文檔，發現這樣就能夠實現咱們的須要了！

// 此只做爲測試代碼
var req = new XMLHttpRequest();
req.open('GET', 'http://www.baidu.com', true);
// 這裏的請求頭信息，咱們能夠自定義的設置
req.setRequestHeader('X-Requested-With','XMLHttpRequest');
req.send();