script ajax / XHR / XMLHttpRequest

s

利用XHR 調試發送form data表單數據，F5鍵刷新form表單URL ，http請求地址，獲取token，提交。

如：http://pcp.cns*****.com/spcp-web/vmApply/submitApplyInfo.htm

在Chrome F12鍵console裏提交以下語法內容，回車，便可數次重複提交。

（以下表單惟一刷新頁面獲取新變量token便可回車提交以下內容）

xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){ //表示消息接受完成
     if(xhr.status === 200){  //是否爲成功的響應
       console.log('success');
     }else{
       console.log(xhr.status);
}
  }
}
xhr.open("POST","http://pcp.cnsuning.com/spcp-web/vmApply/submitApplyInfo.htm",true);
token = $('#token').val()
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");

xhr.send('你的form表單內容，在第一次提交submit時F12鍵獲取XHR裏通過URL concode的表單數據內容' + token + '&diskSize=0')

 案例1：

xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){ //表示消息接受完成
     if(xhr.status === 200){  //是否爲成功的響應
       console.log('success');
     }else{
       console.log(xhr.status);
}
  }
}
xhr.open("POST","http://pcp.cnsuning.com/spcp-web/vmApply/submitApplyInfo.htm",true);
token = $('#token').val()
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");

xhr.send('envId=34315&applyData=%7B%22vm%22%3A%7B%22basicInfo%22%3A%7B%22systemId%22%3A%223608%22%2C%22envType%22%3A%22prd%22%2C%22envName%22%3A%22SFTS_YH_PRD_Jiangbei+%E9%80%BB%E8%BE%91%E6%9C%BA%E6%88%BF+%3A+%E9%9B%A8%E8%8A%B1%E6%9C%BA%E6%88%BF%22%7D%2C%22deployInfo%22%3A%7B%22moduleType%22%3A%22%22%2C%22moduleName%22%3A%22%22%2C%22envCellId%22%3A%22%22%2C%22envGroupId%22%3A%22%22%7D%2C%22serverInfo%22%3A%7B%22useType%22%3A%222%22%2C%22middlewareId%22%3A%22179%22%2C%22osId%22%3A%22Red+Hat+Enterprise+Linux+Server+6.3+(64+Bit)%22%2C%22osName%22%3A%22Red+Hat+Enterprise+Linux+Server+6.3+(64+Bit)%22%2C%22packageId%22%3A%221221%22%2C%22vmNum%22%3A%2220%22%7D%2C%22diskInfo%22%3A%7B%7D%2C%22resourceInfo%22%3A%7B%22ldcId%22%3A%222%22%2C%22ldcName%22%3A%22%E9%9B%A8%E8%8A%B1%E6%9C%BA%E6%88%BF%22%2C%22netZone%22%3A%22inter%22%2C%22advance%22%3A%7B%22region%22%3A%22os_JiangBei_ocata02%22%7D%7D%7D%7D&remark=jiangbei+100&needSaveOverProof=false&token=' + token + '&diskSize=0')

 

 

https://www.cnblogs.com/syfwhu/p/6116323.html

在XHR誕生前，網頁要獲取客戶端和服務器的任何狀態更新，都須要刷新一次，在XHR誕生後就能夠徹底經過JS代碼異步實現這一過程。XHR的誕生也使最初的網頁製做轉換爲開發交互應用，拉開了WEB2.0的序幕。 

XHR是一種瀏覽器API，極大簡化了異步通訊的過程，開發者並不須要關注底層的實現，由於瀏覽器會爲咱們完成這些工做，如鏈接管理、協議協商、HTTP請求格式化等等。最第一版本的XHR能力很是有限，只支持文本傳輸，處理上傳能力也不足，對於跨域請求也不支持。爲解決這些問題，W3C於2008年發佈了「XMLHttpRequest Level2」草案，新增了以下功能：

• 支持請求超時；
• 支持傳輸二進制和文本數據；
• 支持重寫媒體類型和編碼響應；
• 支持監控每一個請求的進度事件；
• 支持有效的文件上傳；
• 支持安全的跨來源請求。

2011年，W3C將「XMLHttpRequest Level2」規範與最初的「XMLHttpRequest」規範合併，全部XHR2新增的功能也都併入了原來的XHR API中，接口不變，功能加強。

1.XHR簡介

XMLHttpRequest 對象提供了對 HTTP 協議的徹底的訪問，包括作出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 能夠同步或異步地返回 Web 服務器的響應，而且可以以文本或者一個 DOM 文檔的形式返回內容。XHR接口強制要求每一個請求都具有嚴格的HTTP語義–應用提供數據和URL，瀏覽器格式化請求並管理每一個鏈接的完整生命週期，因此XHR僅僅容許應用自定義一些HTTP首部，但更多的首部是不能本身設定的，如：

• Accept-Charset, Accept-Encoding, Access-Control-*
• Host, Upgrade, Connection, Referer, Origin
• Cookie, Sec-, Proxy-, 及其餘首部

瀏覽器會拒絕絕對不安全的首部重寫，以保證應用不能假扮用戶代理、用戶或請求來源，如Origin由瀏覽器自動設置，Access-Control-Allow-Origin由服務器設置，若是接受該請求，不包含該字段便可，瀏覽器發出的請求將做廢。

• CORS請求會省略cookie和HTTP認證等用戶憑據；
• 客戶端被限制只能發送「簡單的跨域請求」，包括只能使用GET POSD HEAD三種方式，只能訪問經過XHR發送並讀取的HTTP首部。

若是想要啓用cookie和HTTP認證，客戶端必須在發送請求時經過XHR對象發送額外的屬性（withCredentials），而服務器也須要以Access-Control-Allow-Credentials響應，表示容許應用發送隱私數據。一樣，若是客戶須要寫入或讀取自定義HTTP標頭或想要使用「非簡單的方法」的請求，那麼它必須首先經過發出一個預備請求，以獲取第三方服務器的許可，以下所示：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// Preflight request OPTIONS /resource.js HTTP/1.1 Host: thirdparty.com Origin: http: //example.com Access-Control-Request-Method: POST Access-Control-Request-Headers: My-Custom-Header ...   // Preflight response HTTP/1.1 200 OK Access-Control-Allow-Origin: http: //example.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: My-Custom-Header ...   (actual HTTP request)

W3C CORS規範定義的何時必須使用預備請求，「簡單」的請求能夠跳過它，但也有各類各樣場景須要使用預備請求，這就添加一次往返網絡延遲。可喜的是，一旦預備請求完成，它能夠由客戶端緩存，以免在後續請求進行相同的驗證。 
在XHR中，能夠經過responseType-設置改變響應類型，以下所示：

• 「」 字符串(默認值)
• 「arraybuffer」 ArrayBuffer
• 「blob」 Blob
• 「document」 Document
• 「json」 JavaScript 對象，解析自服務器傳遞回來的JSON 字符串。
• 「text」 字符串

2.數據傳輸

2.1.數據請求：

下面是經過XHR獲取一張圖片，並顯示到網頁上的示例：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var  xhr =  new  XMLHttpRequest();   xhr.addEventListener( "progress" , updateProgress,  false ); xhr.addEventListener( "load" , transferComplete,  false ); xhr.addEventListener( "error" , transferFailed,  false ); xhr.addEventListener( "abort" , transferCanceled,  false );   xhr.open( 'GET' ,  '/images/photo.webp' ); xhr.responseType =  'blob' ; xhr.onload =  function () {    if  ( this .status == 200) {      var  img = document.createElement( 'img' );      img.src = window.URL.createObjectURL( this .response);      img.onload =  function () {          window.URL.revokeObjectURL( this .src);      }      document.body.appendChild(img);    } };   xhr.send();

2.2.數據上傳

上傳相關事件在 XMLHttpRequest.upload 對象上被觸發，像下面這樣，向服務器發送一個formdata格式數據：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var  formData =  new  FormData(); formData.append( 'id' , 123456); formData.append( 'topic' ,  'performance' );   var  xhr =  new  XMLHttpRequest();   xhr.upload.addEventListener( "progress" , updateProgress); xhr.upload.addEventListener( "load" , transferComplete); xhr.upload.addEventListener( "error" , transferFailed); xhr.upload.addEventListener( "abort" , transferCanceled);   xhr.open( 'POST' ,  '/upload' ); xhr.onload =  function () { ... }; xhr.send(formData);

2.3.數據分片上傳：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var  blob = ...;   const BYTES_PER_CHUNK = 1024 * 1024; const SIZE = blob.size;   var  start = 0; var  end = BYTES_PER_CHUNK;   while (start < SIZE) {    var  xhr =  new  XMLHttpRequest();    xhr.open( 'POST' ,  '/upload' );    xhr.onload =  function () { ... };      xhr.setRequestHeader( 'Content-Range' , start+ '-' +end+ '/' +SIZE);    xhr.send(blob.slice(start, end));      start = end;    end = start + BYTES_PER_CHUNK; }

注意：progress 事件在使用 file: 協議的狀況下是無效的。

 

end