likes
comments
collection
share

让我们来初步探索ajax吧！！！

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

ajax是什么

Ajax代表"Asynchronous JavaScript and XML"（异步JavaScript和XML），是一种用于创建交互式网页应用程序的技术。Ajax使用多种现有的技术，包括JavaScript、XML、HTML、CSS和XMLHttpRequest等。

使用Ajax技术，可以向服务器发送请求并获取数据，然后使用JavaScript来处理这些数据并在页面上动态更新内容，而无需重新加载整个页面。这种方式可以提高用户体验，使得网页更加灵活和交互性强。 我们可以用下面这张图片来了解一下

让我们来初步探索ajax吧！！！

ajax的作用

  1. 异步数据交换： Ajax允许网页在不刷新整个页面的情况下与服务器进行数据交换。通过异步请求，可以从服务器获取数据或发送数据，实现部分页面内容的更新，而不影响整个页面的加载和展示。
  2. 实时更新内容： 可以实现实时数据的动态加载和更新，例如动态加载新的内容、实时聊天、展示最新的信息等。这种实时性能够为用户提供更好的使用体验。
  3. 页面局部刷新： 能够局部刷新页面的某一部分内容，提高页面的动态性和交互性。这有助于减少页面刷新次数，加快页面响应速度。
  4. 减少服务器负担： 通过Ajax，可以在用户操作时仅更新需要改变的部分，而不需要重新加载整个页面，有助于减少服务器的负担和节省带宽。
  5. 提高用户体验： Ajax技术可以使用户更加方便快捷地获取所需内容，不必等待整个页面的重新加载。这样的交互方式更符合用户的预期，提高了用户满意度和使用体验。

总体来说，Ajax的作用是通过异步数据传输，实现了页面与服务器之间的高效通信，使得网页变得更加动态、灵活，并且更加响应用户的操作，提升了用户体验。

如何实现一个ajax呢？

实现Ajax请求的基本步骤如下：

  1. 创建XMLHttpRequest对象： 使用new XMLHttpRequest()创建一个XMLHttpRequest对象，用于执行异步HTTP请求。
  2. 指定请求的处理程序： 使用onreadystatechange属性指定请求状态发生变化时的处理程序。
  3. 打开连接： 使用open()方法设置请求的HTTP方法（GET、POST等）、URL和是否异步标志位。
  4. 发送请求： 使用send()方法发送HTTP请求。对于POST请求，您还可以设置请求头并传递请求主体。
  5. 处理响应： 在onreadystatechange事件处理程序中，检查请求状态。当readyState变为XMLHttpRequest.DONE（值为4）时，表示请求完成。然后检查status属性，200表示请求成功，其它状态码表示请求出错。
  6. 处理响应数据： 如果请求成功（status为200），可以通过responseText或responseXML属性获取响应数据，并对其进行处理。

笔者将使用下列的例子来说明如何手写一个ajax：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax</title>
</head>
<body>
  <script>
// 手写ajax  异步同步
  // xhr对象
  // 流程 open send onreadystatechange，状态码 200 4
  // promise 封装 resolve reject

  const  fetchJSONData = function(url){
    // 在开始的时候是pending状态 一旦成功就是resolve 一旦失败就是reject
    return new Promise((resolve,reject)=>{ // resolve 成功 reject 失败
      // 创建一个耗时任务的容器
      console.log('开始写ajax');
      // 兼容性处理 IE6之前不支持XMLHttpRequest 之前都是ActiveXObject IE->Edge
      const xhr = new XMLHttpRequest() ? new XMLHttpRequest()
      : new ActiveXObject('Microsoft.XMLHTTP');

      xhr.open('GET',url,false);// true 异步 false 同步
      // 宏任务 事件监听
      xhr.onreadystatechange=function(){
        if(xhr.readyState !== 4) return;
        // 展示一下能力 304 Not Modified(未修改)
        if(xhr.status === 200 || xhr.status === 304){// 请求成功 或者 未修改
          resolve(xhr.responseText);// 成功
        }else{
          reject(new Error(xhr.responseText));// 失败
        }
      }
      xhr.send();// 发送请求
    })
  };
// 刚开始的时候是pending状态 -> fulfilled状态
 (async function(){ //立即执行函数
  const p = fetchJSONData('https://api.github.com/users/wxc4234/repos');
  console.log('---');
  console.log(p);// pending状态
  const res = await p;//异步变同步，等待p的结果
  console.log(p);
  })()
  </script>
</body>
</html>

代码逻辑：

  • 首先我们定义了一个 fetchJSONData 函数，这个函数用于执行异步的 HTTP GET 请求，并返回一个 Promise 对象。
  • fetchJSONData 函数接受一个 URL 参数，用于指定要请求的资源地址。
  • 在函数内部，我们创建了一个 XMLHttpRequest 对象，用于发送 HTTP 请求。
  • 使用 xhr.open() 方法打开一个 URL（GET 请求），第三个参数为 false 表示同步请求，为 true 表示异步请求。
  • 同时设置了 onreadystatechange 事件监听器，当请求状态发生变化时，会执行相应的回调函数。
  • 在 onreadystatechange 中，通过 xhr.readyState 来判断请求状态。当状态为 4 表示请求已完成，根据 xhr.status 判断请求结果，200 或 304 表示请求成功，而为什么我们可以凭借304表示成功呢？因为浏览器会缓存数据,304就是从缓存中获取数据的，不会再次请求服务器，,所以不会有响应体,所以xhr.responseText是空的。
  • 如果请求成功，使用 resolve(xhr.responseText) 将获取到的响应数据传递给 Promise 的 resolve 函数。如果请求失败，使用 reject(new Error(xhr.responseText)) 将错误信息传递给 Promise 的 reject 函数。
  • 使用 async function 立即执行函数，在这个函数内，调用了 fetchJSONData 函数，传入了一个地址，并通过 await 等待这个异步操作的结果，将结果打印输出。
这样，我们就实现了一个ajax请求了。

结语

ajax的核心思想在于通过异步数据传输，在不需要刷新整个页面的情况下与服务器进行数据交换。通过Ajax，网页可以在后台与服务器进行数据交换，并在不干扰当前页面的情况下更新部分内容。这种技术使得网页能够更快速、更动态地响应用户的操作。

优势：

  • 实现异步数据传输，提升页面响应速度。
  • 允许在不刷新页面的情况下更新部分内容。
  • 提高用户体验，增加页面的动态性和交互性。

缺点：

  • 对搜索引擎的友好程度不高。搜索引擎爬虫难以获取通过 Ajax 加载的内容。
  • 可能会导致页面状态不可控，增加了程序复杂性。
  • 安全性问题，Ajax 可能导致跨站脚本攻击（XSS）等安全隐患。

综上所述，就是笔者对于ajax初步理解了，有所不足之处，欢迎大家指导。