对于做web2.0应用的开发,ajax是必不可少的,现在我们看到的ajax的框价有很多,应用比较广泛又比较有特色主要有目前两个:
1.prototype.js , 2.dwr
prototype.js是由Sam Stephenson写的一个javascript类.
dwr 则提供了更为强大的功能, 详细请看介绍.最大的特色是可以通过dwr的framework,通过配置文件把 java 类的方法直接暴露出来.
今天要介绍的是一个相对简单的 ajax应用可以满足大多数的应用. 整个 ajax.js 代码如下面, 这个是著名的 www.youtube.com 网站简单的ajax应用时所使用的框架.
// 取得 xmlhttprequest 对象 可以适应大多数浏览器(IE, Firefox)
function getXmlHttpRequest()
{
var httpRequest = null;
try
{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
httpRequest = null;
}
}
if (!httpRequest && typeof XMLHttpRequest != "undefined")
{
httpRequest = new XMLHttpRequest();
}
return httpRequest;
}
// get 方式请求一url
function getUrlSync(url)
{
return getUrl(url, false, null);
}
// get 方式请求一url handleStateChange 状态改变发生事件 handle
function getUrlAsync(url, handleStateChange)
{
return getUrl(url, true, handleStateChange);
}
// get 方式请求 async 是否异步 handleStateChange 状态改变发生事件handle
function getUrl(url, async, handleStateChange) {
var xmlHttpReq = getXmlHttpRequest();
if (!xmlHttpReq)
return;
if (handleStateChange)
{
xmlHttpReq.onreadystatechange = function()
{
handleStateChange(xmlHttpReq);
};
}
else
{
xmlHttpReq.onreadystatechange = function() {;}
}
xmlHttpReq.open("GET", url, async);
xmlHttpReq.send(null);
}
// post 方式请求 data 其他需要post的数据 async 是否异步 stateChangeCallback 状态改变时做的事情
function postUrl(url, data, async, stateChangeCallback)
{
var xmlHttpReq = getXmlHttpRequest();
if (!xmlHttpReq)
return;
xmlHttpReq.open("POST", url, async);
xmlHttpReq.onreadystatechange = function()
{
stateChangeCallback(xmlHttpReq);
};
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.send(data);
//alert ('url: ' + url + '/ndata: ' + data);
}
// url encode 编码后汉字可通过url传播
function urlEncodeDict(dict)
{
var result = "";
for (var i=0; i<dict.length; i++) {
result += "&" + encodeURIComponent(dict[i].name) + "=" + encodeURIComponent(dict[i].value);
}
return result;
}
// 只在请求完成返回完结果后执行 stateChangeCallback 请求完执行的函数
function execOnSuccess(stateChangeCallback)
{
return function(xmlHttpReq)
{
if (xmlHttpReq.readyState == 4 &&
xmlHttpReq.status == 200)
stateChangeCallback(xmlHttpReq);
//alert(xmlHttpReq + " " + xmlHttpReq.readyState + " " + xmlHttpReq.status);
};
}
// post 一个Form async 是否异步 successCallback 请求完成后做的函数
function postFormByForm(form, async, successCallback) {
var formVars = new Array();
for (var i = 0; i < form.elements.length; i++)
{
var formElement = form.elements[i];
// Special handling for checkboxes (we need an array of selected checkboxes..)!
if(formElement.type=='checkbox' && !formElement.checked) {
continue;
}
var v=new Object;
v.name=formElement.name;
v.value=formElement.value;
formVars.push(v);
}
postUrl(form.action, urlEncodeDict(formVars), async, execOnSuccess(successCallback));
}
// post a form by form name
function postForm(formName, async, successCallback)
{
var form = document.forms[formName];
return postFormByForm(form, async, successCallback);
}
// 用请求的结果内容 替换dstDivId的内容
function replaceDivContents(xmlHttpRequest, dstDivId)
{
var dstDiv = document.getElementById(dstDivId);
dstDiv.innerHTML = xmlHttpRequest.responseText;
}
// 请求一个xml格式的文档, 注意返回的信息必须是xml response 的header里 type也必须是xml
function getUrlXMLResponseCallback(xmlHttpReq) {
if(xmlHttpReq.responseXML == null) {
alert("Error while processing your request.");
return;
}
var root_node = getRootNode(xmlHttpReq);
var return_code = getNodeValue(root_node, 'return_code');
//alert("return code " + return_code);
if(return_code == 0) {
redirect_val = getNodeValue(root_node, 'redirect_on_success');
if(redirect_val != null) {
window.location=redirect_val;
} else {
success_message = getNodeValue(root_node, 'success_message');
if (success_message != null) {
alert(success_message);
}
if(this.successCallback != null) {
this.successCallback(xmlHttpReq);
}
}
} else {
var error_msg = getNodeValue(root_node, 'error_message');
if (error_msg == null || error_msg.length == 0) {
if(return_code==2) {
error_msg = "You must be logged in to perform this operation.";
} else {
error_msg = "An error occured while performing this operation.";
}
}
alert(error_msg)
}
}
// get xml documnet node value
function getNodeValue(obj,tag)
{
node=obj.getElementsByTagName(tag);
if(node!=null && node.length>0) {
return node[0].firstChild.nodeValue;
} else {
return null;
}
}
// get xml documnet root node
function getRootNode(xmlHttpReq) {
return xmlHttpReq.responseXML.getElementsByTagName('root')[0];
}
// get url return xml response
function getUrlXMLResponse(url, successCallback) {
this.successCallback = successCallback;
this.urlResponseCallback = getUrlXMLResponseCallback;
getUrl(url, true, execOnSuccess(this.urlResponseCallback))
}
// post url return xml
function postUrlXMLResponse(url, data, successCallback) {
this.successCallback = successCallback;
this.urlResponseCallback = getUrlXMLResponseCallback;
postUrl(url, data, true, execOnSuccess(this.urlResponseCallback))
}
// post form by name return xml
function postFormXMLResponse(formName, successCallback) {
this.successCallback = successCallback;
postForm(formName, true, execOnSuccess(getUrlXMLResponseCallback))
}
以上是其完整的ajax框架代码,代码非常简短明了,感觉是开始学习ajax的一个不错的代码。
举例简单说明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="AJAX.js"></script>
<script language="javascript" type="text/javascript">
function test(url, successCallback)
{
//alert(url);
getUrlAsync(url, execOnSuccess(successCallback));
}
</script>
<body>
<table>
<tr>
<td><div id=collectElementId><a href="#" οnclick="javascript:test('http://127.0.0.1/test.html', function (req) { replaceDivContents(req, 'collectElementId'); });"> 这里测试 </a></div></td>
</tr>
</table>
</body>
</html>
文件 test.html 非常简单就一行文字 :
测试成功
看看有什么反映。
这里测试 是不是变成了 测试成功。