likes
comments
collection
share

跟ChatGPT学JS：第六节课-AJAX

作者站长头像
站长
· 阅读数 38

接下来继续展开讲第六节课的详细内容，按照大纲里面第六节课中的详细知识点，添加详细的内容，包括知识点详细讲解和代码例子，最后留两道课后练习。记得第六节课的主题是AJAX。

好的，以下是第六节课的详细内容。

AJAX

AJAX，全称为 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是一种用于创建快速动态网页的技术。它可以在不刷新整个页面的情况下向服务器发送请求和接收响应，并对页面局部进行更新。AJAX 的核心技术是 XMLHttpRequest 对象。

XMLHttpRequest

XMLHttpRequest 对象用于向服务器发送请求和接收响应。可以通过它来实现 AJAX 的各种功能。以下是 XMLHttpRequest 对象的常用属性和方法。

常用属性：

  • readyState：表示请求的状态，有 0（未初始化）、1（已打开）、2（已发送）、3（接收中）、4（已完成）五个取值。
  • responseText：响应内容的文本形式。
  • responseXML：响应内容的 XML 形式。
  • status：响应的 HTTP 状态码。

常用方法：

  • open(method, url, async)：打开一个 HTTP 请求。
  • send(data)：发送 HTTP 请求。
  • abort()：取消当前请求。
  • setRequestHeader(header, value)：设置请求头。

以下是一个使用 XMLHttpRequest 对象获取数据的例子：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
};
xhr.open('GET', 'http://example.com/data.json', true);
xhr.send();

jQuery AJAX

jQuery 提供了方便的 AJAX 接口，可以大大简化 AJAX 请求的过程。以下是一些常用的 jQuery AJAX 方法。

$.ajax() 方法

$.ajax() 方法是 jQuery 中最基本的 AJAX 方法。它接受一个对象作为参数，用于配置 AJAX 请求的各种参数。以下是一些常用参数。

  • url：请求的地址。
  • type：请求类型，可选值有 GET、POST 等。
  • data：发送给服务器的数据。
  • dataType：服务器返回的数据类型，可选值有 xml、json、html、text 等。
  • success：请求成功时的回调函数。
  • error：请求失败时的回调函数。

以下是一个使用 $.ajax() 方法获取数据的例子：

$.ajax({
  url: 'http://example.com/data.json',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.log(error);
  }
});

.get()和.get() 和 .get()和.post() 方法

.get()和.get() 和 .get()和.post() 方法是 .ajax()方法的简化版，用于发送GET和POST请求。它们接受三个参数，分别是请求地址、发送给服务器的数据和回调函数。以下是一个使用.ajax() 方法的简化版，用于发送 GET 和 POST 请求。它们接受三个参数，分别是请求地址、发送给服务器的数据和回调函数。以下是一个使用 .ajax()方法的简化版，用于发送GET和POST请求。它们接受三个参数，分别是请求地址、发送给服务器的数据和回调函数。以下是一个使用.get() 方法获取数据的例子：

$.get('http://example.com/data.json', function(data) {
  console.log(data);
});

$.getJSON() 方法

.getJSON()方法是.getJSON() 方法是 .getJSON()方法是.ajax() 方法的简化版，用于获取 JSON 格式的数据。它接受两个参数，分别是请求地址和回调函数。以下是一个使用 $.getJSON() 方法获取数据的例子：

$.getJSON()的例子还没写完，从这里继续，把例子代码写完

好的，接着上面的代码，我们继续写完 $.getJSON() 方法的例子：

$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_APPID", function(data){
      $("#weather").html(data.weather[0].description);
    });
  });
});

这个例子中，我们使用了 jQuery 的 $.getJSON() 方法从一个 API 中获取天气数据，并把数据显示在页面上。当用户点击页面上的按钮时，就会触发 click 事件，然后调用 $.getJSON() 方法，向指定的 API 发送请求，并在获取到响应后执行回调函数。在回调函数中，我们把获取到的天气数据中的 description 属性显示在了一个指定的 HTML 元素上。

这个例子中的 API 使用的是 OpenWeatherMap 提供的天气 API，你需要在 URL 中使用你自己的 APP ID 才能成功请求数据。

通过这个例子，我们可以看到，使用 $.getJSON() 方法可以很方便地从一个远程的 API 中获取数据，然后在页面上展示出来。

接下来，我们还可以使用 $.ajax() 方法进行更加灵活的 AJAX 请求。

下面是一个使用 $.ajax() 方法发送 POST 请求的例子：

$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
      url: "https://example.com/api/users",
      type: "POST",
      data: {
        name: "John Doe",
        email: "johndoe@example.com"
      },
      success: function(response){
        console.log(response);
      },
      error: function(jqXHR, textStatus, errorThrown){
        console.log(textStatus, errorThrown);
      }
    });
  });
});

这个例子中，我们使用了 $.ajax() 方法向一个 API 发送了一个 POST 请求，并在成功或者失败后分别执行不同的回调函数。在这个例子中，我们指定了请求的 URL、请求的类型、请求的数据以及成功和失败后要执行的回调函数。

通过这个例子，我们可以看到，使用 $.ajax() 方法可以很灵活地发送各种类型的 AJAX 请求，并可以根据需要来定制请求的参数和回调函数。

最后，我们需要注意，当我们向远程 API 发送 AJAX 请求时，可能会遇到一些安全性的问题，例如跨域请求、CSRF 攻击等。我们需要了解这些安全问题，然后根据需要来采取相应的措施来保证 AJAX 请求的安全性。

继续，总结一下AJAX这节课的内容，最后布置两道练习题

在这节课中，我们学习了AJAX的基础知识，包括使用原生XMLHttpRequest对象和jQuery的ajax()方法发送请求和接收响应，处理JSON数据和错误处理。我们还讨论了如何使用AJAX更新页面内容、发送表单数据和跨域请求的方法。AJAX技术可以在不刷新整个页面的情况下更新页面内容，从而提高用户体验。

以下是两道练习题：

练习1：

使用jQuery的ajax()方法发送GET请求，获取 jsonplaceholder.typicode.com/users 页面的数据，并在控制台中输出。

练习2：

使用原生XMLHttpRequest对象发送POST请求，将以下数据以JSON格式发送到 jsonplaceholder.typicode.com/posts 页面：

{
  "title": "foo",
  "body": "bar",
  "userId": 1
}

并在控制台中输出服务器返回的响应。

转载自:https://juejin.cn/post/7202066150939082811
评论
请登录