react ajax開發可以用：1、jQuery的「$.ajax」方法；2、Fetch API；3、SuperAgent，它是一個輕量級的AJAX API函式庫；4、Axios函式庫，主要是用於向後台發起請求的；5、Request庫。
本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。
這是一個快速又粗的方案。在舊版的官方 React 教學（official React tutorial）中，他們使用了 jQuery $.ajax 來示範如何從伺服器取得資料。如果你是剛開始學習和把玩 React，jQuery 可以節省你大量入門和開發的時間，因為我們都對 jQuery 非常熟悉了。這是jQuery 實作AJAX 的範例：
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data}); // 注意这里
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
}P.S. 這程式碼段摘自舊版的官方教學
##這裡示範如何在一個React 元件裡面使用jQuery 的$.ajax。唯一要注意的是如何在 success 回呼裡面呼叫 this.setState() ，即當 jQuery 成功收到資料之後應該如何透過 React 的 API 更新 state 的。
fetch API。
Fetch 是個新的、簡單的、標準化的API，旨在統一Web通訊機制，並取代XMLHttpRequest。它已經被主流瀏覽器所支持，針對較舊的瀏覽器也有了一個polyfill （Benz亂入：polyfill 直譯是填充工具，就是舊瀏覽器本來不支援某個新的JS API，引入一段js程式碼後就支持了，這一段js程式碼給舊瀏覽器」填入「了一個API。這個字我實在不知道怎麼翻譯，感覺反而保留原字不翻譯更能讓讀者理解。）。如果你在使用 Node.js ，你也可以透過 node-fetch 來讓 Node.js 支援 Fetch。
$.ajax 的程式碼段改成fetch 實作的話，程式碼應該長這樣子：
loadCommentsFromServer: function() {
fetch(this.props.url).then(function(response){
// 在这儿实现 setState
});
}fetch 的身影。要了解更多關於fetch 的情況，可參考下列連結（全英文）：
SuperAgent 是一個輕量級的AJAX API 函式庫，為更好的可讀性和靈活性而生。如果某些原因讓你不太想用
fetch，那麼 SuperAgent 就幾乎是必然的選擇了。 SuperAgent 的用法大概是這樣的：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="has">loadCommentsFromServer: function() {
request.get(this.props.url).end(function(err,res){
// 在这儿实现 setState
});
}</pre><div class="contentsignin">登入後複製</div></div>SuperAgent 也有 Node.js 版本，API 是一樣的。如果你在用Node.js 和React 開發同構應用程式
，你可以用webpack 之類的東西嵌入superagent 並讓它適用於瀏覽器端。因為瀏覽器端和伺服器端的 API 是一樣的，所以其 Node.js 版本不需要修改任何程式碼就可以在瀏覽器上執行。
Axios 是基於promise 物件
（Benz 亂入：這個連結也是我加的）的HTTP 用戶端；axios主要是用來向後台發起請求的，還有在請求中做更多是可控功能。 。與 fetch 和 superagent 一樣，它同時支援瀏覽器端和 Node.js 端。另外你可以在其 Github 主頁上發現，它有很多很實用的高級功能。 這是Axios 的大概用法：
loadCommentsFromServer: function() {
axios.get(this.props.url).then(function(response){
// 在这儿实现 setState
}).catch(function(error){
// 处理请求出错的情况
});
}#若不介紹這個request 函式庫，感覺上本文會不太完整。這是一個在思想上追求極簡設計的JS庫，在 Github 上擁有超過 12k 的 star
（Benz 亂入：我翻譯這篇文章時已經 16k star 了）。它也是最受歡迎的 Node.js 模組之一。進入它的 GitHub 主頁 了解更多。 用法範例：
loadCommentsFromServer: function() {
request(this.props.url, function(err, response, body){
// 在这儿实现 setState
});
}【相關推薦：
Redis影片教學以上是react ajax開發用什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
