jQuery Academy · 课时

AJAX 操作

Q: 「AJAX 操作」这节课中我会学到什么？

AJAX 操作 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

AJAX 操作 是 CoddyKit 上的免费 jQuery Academy 课时。这是第 1 节课，共 1 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 1 节课。

简介

您好：

在本课中，我们将学习如何使用 jQuery AJAX 方法与远程服务器进行交互。

AJAX（异步 JavaScript 和 XML）是一种能够在不刷新网页的情况下，与服务器异步传输数据的技术。

这会改善用户体验，尤其是因为数据可以在不刷新页面的情况下传输。

Ajax 示例

尤其是 Facebook、Gmail、Youtube 等全球最受欢迎的 Web 应用，经常使用 AJAX 技术。

事实上，与其把 AJAX 看作一种新技术，不如把它看作一种使用 JavaScript 在服务器和客户端之间进行异步数据传输的方法。

下面让我们来看一个使用 AJAX 的函数示例。

例如，您在 youtube.com 上观看视频并点击了点赞按钮。在这种情况下，点赞事件会在 youtube 页面刷新之前，在后台传输到 youtube 服务器。

这个过程就是通过 AJAX 请求完成的。

Ajax 示例

让我们来看一个 AJAX 请求示例。

下面是使用 AJAX 向 https://api.coddykit.com/api/coddy-test 发出的 GET 请求代码。

这是使用 Vanilla JavaScript 编写的，正如您所见，其语法稍微有些棘手。

<div id="result"></div>

<script>
 var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 
        && this.status == 200) {
      //we are writing the AJAX request response 
      //to div element that has result id
      var result = document.getElementById('result');
      result.innerHTML = JSON.stringify(this.responseText);
    }
  };
  xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
  xhttp.send();
</script>

警告

正如我们之前所说，jQuery 不仅是一个 DOM 修改库，还提供了用于简化 AJAX 操作的方法。

Ajax 方法

我们可以使用一个相当简单的方法，通过 jQuery 管理 AJAX 请求。

借助 ajax() 方法，我们可以轻松使用 Web 世界中常见的 HTTP 方法，例如 get、post 或 put。

Ajax 方法的语法如下。

$.ajax ({

url: 'remote URL'.

data: 'Data that we will send',

method: 'HTTP Method - Default GET',

success: 'Here, we should define function that work when Ajax get success result',

dataType: 'Interaction data type'

});

让我们来编写一个示例

<div id="result"></div>

<script>
$.ajax ({
   url: 'https://api.coddykit.com/api/coddy-test',
   success: function(data){
   $('#result').text(JSON.stringify(data));
  }
});

</script>

Ajax GET 请求示例

Ajax GET 请求

现在，让我们改进一下示例。

在下面的示例中，我们向 URL（https://api.coddykit.com/api/coddy-test）发送了一个 ajax 请求。

如果未定义 HTTP 方法，默认会发送 GET 请求。

const https = require('https');

function ajax(url) {
  const callbacks = { success: [], fail: [], always: [] };
  const req = https.get(url, (res) => {
    let data = '';
    res.on('data', chunk => data += chunk);
    res.on('end', () => {
      callbacks.success.forEach(cb => cb(data));
      callbacks.always.forEach(cb => cb());
    });
  });
  req.on('error', (err) => {
    callbacks.fail.forEach(cb => cb(err));
    callbacks.always.forEach(cb => cb());
  });
  return {
    done: function(cb) { callbacks.success.push(cb); return this; },
    fail: function(cb) { callbacks.fail.push(cb); return this; },
    always: function(cb) { callbacks.always.push(cb); return this; }
  };
}

var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
  .done(function() {
   //success callback
  /*
  If our get request is sent to 
  the server with success (HTTP 2xx), 
  this function is called.
 */
  })
  .fail(function() {
   /* This function works 
       if the AJAX request fails.
   */
  })
  .always(function() {
   /*
   This function works in all cases when 
    the AJAX request is 
    successful or unsuccessful.
   */
  });

get 方法

$.get() 方法和 Get 请求

我们可以使用 $.get() 方法向服务器发送 HTTP get 请求。

此方法由 jQuery 提供。与 Vanilla JavaScript 相比，它让我们可以通过更简洁、更易读的代码发送 GET 请求。

让我们来看一个示例，并注意代码缩短了多少。

<div id="result"></div> 

<script>
$.get("https://api.coddykit.com/api/coddy-test", 
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

Post 方法

$.post() 方法和 Post 请求

我们可以使用 $.post() 方法向服务器发送 HTTP Post 请求。

让我们编写一个示例，并注意代码有多么简洁。

我们会经常使用 post 请求，尤其是在向服务器提交 Web 表单时。

<div id="result"></div> 

<script>
$.post("https://api.coddykit.com/api/coddy-test", 
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

Put 方法

Put 请求

我们可以使用 $.put() 方法向服务器发送 HTTP Put 请求。

让我们来编写一个示例。

<div id="result"></div> 

<script>
$.ajax({
method:'PUT', 
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

Delete 方法

Delete 请求

我们可以使用 $.delete() 方法向服务器发送 HTTP Delete 请求。

让我们来编写一个示例

<div id="result"></div> 

<script>
$.ajax({
method:'DELETE', 
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

链接

您可以通过下面的链接查看有关 AJAX 方法的示例和详细信息。

恭喜

恭喜您 🎉

本节中，我们学习了使用 jQuery 的 AJAX。

感谢您在 jQuery 初学者课程中一路相伴 🎉🎉🎉

现在，您可以参加考试，并获得 jQuery 初学者教程课程的证书 🚀🚀🚀

常见问题解答

「AJAX 操作」课时是免费的吗？

是的 — 「AJAX 操作」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 1 节课。

「AJAX 操作」这节课中我会学到什么？

AJAX 操作你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 1 节。

「AJAX 操作」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

← 返回 jQuery Academy