ajax数据传输方式实例详解
本文实例讲述了ajax数据传输方式。分享给大家供大家参考,具体如下:
在异步应用程序中发送和接收信息时,常见的可以选择以纯文本和XML作为数据格式(可参考《jQuery学习笔记之Ajax用法实例详解》),现在还有一种比较流行的方式:JSON(JavaScriptObjectNotation)。好了,下面举例说明这三种数据格式在ajax的异步应用。
一、纯文本方式
1、发送/接收数据:
Codeischeap.看代码:
testJs.js
//此函数等价于document.getElementById/document.all function$(s){if(document.getElementById){returneval('document.getElementById("'+s+'")');}else{returneval('document.all.'+s);}} //创建XMLHttpRequest对象,以发送ajax请求 functioncreateXMLHTTP(){ varxmlHttp=false; vararrSignatures=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for(vari=0;i<arrSignatures.length;i++){ try{ xmlHttp=newActiveXObject(arrSignatures[i]); returnxmlHttp; } catch(oError){ xmlHttp=false;//ignore } } //thrownewError("MSXMLisnotinstalledonyoursystem."); if(!xmlHttp&&typeofXMLHttpRequest!='undefined'){ xmlHttp=newXMLHttpRequest(); } returnxmlHttp; } varxmlReq=createXMLHTTP(); //发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) functionvalidatePwd(oTxt){ varurl="/AjaxOperations.aspx"; xmlReq.open("post",url,true); xmlReq.setRequestHeader("Content-Length",oTxt.value.length+$("txtUserName").value.length); xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlReq.onreadystatechange=callBack; xmlReq.send("action=chkPwd&userInfos="+escape(oTxt.value+"/"+$("txtUserName").value));//发送文本 } functioncallBack(){ if(xmlReq.readyState==4){ if(xmlReq.status==200){ alert(xmlReq.responseText);//接收文本 } elseif(xmlReq.status==404){ alert("RequestedURLisnotfound."); }elseif(xmlReq.status==403){ alert("Accessdenied."); }else alert("statusis"+xmlReq.status); } }
几个附加文件源码:
jsTest.htm
<html> <head> <title>jstest</title> <scriptsrc="js/testJs.js"type="text/javascript"></script> </head> <body> <formid="form1"> <div> 用户名:<inputid="txtUserName"name="txtUserName"type="text"/> 密码:<inputid="txtPwd"name="txtPwd"type="password"onblur="validatePwd(this)"/></div> </form> </body> </html>
AjaxOperations.aspx
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="AjaxOperations.aspx.cs"Inherits="WebTest2008.AjaxOperations"%>
AjaxOperations.aspx.cs
usingSystem; usingSystem.Collections.Generic; usingSystem.Web; usingSystem.Web.UI; usingSystem.Web.UI.WebControls; namespaceWebTest2008 { publicpartialclassAjaxOperations:System.Web.UI.Page { protectedvoidPage_Load(objectsender,EventArgse) { if(!string.IsNullOrEmpty(Request["action"])&&Request["action"]=="chkPwd") { stringresponseTxt="用户名和密码不匹配!"; stringtempStr=Request["userInfos"]; /*测试用实际项目中可以对数据库进行检索等等相关操作,这里简化了*/ if(tempStr.Split(newchar[]{'/'},StringSplitOptions.RemoveEmptyEntries)[0]=="test"&&tempStr.Split(newchar[]{'/'},StringSplitOptions.RemoveEmptyEntries)[1]=="test") { responseTxt="验证通过!"; } Response.Write(responseTxt); } } } }
一一保存文件,ctrl+F5,运行试试看吧。
上面这种方式是最简单最直接也是最有效的方式。熟练使用最佳。
二、XML方式
1、发送XML数据
testJs.js
//此函数等价于document.getElementById/document.all function$(s){if(document.getElementById){returneval('document.getElementById("'+s+'")');}else{returneval('document.all.'+s);}} //创建XMLHttpRequest对象,以发送ajax请求 functioncreateXMLHTTP(){ varxmlHttp=false; vararrSignatures=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for(vari=0;i<arrSignatures.length;i++){ try{ xmlHttp=newActiveXObject(arrSignatures[i]); returnxmlHttp; } catch(oError){ xmlHttp=false;//ignore } } //thrownewError("MSXMLisnotinstalledonyoursystem."); if(!xmlHttp&&typeofXMLHttpRequest!='undefined'){ xmlHttp=newXMLHttpRequest(); } returnxmlHttp; } varxmlReq=createXMLHTTP(); //发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) functionvalidatePwd(oTxt){ varurl="/AjaxOperations.aspx?action=xmlOp"; varxmlStr="<profile>"+ "<userName>"+escape($("txtUserName").value)+"</userName>"+ "<userPwd>"+escape($("txtPwd").value)+"</userPwd>"+ "</profile>"; xmlReq.open("post",url,true); //Telltheserveryou'resendingitXML xmlReq.setRequestHeader("Content-Type","text/xml");//这里注意 xmlReq.onreadystatechange=callBack; xmlReq.send(xmlStr);//发送XML } functioncallBack(){ if(xmlReq.readyState==4){ if(xmlReq.status==200){ alert(xmlReq.responseText);//接收文本 } elseif(xmlReq.status==404){ alert("RequestedURLisnotfound."); }elseif(xmlReq.status==403){ alert("Accessdenied."); }else alert("statusis"+xmlReq.status); } }
jsTest.htm文件不变,AjaxOperations.aspx的HTML文件内容不变,服务器端.CS处理代码如下:
AjaxOperations.aspx.cs
usingSystem; usingSystem.Collections.Generic; usingSystem.Web; usingSystem.Web.UI; usingSystem.Web.UI.WebControls; usingSystem.Xml; namespaceWebTest2008 { publicpartialclassAjaxOperations:System.Web.UI.Page { protectedvoidPage_Load(objectsender,EventArgse) { if(!string.IsNullOrEmpty(Request["action"])&&Request["action"]=="xmlOp")//处理xml { XmlDocumentdoc=newXmlDocument(); try { doc.Load(Request.InputStream);//获取xml数据(这里需要注意接受xml数据的方法) } catch(Exceptionex) { throwex; } stringresponseTxt=""; stringtempName=doc.SelectSingleNode("profile/userName").InnerText; stringtempPwd=doc.SelectSingleNode("profile/userPwd").InnerText; if(tempName=="test"&&tempPwd=="test") { responseTxt="验证通过!"; } elseresponseTxt="验证失败!"; Response.Write(responseTxt);//写文本 } } } }
很简单的代码,运行看看吧。
2、接收XML数据:
我们看到,上面两个.js文件里处理返回数据时都用到了xmlReq.responseText的属性,下面我们试试看xmlReq.responseXML属性:
testJs.js
//此函数等价于document.getElementById/document.all function$(s){if(document.getElementById){returneval('document.getElementById("'+s+'")');}else{returneval('document.all.'+s);}} //创建XMLHttpRequest对象,以发送ajax请求 functioncreateXMLHTTP(){ varxmlHttp=false; vararrSignatures=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for(vari=0;i<arrSignatures.length;i++){ try{ xmlHttp=newActiveXObject(arrSignatures[i]); returnxmlHttp; } catch(oError){ xmlHttp=false;//ignore } } //thrownewError("MSXMLisnotinstalledonyoursystem."); if(!xmlHttp&&typeofXMLHttpRequest!='undefined'){ xmlHttp=newXMLHttpRequest(); } returnxmlHttp; } varxmlReq=createXMLHTTP(); //发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) functionvalidatePwd(oTxt){ varurl="/AjaxOperations.aspx?action=xmlOp"; varxmlStr="<profile>"+ "<userName>"+escape($("txtUserName").value)+"</userName>"+ "<userPwd>"+escape($("txtPwd").value)+"</userPwd>"+ "</profile>"; xmlReq.open("post",url,true); //Telltheserveryou'resendingitXML xmlReq.setRequestHeader("Content-Type","text/xml"); xmlReq.onreadystatechange=callBack; xmlReq.send(xmlStr);//发送XML } functioncallBack(){ if(xmlReq.readyState==4){ if(xmlReq.status==200){ varxmlDoc=xmlReq.responseXML;//接收XML //varnodes=xmlDoc.childNodes; //alert("文件根标签的名称:"+xmlDoc.documentElement.tagName); //alert("根元素共有子节点个数:"+xmlDoc.documentElement.childNodes.length); alert(xmlDoc.documentElement.childNodes(0).text); } elseif(xmlReq.status==404){ alert("RequestedURLisnotfound."); }elseif(xmlReq.status==403){ alert("Accessdenied."); }else alert("statusis"+xmlReq.status); } }
同样,jsTest.htm文件不变,AjaxOperations.aspx的HTML文件内容不变,服务器端.CS处理代码稍作修改如下:
usingSystem; usingSystem.Collections.Generic; usingSystem.Web; usingSystem.Web.UI; usingSystem.Web.UI.WebControls; usingSystem.Xml; namespaceWebTest2008 { publicpartialclassAjaxOperations:System.Web.UI.Page { protectedvoidPage_Load(objectsender,EventArgse) { if(!string.IsNullOrEmpty(Request["action"])&&Request["action"]=="xmlOp")//处理xml { XmlDocumentdoc=newXmlDocument(); try { doc.Load(Request.InputStream);//获取xml数据 } catch(Exceptionex) { throwex; } stringresponseXmlTxt=""; stringtempName=doc.SelectSingleNode("profile/userName").InnerText; stringtempPwd=doc.SelectSingleNode("profile/userPwd").InnerText; if(tempName=="test"&&tempPwd=="test") { responseXmlTxt="<?xmlversion=\"1.0\"encoding=\"utf-8\"?><msg>验证通过!</msg>";//测试用,简单的xml文件 } elseresponseXmlTxt="<?xmlversion=\"1.0\"encoding=\"utf-8\"?><msg>验证失败!</msg>"; Response.ContentType=("text/xml;charset=UTF-8");//这里必须要设置,否则客户端接收不到这里写好的xml文件 Response.Write(responseXmlTxt);//写xml Response.End(); } } } }
好了,前面两种方法是大家平时开发中比较熟悉的方式,下面我们来看看第三种方式。
三、JSON方式
json的准备知识:
json是一种简单的数据格式,比xml更轻巧。json是JavaScript的原生格式,这意味着在JavaScript中处理json格式的数据不需要任何特殊的API或工具包。json的语法规则其实很简单:对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值'对”之间使用“,”(逗号)分隔。看个例子先:
functiontestJson(){ //定义一个user(json的格式,其实就是定义一个js函数(变量)的方式而已) varuser= { "username":"jeffwong", "age":25, "info":{"tel":"12345678","cellphone":"13312345678"}, "address"://数组 [ {"city":"beijing","postcode":"101110"}, {"city":"nycity","postcode":"911119"} ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); user.username="xiaowang"; alert(user.username); }
上面的定义方式看起来很简单,但是如果字段众多,命名方式混杂,出错的概率大大增加,怎么办?这时候你就会想到用程序的方式生成json数据。json提供了json.js包,专门提供了几种常用的json处理函数。下载下来,(json.js点击此处本站下载。),将其引入然后就可以简单的使用object.toJSONString()转换成json数据。看代码:
functionCar(maker,model,year,color){ this.maker=maker; this.model=model; this.year=year; this.color=color; } functiontestJson(){ vartempCar=newCar("VW","S",1999,"yellow"); alert(tempCar.toJSONString()); }
也可以使用eval或者parseJSON()方法来转换json数据到object:
functiontestJson(){ varstr='{"name":"jeffwong","age":25,"address":"beijing"}'; vartempObj=eval('('+str+')'); alert(tempObj.toJSONString());//使用eval方法 vartempObj1=str.parseJSON(); alert(tempObj1.toJSONString());//或者使用parseJSON()方法 }
关于json.js的学习,请参考网上其他资源,这里我不再赘述了。说了这么多,实践环节开始了:
ajax利用json发送/接收数据:
//此函数等价于document.getElementById/document.all function$(s){if(document.getElementById){returneval('document.getElementById("'+s+'")');}else{returneval('document.all.'+s);}} //创建XMLHttpRequest对象,以发送ajax请求 functioncreateXMLHTTP(){ varxmlHttp=false; vararrSignatures=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for(vari=0;i<arrSignatures.length;i++){ try{ xmlHttp=newActiveXObject(arrSignatures[i]); returnxmlHttp; } catch(oError){ xmlHttp=false;//ignore } } //thrownewError("MSXMLisnotinstalledonyoursystem."); if(!xmlHttp&&typeofXMLHttpRequest!='undefined'){ xmlHttp=newXMLHttpRequest(); } returnxmlHttp; } varxmlReq=createXMLHTTP(); //发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) functionvalidatePwd(oTxt){ varurl="/AjaxOperations.aspx?action=jsonOp"; //JSON就只是文本,由于不需要特殊编码而且每个服务器端脚本都能处理文本数据,所以可以轻松利用JSON并将其应用到服务器。 varstr='{"userName":"'+$("txtUserName").value+'","userPwd":"'+$("txtPwd").value+'"}'; varjsonStr=str.parseJSON().toJSONString();//you'resendingitJSON xmlReq.open("post",url,true); xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlReq.onreadystatechange=callBack; xmlReq.send("sendStr="+jsonStr);//发送JSON(在服务器上解释JSON) } functioncallBack(){ if(xmlReq.readyState==4){ if(xmlReq.status==200){ varjsonStr=xmlReq.responseText.parseJSON().toJSONString();//转化为json数据 alert(jsonStr); } elseif(xmlReq.status==404){ alert("RequestedURLisnotfound."); }elseif(xmlReq.status==403){ alert("Accessdenied."); }else alert("statusis"+xmlReq.status); } }
附加文件,AjaxOperations.aspx的html页面没有改变,AjaxOperations.aspx.cs代码稍作调整如下:
usingSystem; usingSystem.Collections.Generic; usingSystem.Web; usingSystem.Web.UI; usingSystem.Web.UI.WebControls; namespaceWebTest2008 { publicpartialclassAjaxOperations:System.Web.UI.Page { protectedvoidPage_Load(objectsender,EventArgse) { if(!string.IsNullOrEmpty(Request["action"])&&Request["action"]=="jsonOp")//处理JSON { stringresponseJsonTxt=""; stringtempStr=Request["sendStr"].Trim(newchar[]{'{','}'});//在服务器上解释JSON需要引用一个能够转化JSON的组件:Json.Net,这里简单测试,略过Json.Net if(tempStr.Split(newchar[]{','})[0].Split(newchar[]{':'})[1]=="\"test\""&&tempStr.Split(newchar[]{','})[1].Split(newchar[]{':'})[1]=="\"test\"") { responseJsonTxt="{\"msg\":\"验证通过!\"}";//测试用 } elseresponseJsonTxt="{\"msg\":\"验证失败!\"}"; Response.Write(responseJsonTxt); Response.End(); } }
jsTest.html引入json.js文件(必须下载json.js文件,否则js报错),如下:
<html> <head> <title>jstest</title> <scriptsrc="js/json.js"type="text/javascript"></script> <scriptsrc="js/testJs.js"type="text/javascript"></script> </head> <body> <formid="form1"> <div> 用户名:<inputid="txtUserName"name="txtUserName"type="text"/> 密码:<inputid="txtPwd"name="txtPwd"type="password"onblur="validatePwd(this)"/></div> </form> </body> </html>
希望本文所述对大家ajax程序设计有所帮助。