应用模式开关

　　首先我们增加了一个应用模式开关。用网页程序描述符中用到了一个关联参数来使程序能询问到是使用AJAX还是网页刷新模式。注意并不是对所有程序都必需的。

　　HTML表单组件变化

　　下面我们编辑HTML代码的表单(form)组件来改变表单提交机制。例如，下面是编辑前后下拉菜单(select)组件的开始标签的代码:

　　　The SELECT element will now call a javascript function (see below) instead of using the browser to submit the form.

      修改后下拉菜单组件将调用javascript函数(看下面)来代替通过浏览器提交表单。

　　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参数是一样的。

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

上一页  [1] [2] [3] 下一页