AJAX实现异步提交表单
目的 : 不刷新网页完成表单提交和动态验证
方法 : 在表单页点击submit后在当前页使用AJAX提交表单数据,通过一个处理表单文件处理后.在当前页做提交后的操作,
ajax.js
Java代码
var XMLHttp = {
_objPool: [],
_getInstance: function ()
{
for (var i = 0; i > this._objPool.length; i ++)
{
if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
{
return this._objPool[i];
}
}
// IE5中不支持push方法
this._objPool[this._objPool.length] = this._createObj();
return this._objPool[this._objPool.length - 1];
},
_createObj: function ()
{
if (window.XMLHttpRequest)
{
var objXMLHttp = new XMLHttpRequest();
}
else
{
var MSXML = [’MSXML2.XMLHTTP.5.0′, ‘MSXML2.XMLHTTP.4.0′, ‘MSXML2.XMLHTTP.3.0′, ‘MSXML2.XMLHTTP’, ‘Microsoft.XMLHTTP’];
for(var n = 0; n < MSXML.length; n ++)
{
try
{
var objXMLHttp = new ActiveXObject(MSXML[n]);
break;
}
catch(e)
{
}
}
}
// mozilla某些版本没有readyState属性
if (objXMLHttp.readyState == null)
{
objXMLHttp.readyState = 0;
objXMLHttp.addEventListener(”load”, function ()
{
objXMLHttp.readyState = 4;
if (typeof objXMLHttp.onreadystatechange == “function”)
{
objXMLHttp.onreadystatechange();
}
}, false);
}
return objXMLHttp;
},
// 发送请求(方法[post,get], 地址, 数据, 回调函数 , 异步)
sendReq: function (method, url, data, callback , XMLHttpbool)
{
if(!XMLHttpbool) XMLHttpbool = true;
var objXMLHttp = this._getInstance();
with(objXMLHttp)
{
try
{
// 加随机数防止缓存
if (url.indexOf(”?”) > 0)
{
url += “&randnum=” + Math.random();
}
else
{
url += “?randnum=” + Math.random();
}
open(method, url, XMLHttpbool);
// 设定请求编码方式
setRequestHeader(’Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8′);
send(data);
onreadystatechange = function ()
{
if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
{
callback(objXMLHttp);
}
}
}
catch(e)
{
alert(e);
}
}
},
/*
* form 表单
* url 处理文件名
* func 提交后的处理方法
*/
formSubmit : function(form , url , func){
if(typeof form != ‘object’){
var form = document.getElementById(form);
}
var ele = form.elements;
var post = new Array();
for(var i = 0 ; i<ele.length ; i++ ){
//只考虑了 <input type="text" /> 其它的要加些 if ...
post[i] = ele[i].value;
}
var data = post.join(’&’);
this.sendReq('post' , url , data , func , false);
}
};
var XMLHttp = {
_objPool: [],
_getInstance: function ()
{
for (var i = 0; i > this._objPool.length; i ++)
{
if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
{
return this._objPool[i];
}
}
// IE5中不支持push方法
this._objPool[this._objPool.length] = this._createObj();
return this._objPool[this._objPool.length - 1];
},
_createObj: function ()
{
if (window.XMLHttpRequest)
{
var objXMLHttp = new XMLHttpRequest();
}
else
{
var MSXML = [’MSXML2.XMLHTTP.5.0′, ‘MSXML2.XMLHTTP.4.0′, ‘MSXML2.XMLHTTP.3.0′, ‘MSXML2.XMLHTTP’, ‘Microsoft.XMLHTTP’];
for(var n = 0; n < MSXML.length; n ++)
{
try
{
var objXMLHttp = new ActiveXObject(MSXML[n]);
break;
}
catch(e)
{
}
}
}
// mozilla某些版本没有readyState属性
if (objXMLHttp.readyState == null)
{
objXMLHttp.readyState = 0;
objXMLHttp.addEventListener(”load”, function ()
{
objXMLHttp.readyState = 4;
if (typeof objXMLHttp.onreadystatechange == “function”)
{
objXMLHttp.onreadystatechange();
}
}, false);
}
return objXMLHttp;
},
// 发送请求(方法[post,get], 地址, 数据, 回调函数 , 异步)
sendReq: function (method, url, data, callback , XMLHttpbool)
{
if(!XMLHttpbool) XMLHttpbool = true;
var objXMLHttp = this._getInstance();
with(objXMLHttp)
{
try
{
// 加随机数防止缓存
if (url.indexOf(”?”) > 0)
{
url += “&randnum=” + Math.random();
}
else
{
url += “?randnum=” + Math.random();
}
open(method, url, XMLHttpbool);
// 设定请求编码方式
setRequestHeader(’Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8′);
send(data);
onreadystatechange = function ()
{
if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
{
callback(objXMLHttp);
}
}
}
catch(e)
{
alert(e);
}
}
},
/*
* form 表单
* url 处理文件名
* func 提交后的处理方法
*/
formSubmit : function(form , url , func){
if(typeof form != ‘object’){
var form = document.getElementById(form);
}
var ele = form.elements;
var post = new Array();
for(var i = 0 ; i<ele.length ; i++ ){
//只考虑了 <input type="text" /> 其它的要加些 if ...
post[i] = ele[i].value;
}
var data = post.join(’&’);
this.sendReq('post' , url , data , func , false);
}
};
form.html
Java代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form</title>
<script type="text/javascript" src=''ajax.js"></script>
<script type="text/javascript">
function response(XMLHttp){
eval(XMLHttp.responseText);
}
function ajaxSubmit(form){
var url = 'action.php' ; //处理文件
XMLHttp.formSubmit(form , url , response);
}
</script>
</head>
<body>
<form onsubmit="ajaxSubmit(this);return false;">
<input type='text' name='fieldName' />
<input type='submit' value='Submit' />
</form>
</body>
</html>
