Ajax及其应用

qq_53547087

已于 2023-03-19 13:20:33 修改

阅读量61

点赞数

文章标签： ajax javascript 服务器 Powered by 金山文档

于 2023-03-19 12:59:22 首次发布

本文链接：https://blog.csdn.net/qq_53547087/article/details/129649369

版权

上周我们学习了相关的Ajax技术以及应用，接下来我对几下几点有如下看法。

对Ajax工作原理进行分析。

首先要了解一个新知识，也得知道他的名字有何意义，是什么意思，而AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法，用于实现与服务器异步交互的功能。

它的工作原理很复杂，Ajax的工作原理相当于在用户和服务器之间加了—个中间层，也叫做AJAX引擎，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从而减少了刷新。

对XMLHttpRequest对象的属性、方法和事件进行深入理解。

上面我们说道Ajax简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。而这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解，包括它的属性，

XMLHttpRequest对象：由浏览器提供，开发者可以使用它发出HTTP和HTTPS请求。不需要刷新(重新提交)页面，就可以获取服务器最新的相应，从而修改页面的内容。

其中我们最常用的几个属性分别是如下几个：

2.1 onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。

下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

用法如下：

xmlHttp.onreadystatechange = function() {

//在其中写入一些方法

}

2.2readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState 属性可能的值：

responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。在我们的代码中，我们将把时间文本框的值设置为等于responseText：

 responseText：
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

以JSONPlaceHolder为数据服务，编写案例，以进一步阐述Ajax及XMLHttpRequest对象的用法，尽可能涉及更多的应用场景。

获取用户列表案例

这个应用场景是获取用户列表，我们将通过XMLHttpRequest对象向JSONPlaceHolder发送GET请求，并在页面上显示获取到的用户信息。具体代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>Ajax案例</title>
  </head>
  <body>
    <button onclick="getdata()">GetUsers</button>
    <ul id="user-list"></ul>
  </body>
</html>

<script>
  function getdata() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var users = JSON.parse(xhr.responseText);
        var list = document.getElementById("user-list");
        list.innerHTML = "";
        for (var i = 0; i < users.length; i++) {
          var li = document.createElement("li");
          li.textContent = users[i].name;
          list.appendChild(li);
        }
      }
    };
    xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
    xhr.send();
  }
</script>

在这个案例中，我们定义了一个名为getdata的函数，当点击按钮时就会调用该函数。函数内部创建了一个XMLHttpRequest对象，并设置了onreadystatechange事件处理函数。当readyState属性变为4（即请求成功完成）且status属性为200时，表示已经接收到响应数据，我们解析JSON格式的响应内容，然后遍历所有用户信息，并将它们添加到页面上的ul元素中。