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;
上面的代码将为您提供如下屏幕 -
输入后,您的结果将显示在此部分中。
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按钮。
输入后,您的结果将显示在此部分中。
如果您已成功完成本课程,那么您就知道如何使用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代码可能会引发安全问题。