ZT:使用AJAX提高WEB应用的带宽(2)(2006-03-02 23:48:35)
我们如何达到上述目的的
为了获得带宽上的节省，我们必须对应用做一系列的修改。
应用模式切换
首先我们增加了一个应用模式切换开关。在WEB应用描述文件里，我们使用了一个上下文参数，使得应用系统能够决定它是处在AJAX模式还是页面刷新模式。注意：大多数的应用不需要这一步。
HMTL表格的变化
接着，我们将HMTL表格改为form-submission模式。如下所示，是一个改变前和改变后的SELECT的开始标记：
<SELECT name="type" onChange="window.document.theform.submit()">
<SELECT name="type" onChange="submitForm()">
从上面的代码可以看到，SELECT标签使用了javascript函数，而不是浏览器提供表格。
表格周围的HTML SPAN元素
为了标识一段HTML片断，使得这个片断能够被从服务器返回的内容所替代，我们在SPAN元素的内部放置了一个名称标识符，这个标识符能够被我们的javascript代码所识别。
<span id="content_area">
javascript函数
接着，我们亲自写或者引用一些javascript函数来执行AJAX模式个表的提供和更新请求。
首先是被SELECT元素使用（见上面的代码）的submitForm()函数，这个函数是用来取代浏览器表格提供逻辑的。这个动作通过两步来完成：
1、创建一个字符来包含被提交的内容。
2、提供内容到一个指定的url，这个url包含一个当操作完成以后需要执行的回调函数。
submitForm()
|
function submitForm()
{
var content = convertFormDataToPostContent(window.document.theform);
doPost('/office/UsageAnalyzer', content, 'processResult');
} |
我们看到doPost()的第三个参数：“processResult”。当异步的方法调用完成以后，这个方法将和返回结果一起被调用。
processResult()方法（如下所示）的工作是使用服务器发送的结果更新文档。注意：getElementById()方法的'content_area'参数和我们加到我们的HTML文件的SPAN元素的id一样。
processResult()
|
function processResult(result)
{
document.getElementById('content_area').innerHTML = result;
} |
通过POST处理提供内容到服务器的工作相当简单。首先创建一个浏览器指定的请求对象，提交内容，最后创建一个处理从服务器返回的结果的回调处理方法。下面的代码是从网络上获得的，很容易从AJAX文章或框架中获得。
doPost()
|
function doPost(url, content, callback_name)
{
var async_request = false;
// Mozilla/Safari
if (window.XMLHttpRequest)
{
async_request = new XMLHttpRequest();
async_request.overrideMimeType('text/xml');
}
// IE
else if (window.ActiveXObject)
{
async_request = new ActiveXObject("Microsoft.XMLHTTP");
}
async_request.open('POST', url, true);
async_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
async_request.onreadystatechange = function()
{
if (async_request.readyState == 4)
{
response_content = async_request.responseText;
eval(callback_name + '(response_content);');
}
}
async_request.send(content);
} |
Form-field转化方法访问了页面上所列举的field，并且当form-urlencoded发送时为提交方便把它们编码成适当的格式。同样，以下的代码，我们从网络上取得：
convertFormDataToPostContent()
|
function convertFormDataToPostContent(form_name)
{
var content_to_submit = '';
var form_element;
var last_element_name = '';
for (i = 0; i < form_name.elements.length; i++)
{
form_element = form_name.elements[i];
switch (form_element.type)
{
// Text fields, hidden form elements
case 'text':
case 'hidden':
case 'password':
case 'textarea':
case 'select-one':
content_to_submit += form_element.name + '='
+ escape(form_element.value) + '&'
break;
// Radio buttons
case 'radio':
if (form_element.checked)
{
content_to_submit += form_element.name + '='
+ escape(form_element.value) + '&'
}
break;
// Checkboxes
case 'checkbox':
if (form_element.checked)
{
// Continuing multiple, same-name checkboxes
if (form_element.name == last_element_name)
{
// Strip of end ampersand if there is one
if (content_to_submit.lastIndexOf('&') ==
content_to_submit.length - 1)
{
content_to_submit = content_to_submit.substr(
0, content_to_submit.length - 1);
}
// Append value as comma-delimited string
content_to_submit += ',' + escape(form_element.value);
}
else
{
content_to_submit += form_element.name + '='
+ escape(form_element.value);
}
content_to_submit += '&';
last_element_name = form_element.name;
}
break;
}
}
// Remove trailing separator
content_to_submit = content_to_submit.substr(0, content_to_submit.length - 1);
return content_to_submit;
} |
结论
在这样的应用中，在多页面请求的时候，每一个页面的有效部分都包含相同的内容，使用AJAX去仅仅更新页面的相关部分会带来重大的带宽节省。使用了不到100行的javascript代码，我们转化了一个已经存在的WEB应用为AJAX式的页面更新，结果对于相同的应用，我们彻底的减少了（>60%）的带宽需求。
注意到我们的修改是相当的简单，这一点很重要。获得相同的带宽减少对于复杂的应用系统可能不这么简单，但是肯定能做到。然而，当发布超大规模的应用或者有着相当严厉的带宽考虑时，节省10%的带宽就会带来很大的费用节省。
进一步的趋势
使用我们所描述的方法来测试一个更加真实的应用，将原始版本改为AJAX版本将是一个非常有趣的事情。如果你知道这样的一个系统，请和我们联系。
AJAX对服务器CPU的冲击也是一个有趣的研究方向。然而，如果我们的页面没有什么数据查询或者其他的处理工作，那么这个系统则不是我们的测试所需要的系统。
如果您对我们的后续版本有什么要求，请到论坛上告诉我们。
反馈和回复
一个在线的forum被用来讨论这个报告的细节、结果和价值。
版本历史
v1.0 - 1st public release (15 jan 06)
原文链接
http://webperformanceinc.com/library/reports/AjaxBandwidth/index.html
文章引用自：http://tb.blog.csdn.net/TrackBack.aspx?PostId=588872
插入表情