技術標籤：jquery ajax請求前端不走ajax前端獲取支付寶返回的form

一、前端進行網路請求的關注點

大多數情況下，在前端發起一個網路請求我們只需關注下面幾點：

• 傳入基本引數(url，請求方式)
• 請求引數、請求引數型別
• 設定請求頭
• 獲取響應的方式
• 獲取響應頭、響應狀態、響應結果
• 異常處理
• 攜帶cookie設定
• 跨域請求

二、前端進行網路請求的方式

• form表單、ifream、重新整理頁面
• Ajax - 非同步網路請求的開山鼻祖
• jQuery - 一個時代
• fetch - Ajax的替代者
• axios、request等眾多開源庫

三、關於網路請求的疑問

• Ajax的出現解決了什麼問題
• 原生Ajax如何使用
• jQuery的網路請求方式
• fetch的用法以及坑點
• 如何正確的使用fetch
• 如何選擇合適的跨域方式

帶著以上這些問題、關注點我們對幾種網路請求進行一次全面的分析。

四、Ajax的出現解決了什麼問題

在Ajax出現之前，web程式是這樣工作的：

這種互動的的缺陷是顯而易見的，任何和伺服器的互動都需要重新整理頁面，使用者體驗非常差，Ajax的出現解決了這個問題。Ajax全稱Asynchronous JavaScript + XML(非同步JavaScript和XML)

使用Ajax，網頁應用能夠快速地將增量更新呈現在使用者介面上，而不需要過載(重新整理)整個頁面。

Ajax本身不是一種新技術，而是用來描述一種使用現有技術集合實現的一個技術方案，瀏覽器的XMLHttpRequest是實現Ajax最重要的物件(IE6以下使用ActiveXObject)。

儘管X在Ajax中代表XML, 但由於JSON的許多優勢，比如更加輕量以及作為Javascript的一部分，目前JSON的使用比XML更加普遍。

五、原生Ajax的用法

這裡主要分析XMLHttpRequest物件，下面是它的一段基礎使用：

 var xhr = new XMLHttpRequest(); xhr.open('post','www.xxx.com',true) // 接收返回值 xhr.onreadystatechange = function(){ if(xhr.readyState === 4 ){ if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ console.log(xhr.responseText); } } } // 處理請求引數 postData = {"name1":"value1