采用AJAX提高网站程序的带宽性能(1)(2)

时间:2013-03-06 14:58来源:未知作者:admin 点击: 次

分享到：

HTML 代码中添加SPAN 标签包含住 FORM 标签为了标记HTML页面中需要用服务器返回的内容动态更新的部分，我们以将以javascript函数中标记参数来命名SPAN标签。

HTML 代码中添加SPAN 标签包含住 FORM 标签

为了标记HTML页面中需要用服务器返回的内容动态更新的部分，我们以将以javascript函数中标记参数来命名SPAN标签。

Javascript函数

接下来我们写一段代码或者选取javjavascript函数来完成AJAX模式表单提交和页面刷新。
1．新建一个包含提交内容的字符串。
2．提交内容到特定的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;
}

将发送的内容提交到服务器的工作相对来说比较简单。创建一个浏览器request对象，提交内容并创建一个函数来响应处理服务器返回的内容。这段代码是从网上搜取的，页可以很容易的在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);
}

表单项转换方法将表单中的各项内容串连编码成一定的格式提交。同样的，这些代码可以从相关的资源和互联网上得到。

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;
}