超级会员免费看
Ajax应用：优势、劣势与REST的完美结合
1. Ajax的优势
当你试用del.icio.us客户端时，会发现一些源自Web浏览器环境的出色特性。
-
易于实现GUI
：与传统示例不同，这个应用程序拥有图形用户界面（GUI），而且实现起来相当容易。通过调用一些看似只是操作神秘文档数据结构的方法，实际上就能改变最终用户对应用程序的视图。因为浏览器知道如何将文档的更改转换为GUI布局的更改，所以无需像传统GUI程序那样进行小部件创建和布局规范。
-
自动解析XML响应
：该客户端无需显式解析来自del.icio.us Web服务的XML响应。Web浏览器内置了XML解析器，XMLHttpRequest会自动将Web服务响应中的任何XML文档解析为DOM对象。你可以通过XMLHttpRequest.responseXML成员访问该DOM对象，并使用如getElementsByTagName等方法遍历其子节点，或使用XPath表达式进行搜索。
-
处理HTTP基本认证
：尝试在不提供用户名和密码的情况下加载HTML文件并点击提交按钮，会弹出一个对话框要求输入del.icio.us用户名和密码，这与浏览器访问需要HTTP基本认证的页面时弹出的对话框相同。不同的是，这里是通过触发Ajax应用程序中的操作来实现的，而不是点击URI链接。此外，由于Web浏览器是最流行的HTTP客户端，并且能够处理HTTP的各种特殊情况，即使从HTML表单中移除文本字段，Ajax应用程序仍然可以正常工作，因为真实的Web浏览器有自己的用户界面来收集基本HTTP认证信息。
2. Ajax的劣势
- 浏览器兼容性问题 ：由于目前使用的Web浏览器种类繁多，如果希望应用程序在所有浏览器中都能正常工作，就需要处理一系列新的特殊情况。
- 安全信任问题 ：最终用户为什么要信任Web服务客户端是一个问题。虽然你可能会信任浏览器来保存del.icio.us的用户名和密码，但这个Web服务客户端只是利用浏览器进行HTTP请求，它在请求中可能会执行任何操作。从安全角度来看，这与使用其他编程语言编写的独立del.icio.us客户端没有本质区别，但Web浏览器有安全模型来限制不可信网页在JavaScript中所能做的事情。例如，即使调用了netscape.security.PrivilegeManager.enablePrivilege请求浏览器允许进行跨域HTTP请求和使用XML解析器，仍然可能会收到浏览器安全消息，询问是否接受这种有风险的行为。目前大多数Ajax应用程序与它们访问的Web服务来自同一域名，这是JavaScript Web服务客户端与其他语言编写的客户端的根本区别。浏览器的安全模型虽然不会完全阻止你编写针对其他Web服务的XMLHttpRequest应用程序，但会使其变得困难。
3. REST与Ajax的完美结合
Ajax应用程序是Web服务客户端，那么为什么它们尤其适合作为RESTful Web服务的客户端呢？
-
REST架构的优势
：一般来说，应用程序各部分之间的接口很重要。如果RESTful架构能产生更好的Web服务，那么即使只有你自己使用该服务，也能从中受益。此外，如果你的应用程序提供了有用的功能，人们会了解你的Web服务并编写自己的客户端。因此，面向资源的架构是最佳设计。
-
Web浏览器环境的支持
：Ajax客户端嵌入在Web浏览器中，而Web浏览器环境加强了对REST的支持。大多数Web浏览器为XMLHttpRequest提供了对五种基本HTTP方法的访问，并允许自定义请求头和请求体。Ajax调用与最终用户的其他Web浏览在相同的环境中进行，如果客户端需要通过代理进行HTTP请求，可以假设用户已经进行了配置。而且，Ajax请求会发送与其他浏览器请求相同的Cookie和基本认证头，通常可以对网站和Ajax服务使用相同的认证机制和用户账户。Ajax架构的“获取URI”和“使用URI的数据修改视图”步骤与面向资源的架构非常契合，Ajax应用程序可以聚合大量资源的信息，并随着资源状态的变化逐步改变GUI。REST的架构优势同样适用于Ajax客户端，例如，如果服务器不保留任何应用程序状态，就无需协调浏览器的应用程序状态与服务器状态。
4. 发起请求
在Ajax中，最常用的客户端语言是JavaScript。主要的Web浏览器都实现了一个名为XMLHttpRequest的JavaScript HTTP客户端库。
-
创建XMLHttpRequest对象
：创建HTTP请求需要创建一个XMLHttpRequest对象，不同的Web浏览器在这方面存在差异。在Mozilla系列浏览器（如Firefox）中，可以使用以下简单的构造函数：
request = new XMLHttpRequest();
- 调用open方法 ：调用XMLHttpRequest.open方法，提供请求的相关信息。除前两个参数外，其他参数都是可选的：
request.open([HTTP method], [URI], true, [Basic auth username], [Basic auth password]);
其中，第三个参数硬编码为true，表示浏览器将异步执行请求，允许用户在请求进行时进行其他操作。为了避免锁定浏览器，不建议将其设置为同步请求。同时，需要设置一个处理函数，在请求完成时调用：
request.onReadyStateChange = [Name of handler function];
- 设置请求头 ：如果需要设置HTTP请求头，可以使用setRequestHeader方法：
request.setRequestHeader([Header name], [Header value]);
- 发送请求 ：调用send方法将请求发送到HTTP服务器。如果请求是POST或PUT请求，应将需要发送的实体主体作为参数传递给send方法；对于其他请求，参数应为null：
request.send([Entity-body]);
如果一切顺利，处理函数将在HTTP请求的生命周期内被调用四次，每次request.readyState的值都不同。当request.readyState的值为4时，表示请求已完成，可以处理响应。
5. 处理响应
当请求完成后，浏览器会最后一次调用处理函数。此时，XMLHttpRequest实例会获得一些新的有用属性和方法：
-
status属性
：包含请求的数字状态码。
-
responseXML属性
：包含一个预解析的DOM对象，表示响应文档（前提是响应以XML格式提供，并且浏览器能够解析它）。HTML（即使是XHTML）除非以XML媒体类型（如application/xml或application/xhtml+xml）提供，否则不会被解析到responseXML中。
-
responseText属性
：将响应文档作为原始字符串包含在内，当响应是JSON或其他非XML格式时非常有用。
-
getResponseHeader方法
：通过传入HTTP头的名称，可以查找该头的值。
Web浏览器采用树状解析策略将文档转换为数据结构。在JavaScript中进行Web服务请求时，responseXML属性将响应文档以树的形式提供，可以使用标准化的DOM操作方法访问该表示。虽然DOM接口非常复杂，但可以使用如getElementByID等方法导航树，并使用evaluate方法运行XPath查询。此外，在Ajax应用程序中，HTML文档是用户界面，可以使用相同的DOM方法来操作它，将Web服务发送的原始数据与最终用户看到的HTML GUI连接起来。例如，createTextNode和createElement方法在处理中非常有用。
6. JSON的应用
JSON在之前的内容中已有提及，它是一种推荐的表示格式。下面是一个调用Yahoo!图像搜索Web服务的Ajax客户端示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/transitional.dtd">
<!--yahoo-ajax.html-->
<!--An Ajax application that uses the JSON output feature of Yahoo!
Web Services-->
<html>
<head><title>Javascript Yahoo! JSN</title></head>
<body>
<h1>Javascript Yahoo! JSON example</h1>
<p id="message">Loading pictures of baby elephants!</p>
<div id="images">
</div>
<script type="text/javascript">
function formatImages(result)
{
var images = document.getElementById("images");
items = result["ResultSet"]["Result"];
document.getElementById("message").firstChild.textContent =
items.length + " baby elephant pictures:";
for (var i = 0; i < items.length; i++)
{
image = items[i];
// Create a link
var link = document.createElement("a");
link.setAttribute("href", image["ClickUrl"]);
// Put a thumbnail image in the link.
var img = document.createElement("img");
var thumbnail = image["Thumbnail"];
img.setAttribute("src", thumbnail["Url"]);
img.setAttribute("width", thumbnail["Width"]);
img.setAttribute("height", thumbnail["Height"]);
img.setAttribute("title", image["Height"]);
link.appendChild(img);
images.appendChild(link);
}
}
</script>
<script type="text/javascript"
src="http://api.search.yahoo.com/ImageSearchService/V1/imageSearch
?appid=restbook&query=baby+elephant&output=json&callback=formatImages" />
</body>
</html>
在Web浏览器中加载这个HTML文件，你会看到一些可爱的小象图片，并且不会看到浏览器安全警告。这是因为该Ajax客户端没有通过XMLHttpRequest进行调用，而是使用了JavaScript on Demand（JoD）技术。JoD通过从Web服务获取自定义生成的JavaScript绕过了浏览器的安全策略，由于任何JSON数据结构都是有效的JavaScript程序，因此这种技术在处理提供JSON表示的Web服务时非常有效。
7. 避免独占REST的优势
Ajax应用程序很容易独占REST的所有优势，而不给最终用户留下任何好处。例如，Gmail的Ajax应用程序从使用可寻址、无状态的Web服务中受益匪浅，但从用户体验的角度来看，最终用户看到的只是一个不断变化的HTML页面，无法对搜索结果或特定电子邮件消息进行书签操作。通常，浏览器的后退和前进按钮可以让用户在应用程序状态之间来回切换，但使用典型的Ajax应用程序时，后退按钮会失效，因为它不会让用户回到应用程序的上一个状态，而是回到使用Ajax应用程序之前的页面。Ajax应用程序将最终用户与HTTP请求 - 响应周期分离，当访问Ajax应用程序的URI时，用户就离开了Web，开始使用一个在后台进行HTTP请求并将数据整合到GUI中的GUI应用程序。不过，Ajax应用程序可以通过将REST的优势融入用户界面，为用户提供这些好处。
综上所述，Ajax应用程序具有诸多优势，但也存在一些劣势。通过与RESTful Web服务结合，并合理处理请求和响应，同时注意避免独占REST的优势，可以开发出更加优秀的Web应用程序。在实际开发中，需要充分考虑浏览器兼容性、安全性等问题，并根据具体需求选择合适的技术和方法。
Ajax应用：优势、劣势与REST的完美结合
8. 深入分析Ajax请求与响应流程
为了更清晰地理解Ajax请求与响应的过程，我们可以用一个流程图来展示其详细步骤。
graph TD;
A[创建XMLHttpRequest对象] --> B[调用open方法设置请求信息];
B --> C[设置请求头（可选）];
C --> D[设置处理函数];
D --> E[调用send方法发送请求];
E --> F{请求是否完成};
F -- 否 --> E;
F -- 是 --> G{readyState是否为4};
G -- 否 --> F;
G -- 是 --> H[处理响应];
H --> I[根据状态码判断响应结果];
I -- 成功 --> J[解析响应数据];
I -- 失败 --> K[处理错误];
从这个流程图可以看出，Ajax请求与响应的过程是一个循环检查和处理的过程。首先创建XMLHttpRequest对象，然后设置请求信息和处理函数，发送请求后不断检查请求状态，直到请求完成且readyState为4时，才开始处理响应。处理响应时，根据状态码判断请求是否成功，成功则解析数据，失败则处理错误。
9. 不同浏览器对XMLHttpRequest的支持差异
不同的Web浏览器在实现XMLHttpRequest时存在一些差异，下面是一个简单的表格来展示主要浏览器的支持情况：
| 浏览器 | 创建XMLHttpRequest对象的方式 |
| ---- | ---- |
| Mozilla系列（如Firefox） |
request = new XMLHttpRequest();
|
| Internet Explorer（旧版本） |
request = new ActiveXObject("Microsoft.XMLHTTP");
|
| 其他现代浏览器 | 通常支持
new XMLHttpRequest();
|
这种差异在开发中需要特别注意，为了兼容不同的浏览器，可能需要编写一些兼容性代码。例如：
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
throw new Error("Your browser does not support XMLHttpRequest.");
}
}
}
10. 利用DOM操作优化用户界面
在Ajax应用中，DOM操作是连接Web服务数据和用户界面的关键。除了前面提到的
createTextNode
和
createElement
方法，还有一些其他常用的DOM操作方法可以用来优化用户界面。
-
appendChild
方法
：用于将一个节点添加到另一个节点的子节点列表中。例如，在前面的Yahoo!图像搜索示例中，
images.appendChild(link);
就是将创建的链接节点添加到
images
元素中。
-
removeChild
方法
：用于从父节点中移除一个子节点。例如，如果需要删除某个图片元素，可以使用
parentNode.removeChild(childNode);
。
-
replaceChild
方法
：用于用一个新节点替换父节点中的一个子节点。例如，
parentNode.replaceChild(newChild, oldChild);
通过合理使用这些DOM操作方法，可以动态地更新用户界面，为用户提供更好的交互体验。
11. 安全问题的进一步探讨
虽然前面提到了Ajax应用的安全问题，但在实际开发中，还需要进一步探讨如何解决这些问题。
-
同源策略
：浏览器的同源策略是为了保护用户安全，限制不同源的页面之间的交互。为了绕过同源策略，可以使用JSONP（JSON with Padding）技术，就像前面Yahoo!图像搜索示例中使用的JavaScript on Demand（JoD）技术一样。JSONP通过动态创建
<script>
标签来加载跨域的JSON数据，并通过回调函数处理数据。
-
输入验证
：在处理用户输入时，必须进行严格的验证，防止SQL注入、XSS攻击等安全问题。例如，在接收用户输入的搜索关键词时，要对关键词进行过滤和转义。
-
HTTPS协议
：使用HTTPS协议可以加密数据传输，防止数据在传输过程中被窃取或篡改。在开发Ajax应用时，尽量使用HTTPS协议来保证数据的安全性。
12. 未来发展趋势
随着Web技术的不断发展，Ajax应用也将不断演进。未来，Ajax可能会与其他技术如WebAssembly、Service Worker等结合，为用户提供更加高效、安全、流畅的Web应用体验。
-
WebAssembly
：WebAssembly是一种新的二进制格式，可以在Web浏览器中以接近原生的速度运行代码。将Ajax与WebAssembly结合，可以提高Web应用的性能，特别是在处理大量数据和复杂计算时。
-
Service Worker
：Service Worker是一种在浏览器后台运行的脚本，可以拦截网络请求，实现离线缓存、消息推送等功能。将Ajax与Service Worker结合，可以提高Web应用的离线体验和响应速度。
总之，Ajax应用在Web开发中具有重要的地位，通过不断地优化和创新，它将为用户带来更加出色的Web应用体验。在未来的开发中，我们需要密切关注技术的发展趋势，不断学习和掌握新的技术，以开发出更加优秀的Web应用程序。
扫一扫
2
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
