如何在PHP和jQuery、JavaScript中使用AJAX(完美详解)

作者 1,804

今天更新于2019年6月10日，下面由SKY8G网编辑者讲解PHP实现AJAX的概念。AJAX技术帮助我们改进应用程序的用户界面，并增强总体的最终用户体验。

什么是AJAX呢？

AJAX代表异步JavaScript和XML，它允许您异步地从后端服务器获取内容，而无需刷新页面。因此，它允许您更新网页的内容而无需重新加载。

让我们看一个例子，了解如何在日常应用程序开发中使用AJAX。如果我们构建一个显示用户个人资料信息的页面，其中包含个人信息，社交信息，通知，消息等。

1. 通常的方法是为每个部分构建不同的网页。因此例如，用户将点击社交信息链接以重新加载浏览器并显示具有社交信息的页面。但是这使得在各部分之间导航变得更慢，因为用户必须等待浏览器重新加载并且每次都要再次渲染页面。

2.另一方面，您还可以使用AJAX构建一个加载所有信息的界面，而无需刷新页面。在这种情况下，您可以为所有部分显示不同的选项卡，通过单击选项卡，它从后端服务器获取相应的内容并更新页面而不刷新浏览器。这有助于您改善整体最终用户体验。

整个AJAX调用的工作原理如下：

让我们快速浏览一下通常的AJAX流程：

  1. 首先，用户像往常一样使用同步请求打开网页。
  2. 接下来，用户单击DOM元素 – 通常是按钮或链接 – 启动对后端服务器的异步请求。最终用户不会注意到这一点，因为调用是异步进行的，并且不会刷新浏览器。但是，您可以使用Firebug之类的工具来发现这些AJAX调用。
  3. 响应AJAX请求，服务器可以返回XML，JSON或HTML字符串数据。
  4. 使用JavaScript解析响应数据。
  5. 最后，解析的数据在网页的DOM中更新。

如您所见，网页使用来自服务器的实时数据进行更新，无需重新加载浏览器。

使用JavaScript实现AJAX

让我们看看下面的JavaScript代码，它执行AJAX调用并异步从服务器获取响应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var objXMLHttpRequest = new XMLHttpRequest();
objXMLHttpRequest.onreadystatechange = function() {
  if(objXMLHttpRequest.readyState === 4) {
    if(objXMLHttpRequest.status === 200) {
          alert(objXMLHttpRequest.responseText);
    } else {
          alert('Error Code: ' +  objXMLHttpRequest.status);
          alert('Error Message: ' + objXMLHttpRequest.statusText);
    }
  }
}
objXMLHttpRequest.open('GET', 'request_ajax_data.php');
objXMLHttpRequest.send();
</script>

让我们通过上面的代码来解释下发生的事情。

  1. 首先，我们初始化XMLHttpRequest对象，该对象负责进行AJAX调用。
  2. 该XMLHttpRequest对象具有一个readyState属性，该属性的值在请求生命周期中发生更改。它可以容纳四个值之一：OPENED，HEADERS_RECEIVED，LOADING，和DONE。
  3. 我们可以使用onreadystatechange属性为状态更改设置一个侦听器函数。这就是我们在上面的例子中所做的：我们使用了一个函数，每次更改state属性时都会调用它。
  4. 在该函数中，我们检查了readyState值是否等于  4，这意味着请求已完成，并且我们已从服务器获得响应。接下来，我们检查状态代码是否等于  200，这意味着请求成功。最后，我们获取存储在对象responseText属性中的响应XMLHttpRequest。
  5. 设置监听器后，我们通过调用对象的open方法来启动请求XMLHttpRequest。readyState此调用后，属性值将设置为1。
  6. 最后，我们调用了对象的send方法XMLHttpRequest，它实际上将请求发送到服务器。readyState此调用后，属性值将设置为2。
  7. 当服务器响应时，它最终会将readyState值设置  为4，您应该会看到一个警告框，显示来自服务器的响应。

这就是AJAX如何与纯JavaScript一起使用。当然，这是演示AJAX概念的一个非常简单的例子，在现实环境中的应用程序中，事情会变得相当复杂，因为您需要处理许多不同的成功和失败场景。因此，选择一个浏览器特定复杂性的JavaScript库是个好主意！

在前面的部分中，我们讨论了如何使用JavaScript执行AJAX调用。在本节中，我们将使用jQuery库来演示这一点。我假设您已经了解了jQuery库的基础知识。

jQuery库提供了一些不同的方法来执行AJAX调用，虽然这里我们将看一下ajax最常用的标准方法。

看一下下面的第一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$.ajax(
  'request_ajax_data.php',
  {
      success: function(data) {
        alert('AJAX call was successful!');
        alert('Data from the server' + data);
      },
      error: function() {
        alert('There was some error performing the AJAX call!');
      }
   }
);
</script>

如您所知，该$符号用于引用jQuery对象。

该ajax方法的第一个参数是将在后台调用以从服务器端获取内容的URL。第二个参数采用JSON格式，允许您为ajax方法支持的某些不同选项指定值。

在大多数情况下，您需要指定成功和错误回调。成功完成AJAX调用后将调用成功回调。服务器返回的响应将传递给成功回调。另一方面，如果出现问题并且执行AJAX调用时出现问题，将调用失败回调。

如您所见，使用jQuery库执行AJAX操作很容易。事实上，无论您选择执行AJAX调用的JavaScript库如何，该过程都或多或少相同。

再看一下下面的第二个例子jQuery中使用ajax，使用jQuery.post() 不包含.done()方法:

1
2
3
4
5
6
7
8
9
var postUrl = "http://example.com" + "<front_name>/<controller_name>/<action>";
$.post(postUrl,
  {productId: "11", productSku: "test-sku", submit:true},
  function(data, textStatus, jqXHR) {
    //data - response from server
  }
).fail(function(jqXHR, textStatus, errorThrown) {
  alert(textStatus);
});

最后看一下下面的第三个例子jQuery中使用ajax， 使用jQuery.post() 包含.done() 和.fail()方法:

1
2
3
4
5
6
7
8
var postUrl = "http://example.com" + "<front_name>/<controller_name>/<action>";
$.post(postUrl,
   {productId: "11", productSku: "test-sku", submit:true}
).done(function(data, textStatus, jqXHR) {
    //data - response from server
}).fail(function(jqXHR, textStatus, errorThrown) {
  alert(textStatus);
});

通过以上三个例子，相信你可以使用任意一种在你的项目开发中。

在本节中，SKY8G编辑者将讲述如何使用AJAX从服务器端的PHP文件中获取JSON内容的示例。

为了让你容易理解，我们将构建一个使用AJAX和jQuery执行用户登录的示例。首先，让我们创建index.php文件，如下面的代码片段所示，它呈现一个基本的登录表单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html>
<head>
<script src="jquery-3.3.1.js"  crossorigin="anonymous"></script>
</head>
<body>
<form id="loginform" method="post">
    <div>
        Username:
        <input type="text" name="username" id="username" />
        Password:
        <input type="password" name="password" id="password" />    
        <input type="submit" name="loginBtn" id="loginBtn" value="Login" />
    </div>
</form>
<script type="text/javascript">
$(document).ready(function() {
    $('#loginform').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'login.php',
            data: $(this).serialize(),
            success: function(response)
            {
                var jsonData = JSON.parse(response);
                // user is logged in successfully in the back-end
                // let's redirect
                if (jsonData.success == "1")
                {
                    location.href = 'my_profile.php';
                }
                else
                {
                    alert('Invalid Credentials!');
                }
           }
       });
     });
});
</script>
</body>
</html>

该 index.php文件是一个非常标准的HTML表单包含用户名和密码字段。它还包含一个jQuery JavaScript代码段，它遵循我们在上面看到的大纲。

我们使用了submit表单元素的事件，当用户点击提交按钮时会触发该事件。在该事件处理程序中，我们启动了AJAX调用，它使用POST方法异步地将表单数据提交到login.php文件。一旦我们收到服务器的响应，我们就会使用对象的parse方法解析它JSON。最后，基于成功或失败，我们采取适当的行动。

让我们看看  login.php的  样子。

1
2
3
4
5
6
7
8
9
10
<?php
if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {
    // 是否按照您的要求进行用户身份验证
    // ...
    // ...
    // 基于成功的身份验证
    echo json_encode(array('success' => 1));
} else {
    echo json_encode(array('success' => 0));
}

综上所述 login.php  文件包含验证用户的逻辑，并返回基于登录的成功或失败的JSON响应。

总结

在本教程中，我们讨论了AJAX的基础知识以及它在PHP中的工作原理。在本文的前半部分，我们研究了AJAX如何在JS和jQuery库中运行。在后半部分，我们讲解了一个真实示例，演示了如何使用AJAX来获取服务器端PHP内容。

如果有不懂的地方请留言，SKY8G网站编辑者专注于研究IT源代码研究与开发。希望你下次光临，你的认可和留言是对我们最大的支持，谢谢！

上一篇: HTML5调用摄像头Camera和视频Video

下一篇: PHP模数运算符(详解)

请 登录 评论
avatar