目录

AJAX - 快速指南

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应用程序列表。

谷歌地图

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

Google Suggest

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

Gmail

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

Yahoo Maps (new)

现在,到达目的地更方便,更有趣!

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>

在上面的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;
         }
      }
   }
}

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);
}

对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>
}

假设您在用户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>");
   }
}

回调函数调用processRequest()

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

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

HTML DOM已更新

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

  • JavaScript使用DOM API获取对页面中任何元素的引用。
  • 获取元素引用的推荐方法是调用。
document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document
  • 现在可以使用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>

如果你已经理解了上面提到的七个步骤,那么你几乎已经完成了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')
) 

现在使用以下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);

客户端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>

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

URL?variable1 = value1;&variable2 = value2;

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

最大年龄:

Max WPM:

性别:

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

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;
?>

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

最大年龄:

Max WPM:

性别:

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

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

AJAX - Security

AJAX安全性:服务器端

  • 基于AJAX的Web应用程序使用与常规Web应用程序相同的服务器端安全方案。

  • 您可以在web.xml文件(声明性)或程序(程序)中指定身份验证,授权和数据保护要求。

  • 基于AJAX的Web应用程序受到与常规Web应用程序相同的安全威胁。

AJAX安全:客户端

  • JavaScript代码对用户/黑客可见。 黑客可以使用JavaScript代码来推断服务器端的弱点。

  • JavaScript代码从服务器下载并在客户端执行(“eval”),并可能通过恶意代码破坏客户端。

  • 下载的JavaScript代码受到沙盒安全模型的约束,可以放宽签名的JavaScript。

AJAX - Current Issues

AJAX正在快速增长,这就是它包含许多问题的原因。 我们希望随着时间的推移,它们将得到解决,AJAX将成为Web应用程序的理想选择。 我们列出了AJAX目前遇到的一些问题。

Complexity is increased

  • 服务器端开发人员需要了解HTML客户端页面以及服务器端逻辑中将需要表示逻辑。

  • 页面开发人员必须具备JavaScript技术技能。

AJAX-based applications can be difficult to debug, test, and maintain

  • JavaScript很难测试 - 自动测试很难。
  • JavaScript中的模块化程度较低。
  • 尚缺乏设计模式或最佳实践指南。

Toolkits/Frameworks are not mature yet

  • 他们中的大多数都处于测试阶段。

No standardization of the XMLHttpRequest yet

  • IE的未来版本将解决这个问题。

No support of XMLHttpRequest in old browsers

  • Iframe will help.

JavaScript technology dependency and incompatibility

  • 必须启用应用程序才能运行。
  • 仍然存在一些浏览器不兼容性。

JavaScript code is visible to a hacker

  • 设计糟糕的JavaScript代码可能会引发安全问题。
<上一篇.AJAX - Issues
↑回到顶部↑
WIKI教程 @2018