大家好,我刚开通Blog,想和大家分享下东西..
写得不好或者不对的地方,还望各位多多包含与指正..
AJAX是个旧知识,新用法的东西..而网络上也已经有很多相关的文章了..
现在想自己动手来写一下..
整个封装类如下
MarkAJAX.JS
var MAJAX={
headers:{
'Accept': 'application/xml, text/xml, text/html, text/javascript, application/javascript, application/json, text/javascript, text/plain, */*',
'If-Modified-Since': 'Thu, 01 Jan 1970 00:00:00 GMT'
},
Try: function() {
var returnValue;
for (var i = 0, length = arguments.length; i < length; i++) {
var lambda = arguments[i];
try {
returnValue = lambda();
break;
} catch (e) { }
}
return returnValue;
},
isJSON:function(obj){
var t=typeof(obj);
if("object"==t)
{
try{
return obj.toString()=="[object Object]";
}catch(e){ return false;}
}else
return false;
},
/*创建参数对象,(整个封装类的比本使用集合在里面了)*/
CreateParaObj:function(p){
if(p==null || p=='undefined'){
return {"method":"post" ,"url":null ,"async":true ,"datatype":"json" ,"data":null,"encoding":"utf-8" ,"success":function(response,statu){},"onfail":function(statu){}};
}
else
{
return {"method":p.method,"url":p.url,"async":p.async,"datatype":p.datatype,"data":p.data,"encoding":p.encoding,"success":p.success,"onfail":p.onfail};
}
},
Transport: function() {
return this.Try(
function() { return new XMLHttpRequest() ;},
function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
) || false;
},
Data2Url:function(data_){
var re='';
function subEncoding(data_,parent_)
{
var data='';
var point=parent_+'.';
if(parent_=='undefined'||parent_==null)
{
point='';
}
if(data_!=null && data_!='undefined')
{
for(var o in data_)
{
if(MAJAX.isJSON(data_[o])){
data+=subEncoding(data_[o],o);
}else if(typeof(data_[o])=='function'){
data +=encodeURIComponent(point+o)+"="+encodeURIComponent(data_[o]())+"&";
}else{
data +=encodeURIComponent(point+o)+"="+encodeURIComponent(data_[o].toString())+"&";
}
}
}
return data;
}
re=subEncoding(data_);
if(re.length>0) re=re.substring(0,re.length-1);
return re;
},
Post:function(p){
var p_=MAJAX.CreateParaObj(p);
p_.method="POST";
return this.$(p_);
},
Get:function(p){
var p_=MAJAX.CreateParaObj(p);
p_.method="GET";
return this.$(p_);
},
$:function(p_){
var reqObj=MAJAX.Transport();
var callback_=function(){
if(reqObj.readyState == 4)
{
if(reqObj.status<=400)
{
var re='';
var type_=p_.datatype.toLocaleLowerCase();
switch(type_)
{
case 'json':
try{re=eval("("+reqObj.responseText+")"); }
catch(ex){re={};}
break;
case 'xml':
re=reqObj.responseXML;
break;
default:
re=reqObj.responseText;
break;
}
p_.success(re,reqObj.status);
}
else p_.onfail(status);
delete reqObj;
}};
reqObj.onreadystatechange=callback_;
var myasync=(p_.async==true);
var headers=MAJAX.headers;
var querystring=(MAJAX.Data2Url(p_.data));//将
var isFirefox=(document.all==null ||document.all=='undefined');
if(p_.method=='undefined'||p_.method==''|| p_.method.toLocaleLowerCase()=='post')
{
reqObj.open ("POST", p_.url,myasync);
reqObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"+((p_.encoding && p_.encoding!=null)?"; charset="+p_.encoding:''));
reqObj.setRequestHeader("Connection", 'close');
for(var o in headers)
{ reqObj.setRequestHeader(o,headers[o]);}
reqObj.send(querystring);
if(isFirefox){ callback_();}
}
else
{
var url_=p_.url;
if(querystring!=null)
{
url_ +=((url_.indexOf('?')>0)?querystring:'?'+querystring);
}
reqObj.open("GET",url_,myasync);
if(p_.encoding && p_.encoding!=null) reqObj.setRequestHeader("Accept-Charset",p_.encoding);
for(var o in headers)
{ reqObj.setRequestHeader(o,headers[o]);}
reqObj.send();
if(isFirefox) callback_();
}
return reqObj;
}
};
(1)支持JSON对象发送
(2)支持同步,异步发送(在IE8,Firefox3.6中测试通过)
(3)支持GET,POST模式发送
================================================================
如下是客户端的调用方法:
function PostAjax(IsAsync)
{
/* 这是我要发送的数据,我把它封装到json对象中来发送*/
var contact={"Telephone":document.getElementById("telephone").value,"email":document.getElementById("email").value};
var mydata={"username":document.getElementById("username").value,"pwd":document.getElementById("pwd").value ,"contact":contact};
var p=CreatePara();
//这里填写你要发送的信息,参数
p.method="post"; //发送方式,默认为POST,(在$方式发送下该设置才有效果)
p.url="Services/HandlerPostJSON.ashx"; //接受地址
p.async=IsAsync; //是否异步,默认为true
p.datatype="json"; //返回数据类型,是json还是其他数据类型json,xml,text
p.data=mydata; //数据实体,
p.encoding="utf-8"; //发送数据编码方式
p.success=OnSuccess; //当成功返回时候触发的函数
p.onfail=function(statu){alert("错误");}; //当错误发生时触发的函数
MAJAX.$(p); //有3种方式发送,Post(p),Get(p),$(p)
}
function OnSuccess(response,statu)
{
var re="==========这是json模式返回的数据(同时反映了在后台接收数据的模式)========= /n";
for(var o in response)
{
re +=(o+"="+response[o]+" /n");
}
alert(re);
}
===================================================================
后台接收数据代码如下:
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string username = context.Request.Form["username"];
string password = context.Request.Form["pwd"];
string contact_telephone = context.Request.Form["contact.telephone"];//因为这里post的是json中json数据所以这样来读取
string contact_email = context.Request.Form["contact.email"];
System.Threading.Thread.Sleep(5000); //这里方便异步调试
string json_str = "{";
json_str += "/"username/":/"" + username+ "/",";
json_str += "/"pwd/":/"" + password + "/",";
json_str += "/"contact.telephone/":/"" + contact_telephone + "/",";
json_str += "/"contact.email/":/"" + contact_email + "/"";
json_str += "}";
context.Response.Write( json_str);
}
附件改天在上传,要是转载请保留下我的个人信息,多谢合作