Web服务与Ajax开发要点解析
超级会员免费看
Web服务、Ajax库与常见错误解析
1. Web服务中的REST与SOAP协议
在Web服务领域，REST和SOAP是两种常用的协议。
1.1 SOAP协议
SOAP（Simple Object Access Protocol）协议使用XML格式传输数据，其消息结构包含信封（Envelope）和主体（Body）。以下是一个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与SOAP对比
| 协议 | 优点 | 缺点 |
|---|---|---|
| REST | 利用标准HTTP方法（PUT、GET、POST、DELETE）创建具有类似功能的远程过程调用，适用于基于资源的服务，如创建、编辑、检索和删除信息。 | 需要对HTTP协议有更多了解。 |
| SOAP | 能更完整地将远程过程调用与传输方法分离，添加了一些额外功能，如Fault元素和通过命名空间进行类型检查。 | 增加了显著的复杂性，需要序列化远程调用并构建SOAP信封，解析返回数据前需要“解包”，性能可能稍慢。 |
2. 用于Ajax的JavaScript库
通过之前的学习，我们开发了许多用于实现Ajax应用程序各部分的JavaScript代码技术，现在可以将这些技术封装到一个小型JavaScript库中。
2.1 回顾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.2 实现更强大的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 + ')');
}
以下是一个综合函数
doAjax
：
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);
}
}
doAjax
函数接受五个参数：
-
url
：Ajax调用的目标URL。
-
query
：编码后的查询字符串。
-
callback
：回调函数的标识。
-
reqtype
：请求类型（’post’或’get’）。
-
getxml
：是否期望服务器返回XML数据（1表示是，0表示否）。
2.3 使用库
要使用这个库，需要完成以下步骤：
1. 在页面的
<head>
区域包含Ajax库
myAJAXlib.js
。
2. 编写回调函数来处理返回的信息。
3. 为页面添加事件处理程序以调用服务器。
以下是一个使用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;
?>
如果要使用该库检索XML数据，需要修改回调函数：
function cback(text) {
var servertime = text.getElementsByTagName("timenow")[0].childNodes[0].nodeValue;
alert('Server time is ' + servertime);
}
并修改
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>";
?>
3. Ajax常见错误及解决思路
在开发Ajax应用程序时，有一些常见的错误和陷阱需要注意。
3.1 后退按钮问题
所有常用浏览器的导航栏上都有后退按钮，用户习惯使用它来返回之前访问的页面。但Ajax应用程序可以在不重新加载整个页面的情况下多次更改页面内容，这就引发了后退按钮的问题。目前有两种主要的解决思路：
- 以编程方式记录状态，并在按下后退按钮时重新创建先前的状态。但这会增加Ajax代码的复杂性。
- 说服用户后退按钮不再必要。如果使用Ajax创建类似桌面的用户界面，桌面应用程序通常不需要后退按钮。
3.2 书签和链接问题
书签用于保存页面内容的快捷方式，但Ajax应用程序可能使用相同的页面地址，大量动态内容根据用户操作从服务器返回。仅使用当前页面的URL进行书签或分享链接可能无法得到预期结果。可以通过为应用程序的特定状态提供永久链接来缓解这个问题。
3.3 告知用户操作正在进行
习惯浏览网页的用户通常将程序活动与新页面或修订页面的加载联系起来。许多Ajax应用程序会提供一些一致的视觉提示，如将静态图形图像替换为动画版本、更改光标样式或显示弹出消息。
3.4 让Ajax优雅降级
虽然我们通常使用现代浏览器开发Ajax应用程序，但仍可能有用户使用不支持必要技术的旧浏览器，或者用户可能出于安全或其他原因禁用了JavaScript和/或ActiveX。因此，需要考虑让Ajax应用程序在这些情况下仍能正常工作或提供合适的提示。
4. 总结
本文介绍了Web服务中的REST和SOAP协议，以及如何将相关技术封装到一个JavaScript库中以简化Ajax应用程序的开发。同时，还讨论了开发Ajax应用程序时可能遇到的常见错误及解决思路。通过合理运用这些知识，可以提高Ajax应用程序的开发效率和用户体验。
在实际开发中，我们可以根据具体需求选择合适的协议和库，同时注意避免常见的错误。对于Ajax库，还可以进一步扩展其功能，如添加用户反馈和错误处理机制。希望这些内容能为你的Ajax开发工作提供帮助。
Web服务、Ajax库与常见错误解析
5. 安全问题与测试注意事项
在开发Ajax应用程序时，安全和测试是不可忽视的重要方面。
5.1 安全问题
Ajax应用程序与服务器进行异步通信，这可能会引入一些安全风险。以下是一些常见的安全问题及解决建议：
| 安全问题 | 描述 | 解决建议 |
| ---- | ---- | ---- |
| 跨站脚本攻击（XSS） | 攻击者通过在网页中注入恶意脚本，当用户访问该页面时，脚本会在用户的浏览器中执行，可能导致用户信息泄露。 | 对用户输入进行严格的验证和过滤，避免直接将用户输入插入到HTML中。对输出进行编码，将特殊字符转换为HTML实体。 |
| 跨站请求伪造（CSRF） | 攻击者通过诱导用户在已登录的网站上执行恶意请求，利用用户的身份进行非法操作。 | 使用验证码、验证请求来源、设置SameSite属性等方式来防止CSRF攻击。 |
| 信息泄露 | 可能由于未正确处理敏感信息，导致用户信息或系统信息泄露。 | 对敏感信息进行加密处理，避免在URL或响应中明文传输敏感信息。 |
5.2 测试注意事项
为了确保Ajax应用程序的质量和稳定性，需要进行充分的测试。以下是一些测试要点：
-
跨平台测试
：不同的浏览器和设备可能对Ajax的支持有所不同，因此需要在多种浏览器（如Chrome、Firefox、Safari等）和设备（如桌面设备、移动设备）上进行测试，确保应用程序在各种环境下都能正常工作。
-
性能测试
：测试Ajax请求的响应时间，确保应用程序在高并发情况下仍能保持良好的性能。可以使用工具如LoadRunner、JMeter等进行性能测试。
-
功能测试
：对应用程序的各项功能进行详细测试，确保每个功能都能正常使用，包括数据的提交、获取、更新等操作。
6. 避免不恰当使用Ajax
虽然Ajax可以为Web应用程序带来很多好处，但并不是所有情况下都适合使用Ajax。以下是一些不适合使用Ajax的场景：
-
简单页面
：如果页面内容简单，不需要实时更新或交互，使用传统的页面加载方式可能更加简洁和高效。
-
搜索引擎优化（SEO）
：由于搜索引擎爬虫通常无法执行JavaScript，使用过多的Ajax可能会影响页面的SEO效果。如果页面需要被搜索引擎收录，应确保重要内容可以被爬虫访问。
-
网络状况不佳
：在网络状况较差的情况下，Ajax请求可能会导致页面响应缓慢，影响用户体验。此时可以考虑使用传统的页面加载方式，减少请求次数。
7. 错误处理的重要性
在Ajax应用程序中，错误处理是非常重要的。当请求失败或出现异常时，需要给用户提供明确的错误信息，同时记录错误日志以便后续分析。以下是一个简单的错误处理示例：
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);
} else {
// 处理错误情况
alert('请求失败，状态码：' + myreq.status);
}
}
};
if (reqtype == 'post') {
requestPOST(url, query, myreq);
} else {
requestGET(url, query, myreq);
}
}
在上述代码中，当请求的状态码不是200时，会弹出一个提示框告知用户请求失败，并显示状态码。
8. 总结与展望
综上所述，Web服务中的REST和SOAP协议为我们提供了不同的方式来实现Web服务，而将相关技术封装到JavaScript库中可以大大简化Ajax应用程序的开发。同时，我们也需要注意开发过程中可能遇到的常见错误，如后退按钮问题、书签和链接问题等，并采取相应的解决措施。
在未来的开发中，随着Web技术的不断发展，Ajax可能会与更多的技术相结合，如WebAssembly、Service Worker等，为用户带来更加流畅和高效的Web应用体验。同时，我们也需要不断关注安全和性能问题，确保应用程序的质量和稳定性。
希望通过本文的介绍，你对Web服务、Ajax库以及常见错误有了更深入的理解，能够在实际开发中灵活运用这些知识，开发出更加优秀的Ajax应用程序。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
