超级会员免费看
Web服务、Ajax库与常见问题解析
1. Web服务中的REST和SOAP协议
在Web服务领域，REST和SOAP是两种常用的协议。虽然还有其他协议存在，但近年来开发者们围绕REST和SOAP展开了激烈的讨论。
1.1 SOAP协议
SOAP（Simple Object Access Protocol）协议使用XML格式来封装消息。以下是一个SOAP消息的示例：
<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
<SOAP-ENV:Body>
<m:ShowInvoiceTotal xmlns:m="http://www.somedomain.com/invoices">
<m:InvoiceTotal>3295.00</m:InvoiceTotal>
</m:ShowInvoiceTotal>
</SOAP-ENV:Body>
</SOAP-ENV:Envelope>
当使用Ajax与SOAP结合时，需要执行以下步骤：
1. 创建SOAP信封。
2. 将特定于应用程序的信息序列化为XML。
3. 创建包含序列化应用程序代码的SOAP主体。
4. 通过XMLHTTPRequest对象发送包含SOAP消息的HTTP请求。
以下是一个使用SOAP的代码示例：
var invoiceno = '77293';
http.open("POST", "http://somedomain.com/invoices", true);
http.onreadystatechange = function () {
if (http.readyState == 4) {
if (http.status == 200) {
alert('The server said: ' + http.responseText);
}
}
};
http.setRequestHeader("Content-Type", "text/xml");
var mySOAP = '<?xml version="1.0"?> '
+ '<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" '
+ ' SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"> '
+ '<SOAP-ENV:Body> '
+ '<m:GetInvoiceTotal xmlns:m="http://www.somedomain.com/invoices"> '
+ '<m:Invoice>' + invoiceno + '</m:Invoice></m:GetInvoiceTotal> '
+ '</SOAP-ENV:Body></SOAP-ENV:Envelope>';
http.send(mySOAP);
从服务器返回的值需要先解析以去除SOAP响应包装，然后从SOAP消息的主体部分恢复应用程序数据。
1.2 REST协议
REST（Representational State Transfer）协议利用标准的HTTP方法（PUT、GET、POST和DELETE）来创建具有类似功能的远程过程调用。基于REST协议的Web服务实现特别适合基于资源的服务，常用方法通常涉及创建、编辑、检索和删除信息。不过，REST需要对HTTP协议有更多的了解。
1.3 REST与SOAP的比较
| 协议 | 优点 | 缺点 |
|---|---|---|
| REST | 适合资源型服务，利用标准HTTP方法 | 需要更多HTTP协议知识 |
| SOAP | 分离远程过程调用和传输方式，有额外特性 | 增加复杂性，性能稍慢 |
2. 用于Ajax的JavaScript库
在开发Ajax应用程序时，可以将一些常用的技术封装到一个小型的JavaScript库中，以便在应用程序中调用。
2.1 现有技术回顾
在之前的学习中，我们已经开发了一些用于实现Ajax应用程序各个部分的JavaScript代码技术，包括：
- 生成XMLHTTPRequest对象实例的方法，适用于当前流行的浏览器。
- 通过XMLHTTPRequest对象构建和发送GET和POST请求的例程。
- 避免GET请求不必要缓存的技术。
- 检查XMLHTTPRequest调用是否正确完成的回调函数。
- 提供用户反馈的方法。
- 处理responseText中返回的文本数据的技术。
- 处理responseXML中返回的XML信息的技术。
2.2 回顾myAHAHlib.js
以下是myAHAHlib.js的代码：
function callAHAH(url, pageElement, callMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch (e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange = function () {
responseAHAH(pageElement);
};
req.open("GET", url, true);
req.send(null);
}
function responseAHAH(pageElement) {
var output = '';
if (req.readyState == 4) {
if (req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
}
}
}
这个库目前只支持HTTP GET请求，并且只处理通过responseText返回的文本信息。
2.3 实现新的Ajax库
为了扩展这个库的功能，我们将创建一个更强大的Ajax库。
- 创建XMLHTTPRequest对象实例
function createREQ() {
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch (err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (err3) {
req = false;
}
}
}
return req;
}
可以通过调用
createREQ()
函数来创建XMLHTTPRequest对象实例。
- HTTP GET和POST请求
function requestGET(url, query, req) {
myRand = parseInt(Math.random() * 99999999);
req.open("GET", url + '?' + query + '&rand=' + myRand, true);
req.send(null);
}
function requestPOST(url, query, req) {
req.open("POST", url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(query);
}
- 回调函数
function doCallback(callback, item) {
eval(callback + '(item)');
}
function doAjax(url, query, callback, reqtype, getxml) {
var myreq = createREQ();
myreq.onreadystatechange = function () {
if (myreq.readyState == 4) {
if (myreq.status == 200) {
var item = myreq.responseText;
if (getxml == 1) {
item = myreq.responseXML;
}
doCallback(callback, item);
}
}
};
if (reqtype == 'post') {
requestPOST(url, query, myreq);
} else {
requestGET(url, query, myreq);
}
}
3. 使用库
以下是使用这个库的步骤：
1. 在页面的
<head>
区域包含Ajax库
myAJAXlib.js
。
2. 编写一个回调函数来处理返回的信息。
3. 为页面添加一个事件处理程序来调用服务器。
3.1 GET请求示例
<html>
<head>
<script Language="JavaScript" src="myAJAXlib.js"></script>
<script Language="JavaScript">
function cback(text) {
alert(text);
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="test" onClick="doAjax('libtest.php', 'param=hello', 'cback', 'get', '0')">
</form>
</body>
</html>
服务器端脚本
libtest.php
的代码如下：
<?php
echo "Parameter value was " . $param;
?>
3.2 POST请求获取XML数据示例
<script>
function cback(text) {
var servertime = text.getElementsByTagName("timenow")[0].childNodes[0].nodeValue;
alert('Server time is ' + servertime);
}
</script>
调用
doAjax()
函数：
<input type="button" value="test" onClick="doAjax('telltimeXML.php', '', 'cback', 'post', '1')">
服务器端脚本
telltimeXML.php
的代码如下：
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\" ?><clock1><timenow>" . date('H:i:s') . "</timenow></clock1>";
?>
4. 扩展Ajax库的建议
当前的库可以在以下方面进行改进：
-
用户反馈
：显示合适的文本或图形图像，提醒用户请求正在进行中。
-
错误处理
：检测XMLHTTPRequest状态属性（非200）并向用户输出合适的错误消息。
5. Ajax常见问题及解决思路
在开发Ajax应用程序时，会遇到一些常见的问题，以下是对这些问题的分析和可能的解决方法。
5.1 后退按钮问题
所有常用浏览器的导航栏上都有后退按钮，用户习惯使用它来返回之前访问的页面。但在Ajax应用程序中，页面内容可以不断变化而无需重新加载整个页面，这就引发了关于后退按钮的讨论。目前主要有两种思路：
- 以编程方式记录状态，在按下后退按钮时重新创建之前的状态。
- 说服用户后退按钮不再必要。
5.2 书签和链接问题
在传统的基于页面的Web模式中，书签可以保存页面的快捷方式。但在Ajax应用中，同一个页面地址可能用于整个应用程序，大量动态内容根据用户操作从服务器返回。因此，仅使用当前页面的URL进行书签或分享链接可能无法得到预期结果。可以通过为应用程序的特定状态提供永久链接来缓解这个问题。
5.3 告知用户操作正在进行
习惯浏览网页的用户通常将程序活动与新页面或修订页面的加载联系起来。许多Ajax应用程序会提供一些一致的视觉线索，如将静态图形图像替换为动画版本、改变光标样式或弹出消息。
5.4 让Ajax优雅降级
虽然我们通常使用现代浏览器开发Ajax应用程序，但仍有可能遇到用户使用不支持必要技术的旧浏览器，或者用户出于安全等原因禁用了JavaScript和/或ActiveX。在这种情况下，需要确保应用程序能够优雅降级，提供基本的功能。
5.5 搜索引擎爬虫问题
搜索引擎爬虫通常依赖于页面的URL和内容来索引网站。由于Ajax应用程序可能通过动态加载内容来更新页面，搜索引擎爬虫可能无法正确理解和索引这些内容。可以通过提供静态版本的页面或使用服务器端渲染来解决这个问题。
5.6 指出活动页面元素
在Ajax应用程序中，页面元素的状态可能会动态改变。为了让用户清楚地知道哪些元素是活动的，可以使用视觉效果（如颜色变化、边框等）来突出显示活动元素。
5.7 避免不适当使用Ajax
虽然Ajax可以提供更好的用户体验，但并不是所有场景都适合使用。例如，在需要搜索引擎优化的页面、对性能要求极高的页面或简单的表单提交场景中，可能不需要使用Ajax。
5.8 安全问题
Ajax应用程序可能面临各种安全风险，如跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等。需要采取相应的安全措施，如对用户输入进行验证和过滤、使用安全的HTTP头信息等。
5.9 跨平台测试
不同的浏览器和设备可能对Ajax的支持有所不同，因此需要在多个平台和浏览器上进行测试，确保应用程序在各种环境下都能正常工作。
5.10 认识到Ajax的局限性
Ajax不能解决所有的设计问题。一个糟糕的设计不会因为使用了Ajax而变得更好。在设计应用程序时，需要综合考虑各种因素，确保整体设计的合理性。
5.11 编程陷阱
在编写Ajax代码时，可能会遇到一些编程陷阱，如异步调用的顺序问题、内存泄漏等。需要仔细编写代码，进行充分的测试和调试。
综上所述，在开发Ajax应用程序时，需要充分考虑这些常见问题，并采取相应的解决措施，以确保应用程序的稳定性、可用性和安全性。同时，要根据具体的应用场景合理使用Ajax技术，发挥其优势，避免不必要的问题。
Web服务、Ajax库与常见问题解析
6. 常见问题的详细分析与解决策略
6.1 后退按钮问题的详细分析
在传统的网页浏览中，后退按钮是用户操作的重要组成部分。而在Ajax应用中，页面内容动态更新，打破了传统的页面加载模式。
-
方案一：编程记录状态
要实现编程记录状态，需要在每次页面状态改变时，将关键信息存储起来。例如，使用一个数组来记录每次操作的参数和页面状态。当用户点击后退按钮时，从数组中取出上一次的状态信息，重新执行相应的操作来恢复页面状态。但这种方法会增加代码的复杂性，需要对每个可能改变页面状态的操作进行详细记录和处理。 -
方案二：说服用户
可以通过设计更加直观和易于操作的界面，让用户逐渐适应没有后退按钮的操作方式。例如，设计类似桌面应用的界面，用户可以通过菜单或操作按钮来完成各种功能，而不需要依赖后退按钮。同时，可以在界面中添加提示信息，引导用户使用新的操作方式。
6.2 书签和链接问题的解决策略
为了解决书签和链接问题，可以采用以下方法：
| 方法 | 描述 |
|---|---|
| 状态参数化 |
在URL中添加状态参数，记录页面的当前状态。例如，
http://example.com/page?state=1
，服务器根据状态参数返回相应的页面内容。
|
| 静态页面生成 | 为重要的页面状态生成静态页面，用户可以直接访问这些静态页面。这样搜索引擎爬虫也能正确索引这些页面。 |
| 历史记录API |
使用HTML5的历史记录API（
history.pushState
和
history.replaceState
）来管理页面状态，同时更新URL。
|
6.3 告知用户操作正在进行的具体实现
可以通过以下几种方式告知用户操作正在进行：
- 动画效果 ：在页面中添加一个加载动画，如旋转的图标或进度条。当请求开始时，显示动画；请求完成后，隐藏动画。
<div id="loading" style="display: none;">
<img src="loading.gif" alt="Loading...">
</div>
<script>
function showLoading() {
document.getElementById('loading').style.display = 'block';
}
function hideLoading() {
document.getElementById('loading').style.display = 'none';
}
// 在请求开始时调用showLoading()，请求完成时调用hideLoading()
</script>
- 文字提示 ：在页面中显示文字提示，如“正在加载，请稍候…”。可以使用CSS样式来美化提示信息。
<div id="loading-text" style="display: none;">正在加载，请稍候...</div>
<script>
function showLoadingText() {
document.getElementById('loading-text').style.display = 'block';
}
function hideLoadingText() {
document.getElementById('loading-text').style.display = 'none';
}
</script>
6.4 让Ajax优雅降级的实现步骤
为了让Ajax应用程序在不支持的浏览器中也能正常工作，可以采用以下步骤：
-
功能检测
：在页面加载时，检测浏览器是否支持Ajax所需的技术，如
XMLHttpRequest对象。
function isAjaxSupported() {
try {
return new XMLHttpRequest() !== null;
} catch (e) {
return false;
}
}
- 提供替代方案 ：如果浏览器不支持Ajax，提供传统的页面加载方式。例如，将表单提交到服务器，重新加载整个页面。
<form action="submit.php" method="post">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
<script>
if (isAjaxSupported()) {
// 使用Ajax提交表单
} else {
// 传统表单提交
}
</script>
6.5 搜索引擎爬虫问题的解决方法
为了解决搜索引擎爬虫问题，可以采用以下方法：
- 服务器端渲染 ：在服务器端生成完整的HTML页面，然后将其发送给浏览器和搜索引擎爬虫。这样爬虫可以正确索引页面内容。
- 静态页面生成 ：定期生成静态页面，将其存储在服务器上。搜索引擎爬虫可以直接访问这些静态页面。
-
AJAX爬行规范
：遵循Google等搜索引擎的AJAX爬行规范，通过在URL中添加
#!标记来指示页面的动态内容。
6.6 指出活动页面元素的实现方式
可以通过以下方式指出活动页面元素：
- 颜色变化 ：当元素处于活动状态时，改变其颜色。例如，将按钮的背景颜色从灰色变为蓝色。
button.active {
background-color: blue;
color: white;
}
function activateButton(button) {
button.classList.add('active');
}
function deactivateButton(button) {
button.classList.remove('active');
}
- 边框效果 ：为活动元素添加边框，使其更加突出。
div.active {
border: 2px solid red;
}
6.7 避免不适当使用Ajax的判断方法
在决定是否使用Ajax时，可以考虑以下因素：
- 搜索引擎优化 ：如果页面需要被搜索引擎索引，使用传统的页面加载方式可能更合适。
- 性能要求 ：对于对性能要求极高的页面，如实时数据显示页面，需要谨慎使用Ajax，避免过多的请求影响性能。
- 简单表单提交 ：对于简单的表单提交，如登录表单，使用传统的表单提交方式可能更加简洁。
6.8 安全问题的防范措施
为了防范Ajax应用程序的安全风险，可以采取以下措施：
- 输入验证和过滤 ：对用户输入进行严格的验证和过滤，防止恶意代码注入。例如，使用正则表达式验证用户输入的邮箱地址。
function validateEmail(email) {
var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
-
安全的HTTP头信息
：设置安全的HTTP头信息，如
Content-Security-Policy、X-Frame-Options等，防止跨站脚本攻击和点击劫持。
header('Content-Security-Policy: default-src \'self\'');
header('X-Frame-Options: DENY');
6.9 跨平台测试的流程
跨平台测试可以按照以下流程进行：
- 确定测试平台 ：选择常见的浏览器（如Chrome、Firefox、Safari、IE等）和设备（如桌面电脑、平板电脑、手机等）。
- 编写测试用例 ：针对不同的功能和场景编写测试用例，确保覆盖所有可能的情况。
- 执行测试 ：在各个平台和浏览器上执行测试用例，记录测试结果。
- 修复问题 ：根据测试结果，修复发现的问题，并重新进行测试，直到所有问题都得到解决。
6.10 认识到Ajax的局限性
虽然Ajax可以提供更好的用户体验，但它并不能解决所有的设计问题。在设计应用程序时，需要综合考虑各种因素，如性能、可维护性、可扩展性等。例如，在设计一个大型的电子商务网站时，需要考虑如何平衡用户体验和服务器性能，不能仅仅依赖Ajax来解决所有问题。
6.11 编程陷阱的避免方法
为了避免编程陷阱，可以采取以下方法：
- 异步调用管理 ：使用回调函数、Promise或async/await来管理异步调用的顺序，确保代码按照预期执行。
function asyncFunction() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data loaded');
}, 1000);
});
}
async function main() {
try {
const data = await asyncFunction();
console.log(data);
} catch (error) {
console.error(error);
}
}
main();
- 内存管理 ：及时释放不再使用的资源，避免内存泄漏。例如，在事件处理函数中，当元素被移除时，移除相应的事件监听器。
const button = document.getElementById('my-button');
const clickHandler = () => {
console.log('Button clicked');
};
button.addEventListener('click', clickHandler);
// 当按钮被移除时，移除事件监听器
button.parentNode.removeChild(button);
button.removeEventListener('click', clickHandler);
7. 总结
在Web开发中，REST和SOAP协议为Web服务提供了不同的实现方式，各有优缺点。而用于Ajax的JavaScript库可以封装常用技术，提高开发效率。但在使用Ajax时，会遇到各种常见问题，如后退按钮、书签链接、搜索引擎爬虫等。我们需要充分认识这些问题，并采取相应的解决措施，以确保应用程序的稳定性、可用性和安全性。同时，要根据具体的应用场景合理使用Ajax技术，发挥其优势，避免不必要的问题。在未来的Web开发中，随着技术的不断发展，Ajax的应用场景和解决问题的方法也会不断更新和完善。
扫一扫
2628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
