📌  相关文章
📜  AJAX-快速指南

📅  最后修改于: 2020-10-28 04:38:57             🧑  作者: Mango

什么是AJAX？

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

  • Ajax使用XHTML表示内容，使用CSS表示，以及使用Document Object Model和JavaScript进行动态内容显示。

  • 常规的Web应用程序使用同步请求向服务器发送信息或从服务器发送信息。这意味着您填写表格，点击提交，并使用服务器上的新信息将您定向到新页面。

  • 使用AJAX，当您单击“提交”时，JavaScript将向服务器发出请求，解释结果并更新当前屏幕。从最纯粹的意义上讲，用户永远不会知道任何内容都已传输到服务器。

  • XML通常用作接收服务器数据的格式，尽管可以使用任何格式，包括纯文本。

  • AJAX是一种独立于Web服务器软件的Web浏览器技术。

  • 当客户端程序在后台从服务器请求信息时，用户可以继续使用该应用程序。

  • 直观自然的用户交互。不需要单击，鼠标移动足以触发事件。

  • 数据驱动而不是页面驱动。

富互联网应用技术

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

AJAX基于开放标准

AJAX基于以下开放标准-

  • 使用HTML和级联样式表（CSS）的基于浏览器的演示。
  • 数据以XML格式存储并从服务器获取。
  • 使用浏览器中的XMLHttpRequest对象获取后台数据。
  • JavaScript使一切变为现实。

AJAX-技术

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

的JavaScript

  • 松散键入的脚本语言。
  • 当页面中发生事件时，将调用JavaScript函数。
  • 胶水用于整个AJAX操作。

DOM

  • 用于访问和处理结构化文档的API。
  • 表示XML和HTML文档的结构。

的CSS

  • 允许将演示样式与内容清晰地分开，并且可以通过JavaScript以编程方式进行更改

XMLHttpRequest

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

AJAX-示例

这是一些使用AJAX的著名Web应用程序的列表。

谷歌地图

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

谷歌建议

键入时，Google提供建议。使用箭头键浏览结果。

邮箱

Gmail是一种网络邮件，其构想是电子邮件可以更加直观，高效和有用。

雅虎地图（新）

现在，前往目的地将更加轻松有趣。

AJAX与常规CGI程序之间的区别

逐一尝试这两个示例，您会感到与众不同。在尝试AJAX示例时，不会出现中断，并且可以非常迅速地获得响应，但是在尝试标准GCI示例时，您将不得不等待响应，并且页面也会刷新。

AJAX示例

* =

标准范例

* =

注–我们在AJAX数据库中给出了更复杂的示例。

AJAX-浏览器支持

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

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

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

注–当我们说浏览器不支持AJAX时，仅表示该浏览器不支持创建Javascript对象– XMLHttpRequest对象。

编写浏览器特定的代码

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


      
      

         Name:  

         Time:

在上面的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-动作

本章为您清晰介绍了AJAX操作的确切步骤。

AJAX操作步骤

  • 发生客户端事件。
  • 创建一个XMLHttpRequest对象。
  • XMLHttpRequest对象已配置。
  • XMLHttpRequest对象向Web服务器发出异步请求。
  • Web服务器返回包含XML文档的结果。
  • XMLHttpRequest对象调用callback（）函数并处理结果。
  • HTML DOM已更新。

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

发生客户事件

  • 事件的结果称为JavaScript函数。

  • 示例-validateUserId（） JavaScript函数作为事件处理程序映射到ID设置为“ userid”的输入表单字段上的onkeyup事件

  • 。

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;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

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

Web服务器返回包含XML文档的结果

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

  • 从客户端获取请求。
  • 解析来自客户端的输入。
  • 做所需的处理。
  • 将输出发送到客户端。

如果我们假设您要编写一个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("true");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("false");
   }
}

调用回调函数processRequest（）

XMLHttpRequest对象被配置为在XMLHttpRequest对象的readyState发生状态更改时调用processRequest（）函数。现在，此函数将从服务器接收结果并执行所需的处理。如下例所示，它根据Web服务器返回的值将变量消息设置为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修改元素的属性。修改元素的样式属性；或添加，删除或修改子元素。这是一个例子-

如果您已了解上述七个步骤，那么您几乎可以使用AJAX了。在下一章中，我们将更详细地介绍XMLHttpRequest对象。

AJAX-XMLHttpRequest

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

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

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

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

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

XMLHttpRequest方法

  • abort（）

    取消当前请求。

  • getAllResponseHeaders（）

    以字符串返回完整的HTTP标头集。

  • getResponseHeader（headerName）

    返回指定的HTTP标头的值。

  • open（方法，URL）

  • open（方法，URL，异步）

  • open（方法，URL，异步，用户名）

  • 打开（方法，URL，异步，用户名，密码）

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

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

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

  • 发送（内容）

    发送请求。

  • setRequestHeader（label，value）

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

XMLHttpRequest属性

  • 就绪状态变更

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

  • readyState

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

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

State Description
0 The request is not initialized.
1 The request has been set up.
2 The request has been sent.
3 The request is in process.
4 The request is completed.

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

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

readyState = 2调用send（）之后。

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

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

  • responseText

    以字符串返回响应。

  • responseXML

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

  • 状态

    以数字形式返回状态（例如，“ 404”表示“找不到”，200表示“确定”）。

  • statusText

    以字符串返回状态（例如，“未找到”或“确定”）。

AJAX-数据库操作

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

注–我们假设您具有足够的特权来执行以下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，它将具有以下代码-



      

         Max Age:  

         Max WPM:  

         Sex: 
         
         
         
         
      

      
      
Your result will display here

注–在查询中传递变量的方式符合HTTP标准，并且具有formA。

URL?variable1 = value1;&variable2 = value2;

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

最高年龄：

最大WPM：

性别：

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

注意-这是一个虚拟屏幕。

服务器端PHP文件

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

";
$display_string .= "";
$display_string .= "Name";
$display_string .= "Age";
$display_string .= "Sex";
$display_string .= "WPM";
$display_string .= "";

// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)) {
   $display_string .= "";
   $display_string .= "$row[name]";
   $display_string .= "$row[age]";
   $display_string .= "$row[sex]";
   $display_string .= "$row[wpm]";
   $display_string .= "";
}

echo "Query: " . $query . "
";
$display_string .= "";

echo $display_string;
?>

现在尝试在“最大年龄”或任何其他框中输入有效值（例如120），然后单击“查询MySQL”按钮。

最高年龄：

最大WPM：

性别：

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

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

AJAX-安全

AJAX安全：服务器端

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

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

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

AJAX安全性：客户端

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

  • JavaScript代码是从服务器上下载的，并在客户端执行（“评估”），并且可能因恶意代码而损害客户端。

  • 下载的JavaScript代码受沙盒安全模型的约束，可以放宽使用已签名的JavaScript。

AJAX-当前问题

AJAX增长非常快，这就是它包含很多问题的原因。我们希望随着时间的流逝，它们将得到解决，并且AJAX将成为Web应用程序的理想选择。我们列出了AJAX当前遭受的一些问题。

复杂度增加

  • 服务器端开发人员将需要理解，HTML客户端页面以及服务器端逻辑都将需要呈现逻辑。

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

基于AJAX的应用程序可能难以调试，测试和维护

  • JavaScript很难测试-自动测试很难。
  • JavaScript中的模块性弱。
  • 尚缺乏设计模式或最佳实践准则。

工具包/框架尚未成熟

  • 他们大多数处于beta阶段。

尚未对XMLHttpRequest进行标准化

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

旧版浏览器不支持XMLHttpRequest

  • iframe将有所帮助。

JavaScript技术依赖性和不兼容性

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

JavaScript代码对黑客可见

  • 设计不当的JavaScript代码可能会引发安全问题。