[NOTE] XMLHttpRequest

前言

是對瀏覽器接口 XMLHttpRequest的學習筆記

主要是因為最近學習的些安全內容（CSRF等）都涉及到了這個
因此來簡單學習下

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

目標不是為了學會編程
只是想簡單了解
它是干什么的，有什么作用，有哪些于安全有關的特性等

學習資料：

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

實際上擺那么多學習資料，頂屁用

正文

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

用法大概類似于這樣：

// 首先，新建一個XMLHttpRequest的實例 var xhr = new XMLHttpRequest(); // 然后，向遠程主機發出一個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'); // 接著，就等待遠程主機做出回應 // 這時需要監控XMLHttpRequest對象的狀態變化，指定回調函數 xhr.onreadystatechange = function(){if ( xhr.readyState == 4 && xhr.status == 200 ) {alert( xhr.responseText );} else {alert( xhr.statusText );} }; // XMLHttpRequest對象通過responseText、responseBody、responseStream或responseXML屬性獲取響應信息 xhr.responseBody; // 將響應信息正文以Unsigned Byte數組形式返回 xhr.responseXML; // 將響應信息格式化為XML文檔格式返回 xhr.responseText; // 將響應信息作為字符串返回

早些時候不同瀏覽器有各自的實現
在HTML 5的概念形成之后，W3C正在著手該接口的標準化

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

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

關于FormData對象的使用，一個例子如下：

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。