[NOTE] XMLHttpRequest

前言

是對瀏覽器接口 XMLHttpRequest的學(xué)習(xí)筆記

主要是因為最近學(xué)習(xí)的些安全內(nèi)容（CSRF等）都涉及到了這個
因此來簡單學(xué)習(xí)下

很多Web應(yīng)用認(rèn)為
通過僅使用application/json作為content-type，就可以防御CSRF
原因是這種請求僅能通過XHR（XMLHttpRequest）請求生成
這樣在發(fā)出正常請求之前，一個pre-flight request會先發(fā)送給服務(wù)端
若返回的pre-flight response不允許跨源（cross origin）請求
則瀏覽器不會發(fā)出隨后的正常請求

目標(biāo)不是為了學(xué)會編程
只是想簡單了解
它是干什么的，有什么作用，有哪些于安全有關(guān)的特性等

學(xué)習(xí)資料：

• XMLHttpRequest Level 2使用指南-阮一峰
• XMLHttpRequest對象-W3school
• JS XMLHttpRequest入門教程-C語言中文網(wǎng)
• XMLHttpRequest—必知必會-簡書-xiaosan666

實際上擺那么多學(xué)習(xí)資料，頂屁用

正文

是一個瀏覽器接口，使得JavaScript可以進行HTTP請求

用法大概類似于這樣：

// 首先，新建一個XMLHttpRequest的實例 var xhr = new XMLHttpRequest(); // 然后，向遠程主機發(fā)出一個GET請求 xhr.open('GET', 'example.php'); xhr.send(); // 或者是POST請求 xhr.open('POST', 'example.php'); xhr.send("username=Archeri&password=123456"); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 接著，就等待遠程主機做出回應(yīng) // 這時需要監(jiān)控XMLHttpRequest對象的狀態(tài)變化，指定回調(diào)函數(shù) xhr.onreadystatechange = function(){if ( xhr.readyState == 4 && xhr.status == 200 ) {alert( xhr.responseText );} else {alert( xhr.statusText );} }; // XMLHttpRequest對象通過responseText、responseBody、responseStream或responseXML屬性獲取響應(yīng)信息 xhr.responseBody; // 將響應(yīng)信息正文以Unsigned Byte數(shù)組形式返回 xhr.responseXML; // 將響應(yīng)信息格式化為XML文檔格式返回 xhr.responseText; // 將響應(yīng)信息作為字符串返回

早些時候不同瀏覽器有各自的實現(xiàn)
在HTML 5的概念形成之后，W3C正在著手該接口的標(biāo)準(zhǔn)化

新舊版本有較大的不同，包括：

• 是否收到同源策略（Same Origin Policy）限制
  • 跨域需要瀏覽器和服務(wù)端雙重支持
• 是否支持使用FormData對象管理表單數(shù)據(jù)
• 是否可以獲取二進制數(shù)據(jù)
• 是否可以上傳文件
• 是否支持設(shè)置HTTP請求時限等

關(guān)于FormData對象的使用，一個例子如下：

// 首先，新建一個FormData對象 var formData = new FormData(); // 然后，為它添加表單項 formData.append('username', '張三'); formData.append('id', 123456); // 最后，直接傳送這個FormData對象 // 這與提交網(wǎng)頁表單的效果，完全一樣 xhr.send(formData);// FormData對象也可以用來獲取網(wǎng)頁表單的值 var form = document.getElementById('myform'); var formData = new FormData(form); formData.append('secret', '123456'); // 添加一個表單項 xhr.open('POST', form.action); xhr.send(formData);

總之大概就是這么一個東西

總結(jié)

以上是生活随笔為你收集整理的[NOTE] XMLHttpRequest的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。