CoffeeScript 不使用 jQuery 的 Ajax 請(qǐng)求

2018-06-05 14:21 更新

不使用 jQuery 的 Ajax 請(qǐng)求

問題

你想要通過AJAX來從你的服務(wù)器加載數(shù)據(jù)，而不使用jQuery庫。

解決方案

你將使用本地的XMLHttpRequest對(duì)象。

通過一個(gè)按鈕來打開一個(gè)簡單的測(cè)試HTML頁面。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest Tester</title>
</head>
<body>
    <h1>XMLHttpRequest Tester</h1>
    <button id="loadDataButton">Load Data</button>

    <script type="text/javascript" src="XMLHttpRequest.js"></script>
</body>
</html>

當(dāng)單擊該按鈕時(shí)，我們想給服務(wù)器發(fā)送Ajax請(qǐng)求以獲取一些數(shù)據(jù)。對(duì)于該例子，我們使用一個(gè)JSON小文件。

// data.json
{
  message: "Hello World"
}

然后，創(chuàng)建CoffeeScript文件來保存頁面邏輯。此文件中的代碼創(chuàng)建了一個(gè)函數(shù)，當(dāng)點(diǎn)擊加載數(shù)據(jù)按鈕時(shí)將會(huì)調(diào)用該函數(shù)。

1 # XMLHttpRequest.coffee
2 loadDataFromServer = ->
3   req = new XMLHttpRequest()
4 
5   req.addEventListener 'readystatechange', ->
6     if req.readyState is 4                        # ReadyState Complete
7       successResultCodes = [200, 304]
8       if req.status in successResultCodes
9         data = eval '(' + req.responseText + ')'
10         console.log 'data message: ', data.message
11       else
12         console.log 'Error loading data...'
13 
14   req.open 'GET', 'data.json', false
15   req.send()
16 
17 loadDataButton = document.getElementById 'loadDataButton'
18 loadDataButton.addEventListener 'click', loadDataFromServer, false

討論

在以上代碼中，我們對(duì)HTML中按鍵進(jìn)行了處理（第16行）以及添加了一個(gè)單擊事件監(jiān)聽器（第17行）。在事件監(jiān)聽器中，我們把回調(diào)函數(shù)定義為loadDataFromServer。

我們?cè)诘?行定義了loadDataFromServer回調(diào)的開頭。

我們創(chuàng)建了一個(gè)XMLHttpRequest請(qǐng)求對(duì)象（第 3 行），并添加了一個(gè)readystatechange事件處理器。請(qǐng)求的readyState發(fā)生改變的那一刻，它就會(huì)被觸發(fā)。

在事件處理器中，我們會(huì)檢查判斷是否滿足readyState=4，若等于則說明請(qǐng)求已經(jīng)完成。然后檢查請(qǐng)求的狀態(tài)值。狀態(tài)值為200或者304都代表著請(qǐng)求成功，其它則表示發(fā)生錯(cuò)誤。

如果請(qǐng)求確實(shí)成功了，那我們就會(huì)對(duì)從服務(wù)器返回的JSON重新進(jìn)行運(yùn)算，然后把它分配給一個(gè)數(shù)據(jù)變量。此時(shí)，我們可以在需要的時(shí)候使用返回的數(shù)據(jù)。

在最后我們需要提出請(qǐng)求。

在第13行打開了一個(gè)“GET”請(qǐng)求來讀取data.json文件。

在第14行把我們的請(qǐng)求發(fā)送至服務(wù)器。

舊版服務(wù)器支持

如果你的應(yīng)用需要使用舊版本的Internet Explorer ，你需確保XMLHttpRequest對(duì)象存在。為此，你可以在創(chuàng)建XMLHttpRequest實(shí)例之前輸入以下代碼。

if (typeof @XMLHttpRequest == "undefined")
  console.log 'XMLHttpRequest is undefined'
  @XMLHttpRequest = ->
    try
      return new ActiveXObject("Msxml2.XMLHTTP.6.0")
    catch error
    try
      return new ActiveXObject("Msxml2.XMLHTTP.3.0")
    catch error
    try
      return new ActiveXObject("Microsoft.XMLHTTP")
    catch error
    throw new Error("This browser does not support XMLHttpRequest.")

這段代碼確保了XMLHttpRequest對(duì)象在全局命名空間中可用。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)