📜  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代码可能会引发安全问题。