AJAX技术详解：原理、应用与挑战-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_50414588/article/details/123889145

What is AJAX?

AJAX代表A同步Ja vaScript和X ML。 AJAX是一种借助XML，HTML，CSS和Java Script创建更好，更快，更交互的Web应用程序的新技术。

Ajax使用XHTML作为内容，CSS使用文档对象模型和JavaScript进行动态内容显示。
传统的Web应用程序使用同步请求向服务器和从服务器发送信息。这意味着您填写表单，点击提交，然后从服务器获取包含新信息的新页面。
使用AJAX，当您点击提交时，JavaScript将向服务器发出请求，解释结果并更新当前屏幕。从最纯粹的意义上讲，用户永远不会知道任何东西甚至被传输到服务器。
XML通常用作接收服务器数据的格式，但可以使用任何格式（包括纯文本）。
AJAX是一种独立于Web服务器软件的Web浏览器技术。
当客户端程序在后台请求来自服务器的信息时，用户可以继续使用该应用程序。
直观和自然的用户交互。单击不是必需的，鼠标移动是一个足够的事件触发器。
数据驱动而不是页面驱动。

丰富的Internet应用技术

到目前为止，AJAX是最可行的富Internet应用程序（RIA）技术。它正在获得巨大的行业动力，并且正在出现一些工具包和框架。但与此同时，AJAX具有浏览器不兼容性，它受JavaScript支持，难以维护和调试。

AJAX基于开放标准

AJAX基于以下开放标准 -

使用HTML和层叠样式表（CSS）的基于浏览器的演示文稿。
数据以XML格式存储并从服务器获取。
在浏览器中使用XMLHttpRequest对象获取幕后数据。
JavaScript让一切都成真。

AJAX - Technologies

AJAX不能独立工作。它与其他技术结合使用来创建交互式网页。

JavaScript

松散类型的脚本语言。
在页面中发生事件时调用JavaScript函数。
整个AJAX操作的胶水。

DOM

用于访问和操作结构化文档的API。
表示XML和HTML文档的结构。

CSS

允许将演示样式与内容明确分开，并可通过JavaScript以编程方式进行更改

XMLHttpRequest

与服务器执行异步交互的JavaScript对象。

AJAX - Examples

以下是一些使用AJAX的着名Web应用程序列表。

谷歌地图

用户可以使用鼠标拖动整个地图，而不是单击按钮。

https://maps.google.com/

Google Suggest

在您输入时，Google会提供建议。使用箭头键导航结果。

https://www.google.com/webhp?complete=1&hl=en

Gmail

Gmail是一种基于以下想法的网络邮件:电子邮件可以更直观，更有效，更实用。

https://gmail.com/

Yahoo Maps (new)

现在，到达目的地更方便，更有趣！

https://maps.yahoo.com/

AJAX与传统CGI程序的区别

逐一尝试这两个例子，你会感受到不同。在尝试AJAX示例时，没有不连续性并且您可以非常快速地获得响应，但是当您尝试标准GCI示例时，您将不得不等待响应并且您的页面也会得到刷新。

AJAX示例

* =

标准示例

* =

NOTE - 我们在AJAX数据库中给出了一个更复杂的例子。

AJAX - Browser Support

所有可用的浏览器都不支持AJAX。以下是支持AJAX的主要浏览器列表。

Mozilla Firefox 1.0及以上版本。
Netscape 7.1及以上版本。
Apple Safari 1.2及以上版本。
Microsoft Internet Explorer 5及更高版本。
Konqueror.
Opera 7.6及以上版本。

编写下一个应用程序时，请考虑不支持AJAX的浏览器。

NOTE - 当我们说浏览器不支持AJAX时，它只是意味着浏览器不支持创建Javascript对象 - XMLHttpRequest对象。

编写浏览器特定代码

使源代码与浏览器兼容的最简单方法是在JavaScript中使用try...catch块。

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            try {
               // Opera 8.0+, Firefox, Safari 
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
         }
         //-->
      </script>
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
   </body>
</html>
12345678910111213141516171819202122232425262728293031323334

在上面的JavaScript代码中，我们尝试三次来创建XMLHttpRequest对象。我们的第一次尝试

ajaxRequest = new XMLHttpRequest（）;

它适用于Opera 8.0 +，Firefox和Safari浏览器。如果失败，我们再尝试两次为Internet Explorer浏览器制作正确的对象 -

ajaxRequest = new ActiveXObject（“Msxml2.XMLHTTP”）;
ajaxRequest = new ActiveXObject（“Microsoft.XMLHTTP”）;

如果它不起作用，那么我们可以使用一个非常过时的浏览器，它不支持XMLHttpRequest，这也意味着它不支持AJAX。

但最有可能的是，我们的变量ajaxRequest现在将设置为浏览器使用的任何XMLHttpRequest标准，我们可以开始向服务器发送数据。步骤式AJAX工作流程将在下一章中介绍。

AJAX - Action

本章为您提供了AJAX操作的确切步骤的清晰图片。

AJAX操作的步骤

A client event occurs.
创建XMLHttpRequest对象。
XMLHttpRequest对象已配置。
XMLHttpRequest对象向Web服务器发出异步请求。
Web服务器返回包含XML文档的结果。
XMLHttpRequest对象调用callback（）函数并处理结果。
HTML DOM已更新。

让我们逐一采取这些步骤。

发生客户端事件

JavaScript函数作为事件的结果被调用。
示例 - validateUserId() JavaScript函数被映射为输入表单字段上的onkeyup事件的事件处理程序，其id设置为"userid"
。

XMLHttpRequest对象已创建

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}
123456789101112131415161718192021

XMLHttpRequest对象已配置

在这一步中，我们将编写一个将由客户端事件触发的函数，并将注册一个回调函数processRequest（）。

function validateUserId() {
   ajaxFunction();
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}
12345678910

对Web服务器进行异步请求

源代码可在上面的代码中找到。以粗体字体编写的代码负责向Web服务器发出请求。这都是使用XMLHttpRequest对象ajaxRequest 。

function validateUserId() {
   ajaxFunction();
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   <b class="notranslate">if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);</b>
}
12345678910

假设您在用户ID框中输入Zara，然后在上述请求中，URL设置为“validate？id = Zara”。

Webserver返回包含XML文档的结果

您可以使用任何语言实现服务器端脚本，但其逻辑应如下所示。

从客户端获取请求。
解析客户端的输入。
Do required processing.
将输出发送到客户端。

如果我们假设你要编写一个servlet，那么这是一段代码。

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}
1234567891011121314

回调函数调用processRequest（）

XMLHttpRequest对象配置为在XMLHttpRequest对象的readyState状态发生更改时调用processRequest（）函数。现在，此函数将从服务器接收结果，并将执行所需的处理。如下例所示，它根据Webserver的返回值设置变量消息的true或false。

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}
12345678

HTML DOM已更新

这是最后一步，在此步骤中，您的HTML页面将会更新。它以下列方式发生 -

JavaScript使用DOM API获取对页面中任何元素的引用。
获取元素引用的推荐方法是调用。

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document
1234

现在可以使用JavaScript来修改元素的属性; 修改元素的样式属性; 或添加，删除或修改子元素。这是一个例子 -

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      var messageBody = document.createTextNode(messageText);
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>
<body>
   <div id = "userIdMessage"><div>
</body>
123456789101112131415161718192021222324252627

如果你已经理解了上面提到的七个步骤，那么你几乎已经完成了AJAX。在下一章中，我们将更详细地看到XMLHttpRequest对象。

AJAX - XMLHttpRequest

XMLHttpRequest对象是AJAX的关键。自Internet Explorer 5.5于2000年7月发布以来，它一直可用，但直到2005年的AJAX和Web 2.0开始流行才被完全发现。

XMLHttpRequest（XHR）是一种API，可以被JavaScript，JScript，VBScript和其他Web浏览器脚本语言用于使用HTTP在Web服务器之间传输和操作XML数据，在网页的客户端和网络端之间建立独立的连接通道。服务器端。

从XMLHttpRequest调用返回的数据通常由后端数据库提供。除了XML之外，XMLHttpRequest还可用于获取其他格式的数据，例如JSON甚至纯文本。

您已经看过几个关于如何创建XMLHttpRequest对象的示例。

下面列出了一些您必须熟悉的方法和属性。

XMLHttpRequest方法

abort()

取消当前请求。
getAllResponseHeaders()

以字符串形式返回完整的HTTP标头集。
getResponseHeader( headerName )

返回指定HTTP标头的值。
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )

指定请求的方法，URL和其他可选属性。

方法参数可以具有值“GET”，“POST”或“HEAD”。其他HTTP方法（如“PUT”和“DELETE”（主要用于REST应用程序））也是可能的。

“async”参数指定是否应异步处理请求。 “true”表示脚本处理在send（）方法之后继续而不等待响应，“false”表示脚本在继续脚本处理之前等待响应。
send( content )

发送请求。
setRequestHeader( label, value )

将标签/值对添加到要发送的HTTP标头。

XMLHttpRequest属性

onreadystatechange

每个状态更改时触发的事件的事件处理程序。
readyState

readyState属性定义XMLHttpRequest对象的当前状态。

下表提供了readyState属性的可能值列表 -

州	描述
0	请求未初始化。
1	请求已设置。
2	请求已发送。
3	请求正在进行中。
4	请求已完成。

readyState = 0创建XMLHttpRequest对象之后，但在调用open（）方法之前。

readyState = 1调用open（）方法之后，但在调用send（）之前。

readyState = 2调用send（）之后。

readyState = 3浏览器与服务器建立通信后，但在服务器完成响应之前。

readyState = 4请求完成后，响应数据已完全从服务器接收。

responseText

以字符串形式返回响应。
responseXML

以XML格式返回响应。此属性返回XML文档对象，可以使用W3C DOM节点树方法和属性检查和解析该对象。
status

将状态返回为数字（例如，“Not Found”为404，“OK”为200）。
statusText

以字符串形式返回状态（例如，“Not Found”或“OK”）。

AJAX - Database Operations

为了清楚地说明使用AJAX从数据库访问信息是多么容易，我们将动态构建MySQL查询并在“ajax.html”上显示结果。但在我们开始之前，让我们做好基础工作。使用以下命令创建表。

NOTE - 我们假设您有足够的权限执行以下MySQL操作。

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
) 
12345678

现在使用以下SQL语句将以下数据转储到此表中 -

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);
1234567

客户端HTML文件

现在让我们使用客户端HTML文件，即ajax.html，它将具有以下代码 -

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>
      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

NOTE - 在Query中传递变量的方式是根据HTTP标准并具有formA。

URL?variable1 = value1;&variable2 = value2;
12

上面的代码将为您提供如下屏幕 -

最大年龄:

Max WPM:

性别: 米 F

输入后，您的结果将显示在此部分中。

NOTE - 这是一个虚拟屏幕。

服务器端PHP文件

您的客户端脚本已准备就绪。现在，我们必须编写服务器端脚本，它将从数据库中获取年龄，wpm和性别，并将其发送回客户端。将以下代码放入文件“ajax-example.php”中。

<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
if(is_numeric($age))
   $query .= " AND age <= $age";
if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)) {
   $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

现在尝试在Max Age或任何其他框中输入有效值（例如120），然后单击Query MySQL按钮。

最大年龄:

Max WPM:

性别: 米 F

输入后，您的结果将显示在此部分中。

如果您已成功完成本课程，那么您就知道如何使用MySQL，PHP，HTML和Javascript来编写AJAX应用程序。