【Asp.net精品源码栏目提醒】:本文主要为网学会员提供“【精品】-利用Ajax和JSON技术实现对数据库的异步操作 - 综合课件”,希望对需要【精品】-利用Ajax和JSON技术实现对数据库的异步操作 - 综合课件网友有所帮助,学习一下!
2010.5利用Ajax和JSON技术实现对数据库的异步操作张春建概述在B/S系统中ASP.NETAjax客户端编程模型代表着当前Web开发及发展方向其实质是将服务器与客户端之间的数据传递更加简捷把服务器承担的表示层工作交给客户端完成这不仅使BS系统架构更加清晰合理而且大大提升服务器及整个互联网络带宽的有效利用率同时带给用户是更加快捷灵动的Web体验。
2关键技术2.Ajax客户端编程模型jax认为是synchronousJavaScriptandXML的缩写但其涵盖的技术不仅包括JavaScript和XML还包括CSS、DOM和XMLHttpRequest等技术国内将jax译为“阿贾克斯”而最早提出这个词的是JesseJamesGarrett。
jax客户端编程模型是相对于服务端编程模型提出的其主要区别就是将表示层放到客户端服务器只负责处理数据不再理睬如何显示或使用这些数据这样给客户端更加灵活的表现形式。
jax客户端编程模型与服务器交互过程一般分为6步第一步由产生网页事件第二步创建XMLHttpRequest对象实例并向服务器发送请求第三步是Web服务器接收请求并对请求进行解析处理第四步根据请求访问相关数据并对数据进行格式处理第五步响应客户端请求将格式化后的数据发送给客户端第六步客户端收到数据交由回调函数进行解析及后续处理工作。
2.2JSONJSON即JavaScript对象表示法是一种轻量级的数据交换格式JSON是JavaScript编程语言的一个子集。
其易于阅读和编写同时也易于机器解析和生成。
JSON理想的数据交换特性使得一些组织在不断的丰富其操作库如json2js及jqueryjs在下面的实例中就用到了json2js并对jqueryjs做了简要介绍。
2.2.数据格式JSON数据格式是使用“、、、、”、”这些符号将JSON数据进行分割表示使数据组织成一种有序结构其详细语法请参见wwwjson.org网站在此不再赘述。
JSON典型数据格式如下Varobjquotpeoplequot:quotpeopleidquot:quot1quotquotfirstname:quot米克quotquotlast-namequot:quot王quotquotemailquot:quotmikesina.comquotquotphonequot:quot306655234address:北京东城区西路23号post-code:00034peopleid:2firstname:大志last-name:王email:dazhisina.comphone:393344834address:石家庄中山西路88号post-code:0500002.2.2访问方式访问JSON数据极为简单、清晰可以直接用“”或用“”引用对于多行数据可以按数组进行访问示例如下obj.people0.firstname“米克”obj.people0“firstname”“米克”alertobj.people0.firstname在JavaScript中使用可使用eval和stringify实现JSON字符串与对象之间的转换。
在C中使用JavaScriptSerial-izer类实现JSON字符串与对象的转换C对象的属性名称要摘要主要讲解在
ASP.NET下基于客户端编程模型利用jax与JSON技术实现操作数据库的编程方法与实现过程并通过实例详细讲述了对数据库添加、查询和更新操作。
关键词jaxJSONXMLHttpRequest客户端服务器数据库4Web服务器53事件onclick回调函数callback126XMLHttpRcqucst图Ajax客户端编程模型432010.5实用第一智慧密集与JSON字符串中的键名要一一对应如stringpeopleid与quotpeopleidquot否则无法转换。
SN与XML相比具有解析效率高、非冗长性和线上传输效率高等优点同时便于在客户端缓存数据。
2.3XMLHttpRequestXLHttpRequest对象是实现Ajax技术的核心在产生事件后首先要调用就是创建XLttpRequest对象然后用open准备好调用同时设置好参数设置回调函数用于在服务器返回时进行相应处理操作最后使用send向服务器发送请求。
Jquery的JavaScript库已经对上述过程进行了封装简化。
对于初学者建议还是从Ajax的基本实现原理进行学习。
在本实例中也给出利用query库里的Ajax函数实现异步访问服务器数据的方法方便读者学习与比较。
3实例3.1实例开发环境本实例是在XP专业版下使用VS208开发工具以SQServer5Express做后台数据库并从微软网站下载SQLServeranagementStudioExpress做数据库管理工具。
在开发语言方面客户端使用avaScript服务器端使用C。
3.2实例
源码1客户端主页面文件ajaxclient.htmltDOCTYPEhtmlPUBLICquot-//W3C//DTDXHTML1.0Tran-sitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdgtlthtmlxmlnshttp://www.w3.org/1999/xhtmlgtltheadgtlttitlegt利用AJAX和JSON技术实现对数据库的异步操作lt/titlegtltscriptsrcajaxclient.jstypetext/javascriptgtlt/scriptgtltscriptsrcjson2.jstypetext/javascriptgtlt/scriptgtltscriptsrcjquery.jstypetext/javascriptgtlt/scriptgtltstyletypetext/cssgt.style1width:215px.style2width:84pxlt/stylegtlt/headgtltbodygtltdivgtltinputidButton1typebuttonvalue显示onclickstartRequestread/gtltinputidButton2typebuttonvalue添加onclickstartRequestadd/gtltinputidButton3typebuttonvalue修改onclickstartRequestupdate/gtltinputidButton4typebuttonvalue清除显示onclickcleardisplaydata/gtltinputidButton5typebuttonvaluejqueryonclickstartRequestjqueryselect/gtltinputidButton6typebuttonvalueJSON字符串onclickstartRequestselectobj/gtlt/divgtltdivstyleheight:600pxwidth:900pxgtltdividdisplaystylewidth:900pxheight:300pxgtlt/divgtltdividaddrecordstylewidth:900pxheight:300pxgtlttablestylewidth:100gtlttrgtlttdclassstyle2gtpeopleidlt/tdgtlttdclassstyle1gtltinputidpeopleidtexttypetext/gtlt/tdgtlttdgtltinputidselectbuttontypebuttonvalue查询onclickstartRequestselect/gt此处填写peopleid值如数字“1”再单击查询lt/tdgtlt/trgtlttrgtlttdclassstyle2gtfirstnamelt/tdgtlttdclassstyle1gtltinputidfirstnametexttypetext/gtlt/tdgtlttdgtlt/tdgtlt/trgtlttrgtlttdclassstyle2gtlastnamelt/tdgtlttdclassstyle1gtltinputidlastnametexttypetext/gtlt/tdgtlttdgtlt/tdgtlt/trgtlttrgtlttdclassstyle2gtemaillt/tdgtlttdclassstyle1gtltinputidemailtexttypetext/gtlt/tdgtlttdgtlt/tdgtlt/trgtlttrgtlttdclassstyle2gtphonelt/tdgtlttdclassstyle1gtltinputidphonetexttypetext/gtlt/tdgtlttdgtlt/tdgtlt/trgtlttrgtlttdclassstyle2gtaddresslt/tdgtlttdclassstyle1gtltinputidaddresstexttypetext/gtlt/tdgtlttdgtlt/tdgtlt/trgtlttrgtlttdclassstyle2gtpostcodelt/tdgt442010.5lttdclassquotstyle1quotgtltinputidquotpostcoetextquottypequottextquot/gt/tgttgt/tgt/trgt/tblegt/ivgt/ivgt/boygt/htmlgt2客户端ajaxclient.js部分
源码vartablerowsquotpeoplequot:quotpeopleiquot:quotquotquotfirstnmequot:quotquotquotlstnmequot:quotquotquotemilquot:quotquotquotphonequot:quotquotquotressquot:quotquotquotpostcoequot:quotquotvrtObjvrxmlHttp创建XMLHttpRequest实例functionCreteXMLHttpRequestifwinow.ActiveObject判断是否是IE浏览器支持ctive控件xmlttpnewctiveObjectquoticrosoft.TTPquotelseifwinow.HttpequestxmlHttpnewLHttpequestelsewinow.lert该浏览器不支持AJA请更换浏览器quot请求JSON字符串functionstrtequestselectobjCreteLHttpequestxmlHttp.openquotPOSTquotquotserver.spxselectobjquotnewDte.getTimetruexmlHttp.onreysttechngecllbckselectxmlHttp.setequestHeerquotContent-Typequotquotppli-ctionx-www-form-urlencoequotxmlHttp.sennull请求查询数据functionstrtequestselecttblerows.people0.peopleiocument.getEle-mentByIpeopleitext.vlueCretettpequestxmlttp.openquotPOSTquotquotserver.spxselectrowquotnewDte.getTimetruexmlttp.onreysttechngecllbckselectxmlttp.setequesteerquotContent-Typequotquotppli-ctionx-www-form-urlencoequotxmlttp.senSON.stringifytblerows查询回调函数将返回数据写到输入框中functioncllbckselectifxmlHttp.reyStte4ampxmlttp.sttus200vrtxmlttp.responseTextiftNUtObjevlt转换为json对象isplyt可打开此行将数据显示在表格里ocument.getlementypeopleitext.vl-uetObj.people0.peopleiocument.getlementyfirstnmetext.vluetObj.people0.firstnmeocument.getlementylstnmetext.vluetObj.people0.lstnmeocument.getlementyemiltext.vluetObj.people0.emilocument.getlementyphonetext.vluetObj.people0.phoneocument.getlementyresstext.vluetObj.people0.ressocument.getlementypostcoetext.vluetObj.people0.postcoeelsewinow.lert服务器返回:xmlttp.response-Text请求读所有行functionstrtequestreretettpequestxmlttp.openPOSTserver.spxrenewte.getTimetruexmlttp.onreysttechngecllbckisplyxmlttp.setequesteerontent-Typeppli-ctionx-www-form-urlencoexmlttp.senpeople显示回调处理函数452010.5实用第一智慧密集functiocallbackdisplayxmlHttp.readyState4ampampxHttp.status200vardataxHttp.resposeTextdataquotNULLdataObjevadata//转换为jso对象dspaydataesewdow.aert服务器返回:xHttp.respose-Textvartab//将数据显示在表格里uctodspaydataceardspaydatatabdocuet.createEeetTabetab.border1tab.wdth800pxvarheadtab.sertRowvarheadcellhead.sertCellheadcell.erTextpeopledheadcell.setAttrbutealgcetervarheadcellhead.sertCellheadcell.erTextrstameheadcell.setAttrbutealgcetervarheadcellhead.sertCellheadcell.setAttrbutealgceterheadcell.erTextlastamevarheadcellhead.sertCellheadcell.setAttrbutealgceterheadcell.erTextemalvarheadcellhead.sertCellheadcell.setAttrbutealgceterheadcell.erTextphoevarheadcellhead.sertCellheadcell.setAttrbutealgceterheadcell.erTextaddressvarheadcellhead.sertCellheadcell.setAttrbutealgceterheadcell.erTextpostcodeorvar0ltdataObj.people.legthvarrowtab.sertRowvarcellrow.sertCellcell.erTextdataObj.people.peopledcell.setAttrbutealgcetervarcellrow.sertCellcell.erTextdataObj.people.rstamecell.setAttrbutealgcetervarcellrow.sertCellcell.setAttrbutealgcetercell.erTextdataObj.people.lastamevarcellrow.sertCellcell.setAttrbutealgcetercell.erTextdataObj.people.emalvarcellrow.sertCellcell.setAttrbutealgcetercell.erTextdataObj.people.phoevarcellrow.sertCellcell.setAttrbutealgcetercell.erTextdataObj.people.addressvarcellrow.sertCellcell.setAttrbutealgcetercell.erTextdataObj.people.postcodedocumet.getElemetByIddisplay.appedChildtab//清除显示数据及表格uctiocleardisplaydataitabulldocumet.getElemetByIddisplay.removeChildtabtabull//使用query库中的Ajax函数实现异步数据访问uctostartRequestjqueryselect.trmdocumet.getElemetByIdpeopledtext.val-uedocumet.getElemetByIdpeopledtext.valuetablerows.people0.peopleddocumet.getEle-metByIdpeopledtext.value.postserver.aspxselectrowewDate.get-TmeJSON.strigiytablerowsuctiodataalertdataelsealert请输入要查询的peopleid462010.5Jquery库中的Ajax请求函数POST只用一句即可完成对象实例创建、准备调用、设置参数、发送请求过程其实T函数将上述过程全部封装对于Wb开发人员可以使语句更加简捷高效。
1服务器端srvr.spxltPageLanguagequotCquotAutoEventWireuptruequotCode-Filequotserver.aspx.csInheritsservergt2服务器端srvr.spx.cs部分
源码usingSystemusingSystem.CollectionsusingSystem.ConfigurationusingSystem.DatausingSystem.WebusingSystem.Web.SecurityusingSystem.Web.UIusingSystem.Web.UI.HtmlControlsusingSystem.Web.UI.WebControlsusingSystem.Web.UI.WebControls.WebPartsusingSystem.Web.Script.SerializationusingSystem.Data.SqlClientusingSystem.Textpublicpartialclassserver:System.Web.UI.PageprivateclasstablerecordpublicstringpeopleidpublicstringfirstnamepublicstringlastnamepublicstringemailpublicstringphonepublicstringaddresspublicstringpostcodeprivateclasstablerowspublictablerecordpeopleprotectedvoidPage_LoadobjectsenderEventArgseintsbyteastringstr//将数据写入数据库ifRequest.QueryStringquotaddrowquotnullsRequest.TotalBytesaRequest.BinaryReadsstrSystem.Text.Encoding.UTF8.GetStringaJavaScriptSerializerserializernewJavaScriptSerial-izertablerowstrowsserializer.DeserializelttablerowsgtstrSqlConnectionconnnewSqlConnectionConfigura-tionManager.AppSettingsquotDBConnectionStringquot//创建连接数据库对象stringinsertStrquotINSERTINTOlecaidb.dbo.peoplefirstnamelastnameemailphoneaddresspostcodequotquotVALUESpfirstnameplastnamepemailpphonepaddressppostcodequotSqlCommandinsertCmdnewSqlCommandinsert-StrconninsertCmd.Parameters.AddquotpfirstnamequotSqlDbType.NChar20//为Command对象添加参数insertCmd.Parameters.AddquotplastnamequotSqlDbType.NChar20insertCmd.Parameters.AddquotpemailquotSqlDbType.NVarChar50insertCmd.Parameters.AddquotpphonequotSqlDbType.NVarChar20insertCmd.Parameters.AddquotpaddressquotSqlDbType.NVarChar50insertCmd.Parameters.AddquotppostcodequotSqlDbType.NChar6insertCmd.Parametersquotpfirstnamequot.Valuetrows.people0.firstname//给参数赋值insertCmd.Parametersquotplastnamequot.Valuetrows.people0.lastnameinsertCmd.Parametersquotpemailquot.Valuetrows.peo-ple0.emailinsertCmd.Parametersquotpphonequot.Valuetrows.peo-ple0.phoneinsertCmd.Parametersquotpaddressquot.Valuetrows.people0.addressinsertCmd.Parametersquotppostcodequot.Valuetrows.people0.postcodetryconn.Open//打开连接intflaginsertCmd.ExecuteNonQuery//执行插入ifflaggt0Response.Writequot添加成功quotelseResponse.Writequot添加失败quot472010.5实用第一智慧密集catchSystem.ExceptioneeResponse.Writequotltscriptlanguagejavascriptgtalertquotee.Message.Totringquotlt/scriptgtquotfinallyconnClose关闭连接读数据库所有行将其生成JON字符串ifRequest.QuerytringreadquotnullsRequestTotalBytesaRequestBinaryReadsstrystemTextEncodingDefault.GettringastringpselectstringDataTabledtqlDataAdaptersdapselectstringselectpeopleidfirstnamelastnameemailphoneaddresspostcodefrompeopleorderbypeo-pleidquotqlConnectionconnnewqlConnectionConfigu-rationManager.AppettingsquotDBConnectiontringquot创建连接数据库对象sdanewqlDataAdapterpselectstringconndtnewDataTablesda.Filldttryconn.Open打开连接ifdt.Rows.Countgt0将查询到的数据生成JON字符串tringBuilderpeoplerowsnewtringBuilderquotquotpeoplequot:quotforinti0iltdt.Rows.Count-1iifidt.Rows.Count-1peoplerows.Appendquotquotpeopleidquot:quotquotdt.Rowsiquotpeopleidquot.Totringquotquotquotfirstnamequot:quotquotdt.Rowsiquotfirstnamequot.Totringquotquotquotlastnamequot:quotquotdt.Rowsiquotlast-namequot.Totringquotquotquotemailquot:quotquotdt.Rowsiquotemailquot.Totringquotquotquotphonequot:quotquotdt.Rowsiquotphonequot.Totringquotquotquotaddressquot:quotquotdt.Rowsiquotaddressquot.Totringquotquotquotpost-codequot:quotquotdt.Rowsiquotpostcodequot.Totringquotquotquotelsepeoplerows.Appendquotquotpeopleidquot:quotquotdt.Rowsiquotpeopleidquot.Totringquotquotquotfirstnamequot:quotquotdt.Rowsiquotfirstnamequot.Totringquotquotquotlastnamequot:quotquotdt.Rowsiquotlast-namequot.Totringquotquotquotemailquot:quotquotdt.Rowsiquotemailquot.Totringquotquotquotphonequot:quotquotdt.Rowsiquotphonequot.Totringquotquotquotaddressquot:quotquotdt.Rowsiquotaddressquot.Totringquotquotquotpost-codequot:quotquotdt.Rowsiquotpostcodequot.Totringquotquotquotpeoplerows.AppendquotquotResponse.Writepeoplerows.TotringelseResponse.WritequotNULLquotcatchystem.ExceptioneeResponse.Writequotltscriptlanguagejavascriptgtalertquotee.Message.Totringquotlt/scriptgtquotfinallyconn.Close//将对象转换为JON字符串ifRequest.QuerytringquotselectobjquotnullJavacripterializerobjstrnewJavacripterializertablerowstrowsnewtablerowstrows.peoplenewtablerecord1trows.people0newtablerecordtrows.people0.peopleidquot0quottrows.people0.firstnamequot大宝quottrows.people0.lastnamequot张quottrows.people0.emailquotdabaosohu.comquottrows.people0.phonequot66753390trowspeople0address上海黄埔新区ResponseWriteobjstrerializetrows根据peopleid查询数据库ifRequestQuerytringselectrownullsRequestTotalBytesaRequestBinaryReadsstrystemTextEncodingUTF8GettringaJavacripterializerserializernewJavacripteri-alizertablerowstrowsserializerDeserializelttablerowsgt482010.5strstingpselctst.
上一篇:
【精品】十天学会JSP
下一篇:
临床前药物安全性评价中毒性病理学新技术的应用