📌  相关文章
📜  阿贾克斯介绍

📅  最后修改于: 2022-05-13 01:56:51.535000             🧑  作者: Mango

阿贾克斯介绍

介绍：
以下教程将简要介绍 Ajax 及其使用。在理解这些术语之前，请先看几个实际示例来展示 Ajax 的强大功能。 Facebook、Instagram、Twitter 等被认为是检查新闻提要时的情况，如果喜欢有人发帖，只需单击点赞按钮，就可以在不刷新页面的情况下添加点赞数。现在想象一下如果有这种情况的情况，点击like按钮，整个页面会再次加载，就会进行这样的处理。现在的问题是是否再次单击按钮以完成需要完整加载网页的小任务。绝对不会，因为没有人会做这种荒谬的事情（在后一种情况下）。所以这意味着喜欢这个功能非常有用，因为它可以防止重新加载整个页面。它只与服务器通信必要的信息并向最终用户显示（在这种情况下是增加喜欢计数）。
考虑访问谷歌搜索任何内容时的另一种情况。通常，观察当开始输入所需的关键字进行搜索时，观察到搜索栏中显示了许多建议。现在，他们来自哪里？当然不是从客户端。结果再次是与服务器通信的能力，而无需再次重新加载页面。
像这样，有几十个例子可以考虑。背后的全部力量不过是阿贾克斯。让我们简要讨论一下 Ajax 及其实现。

什么是阿贾克斯？
Ajax 是 Asynchronous Javascript 和 XML 的首字母缩写词。它用于在不刷新网页的情况下与服务器通信，从而增加用户体验和更好的性能。

先决条件：
理解文章的后半部分不需要这样的先决条件。只有 HTML、CSS 和 Javascript 的基本知识才可以。

它是如何工作的？
首先，让我们了解异步的实际含义。有两种类型的请求同步和异步。同步请求是顺序跟随的请求，即如果一个进程正在进行，同时另一个进程想要执行，则不允许，这意味着一次只执行一个进程。这不好，因为在这种类型中，CPU 大部分时间保持空闲，例如在进程中的 I/O 操作期间，这比 CPU 处理指令慢一个数量级。从而使 CPU 和其他资源的充分利用使用异步调用。欲了解更多信息，请访问此链接。为什么这里会出现 javascript 这个词。实际上，请求是通过使用 javascript 函数发出的。现在术语 XML 用于创建XMLHttpRequest 对象。
因此上述解释的总结是，Ajax 允许通过在后台与服务器交换少量数据来异步更新网页。现在讨论重要部分及其实现。为了实现 Ajax，只需要知道 XMLHttpRequest 对象。现在，它实际上是什么。它是用于在后台与服务器交换数据的对象。试着记住 OOP 的范式，它说对象通过调用方法（或一般意义上的消息传递）进行通信。同样的情况也适用于此。通常，创建此对象并使用它来调用导致有效通信的方法。所有现代浏览器都支持 XMLHttpRequest 对象。

基本语法：创建对象的语法如下

req = new XMLHttpRequest();

有两种类型的方法 open() 和 send()。下面解释这些方法的用途。 

req.open("GET", "abc.php", true);
req.send();

上面两行描述了这两种方法。 req 代表请求，它基本上是一个引用变量。 GET 参数通常是发送请求的两种方法之一。根据是通过 POST 还是 GET 方法发送数据，也可以使用 POST。第二个参数是实际处理请求并处理它们的文件的名称。第三个参数为true，它告诉请求是异步处理还是同步处理。默认情况下为 true，这意味着请求是异步的。 open() 方法在将请求发送到服务器之前准备好请求。 send 方法用于将请求发送到服务器。
通过 get 或 POST 请求发送参数。语法如下

req.open("GET", "abc.php?x=25", true);
req.send();

在上面的代码行中，指定查询形式为 URL 后跟 ?后面是变量的名称 then = ，然后是相应的值。如果发送两个或多个变量，请在两个变量之间使用 & 号。上面显示的方法适用于 GET 请求。通过 POST 发送数据，然后在 send 方法中发送，如下所示。 

req.send("name=johndoe&marks=99");

.

使用 setRequestHeader() 方法如下所示。 

req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

事件及处理机制：
在点击按钮上执行的任何操作、悬停在元素上、页面加载等都被称为事件。还知道javascript可以检测事件的事实。因此，将特定事件的代码与其可以通过javascript实现的动作绑定。这些基本上是事件处理程序。
实现实际保存事件的事件处理程序。事件处理程序基本上是用 javascript 编写的函数，当用户触发事件时，它们会执行或设置动作。通过 send 方法发送请求时，通常稍后会从服务器获得响应。但是响应时间的获取是未知的。所以跟踪它。
因此，要跟踪与事件处理程序（函数）绑定的响应 onreadystatechange 事件，该事件处理程序将在响应到来时执行。
当向服务器发送请求时，根据响应执行操作。每次 readyState 改变时都会触发 onreadystatechange 事件。那么实际就绪状态是什么，onreadystate 事件何时会真正发生，以及在请求和响应之间会发生多少次？
XMLHttpRequest 对象有一个称为 readyState 的属性，其值在整个请求-响应过程中发生变化，即请求准备、发送、解析、处理以及响应何时到来。这就是为什么它被称为 os onreadystatechange。
onreadystatechange 存储了一个函数（或函数的名称），每次 readyState 属性更改时都会自动调用该函数。
readyState 保存从 0 到 4 的不同值。

  1. 请求未初始化
  2. 服务器连接建立
  3. 收到请求
  4. 处理请求
  5. 请求已完成，响应已准备好

XMLHttpRequest 还有一个名为 status 的属性。状态具有以下值

  • 200：“好的”
  • 404页面不存在”

现在请记住，当 readyState 为 4 且 status 为 200 时，响应已就绪。
上面描述的整个事情都是在编码中实现的，如下所示

< /p>
req.onreadystatechange = function(){
  if(req.readyState == 4 && req.status == 200){
      document.getElementById("dis").innerHTML = req.responseText;
  }
}

（注意：这只是一段代码，而且描述了客户端和服务器之间的通信，所以上面描述的代码如果在IDE上运行不会显示任何效果）
在上面的代码中，如果条件为真（即响应已准备好），则显示结果。
好处：

  1. 由于无需再次重新加载页面，速度得到了提高。
  2. AJAX 对 Web 服务器进行异步调用，这意味着客户端浏览器避免在开始渲染之前等待所有数据到达。
  3. 表单验证可以通过它成功完成。
  4. 带宽利用率——当从同一页面获取数据时，它可以节省内存。
  5. 更具互动性。

缺点：

  1. Ajax 依赖于 Javascript。如果浏览器或操作系统中存在一些 Javascript 问题，Ajax 将不支持。
  2. Ajax 在搜索引擎中可能会出现问题，因为它的大部分部分都使用 Javascript。
  3. 用 AJAX 编写的源代码易于人类阅读。 Ajax 中会有一些安全问题。
  4. 调试很困难。
  5. 使用启用 AJAX 的页面时浏览器后退按钮出现问题。