HTML+javascript+aspx+c#实现ajax功能

最新推荐文章于 2019-07-24 21:59:48 发布

dujingjing1230

最新推荐文章于 2019-07-24 21:59:48 发布

阅读量3.5k

点赞数

分类专栏： Javascript AJAX 文章标签： javascript ajax html c# xsl stylesheet

本文链接：https://blog.csdn.net/dujingjing1230/article/details/4191841

版权

AJAX 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

Javascript

30 篇文章 0 订阅

订阅专栏

前面我使用了最近本的asp文件和vb脚本去实现了ajax,但是现在都已经基本上不用asp文件了,下面就说说如何使用.net1.1中的文件来实现ajax吧。

首先必须明白ajax中最重要还是那个xmlhttp对象,然后就是相当于一个触发器的javascript。先创建一个html文件:

<html> <head> <title>DotNet AJAX Sample</title> <mce:style></mce:style><style mce_bogus="1"> body, input {font-family: arial; font-size: 12px;} </style> <mce:script src="DotNet.js" mce_src="DotNet.js"></mce:script> </head> <body> <form name="frmStuff" id="Form1"> <table border="0" cellpadding="4" cellspacing="0" id="Table2"> <tr> <td width="100">Name:</td> <td><input type="text" name="txtName" id="txtName" autocomplete="off" οnkeyup="show_data(this.value);"></td> </tr> <tr> <td width="100" valign="top">Suggestions:</td> <td> <div id="nameList"></div> </td> </tr> </table> </form> </body> </html>

这段HTML很简单就是一个input和一个包含一个div的table,input有个onkeyup事件,然后div是用来显示onkeyup事件发生时返回的数据。当然它用到得javascript存放在DotNet.js中,下面这些代码就是DotNet.js中的javascript:

script> var xmlHttp; var requestURL = 'getusernames.aspx?q='; var is_ie = (navigator.userAgent.indexOf('MSIE') >= 0) ? 1 : 0; var is_ie5 = (navigator.appVersion.indexOf("MSIE 5.5")!=-1) ? 1 : 0; var is_opera = ((navigator.userAgent.indexOf("Opera6")!=-1)||(navigator.userAgent.indexOf("Opera/6")!=-1)) ? 1 : 0; //netscape, safari, mozilla behave the same??? var is_netscape = (navigator.userAgent.indexOf('Netscape') >= 0) ? 1 : 0; function show_data(strName){ if (strName.length > 0){ //访问的文件和参数 var url = requestURL + strName; //创建发送请求的 XMLHTtp对象 xmlHttp = GetXmlHttpObject(stateChangeHandler); //向那个特定的url发送xmlHttp请求 xmlHttp_Get(xmlHttp, url); } else { document.getElementById('nameList').innerHTML = ''; } } //用来监控xmlhttp对象的状态,每次状态改变它就会fire function stateChangeHandler() { if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete'){ //返回结果 var str = xmlHttp.responseText; document.getElementById('nameList').innerHTML = str; } } function xmlHttp_Get(xmlhttp, url) { xmlhttp.open('GET', url, true); xmlhttp.send(null); } function GetXmlHttpObject(handler) { var objXmlHttp = null; //根据不同的浏览器创建不同的对象 if (is_ie){ var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; try{ objXmlHttp = new ActiveXObject(strObjName); objXmlHttp.onreadystatechange = handler; } catch(e){ alert('IE detected, but object could not be created. Verify that active scripting and activeX controls are enabled'); return; } } else if (is_opera){ alert('Opera detected. The page may not behave as expected.'); return; } else{ // Mozilla | Netscape | Safari objXmlHttp = new XMLHttpRequest(); objXmlHttp.onload = handler; objXmlHttp.onerror = handler; } //返回实例化的对象 return objXmlHttp; } function UseValue(strVal){ document.frmStuff.txtName.value = strVal; } </script>

注意这里有个变量是requesturl,我这里设置为'getusernames.aspx?q=',如果你请求的aspx不是喝这个html文件在同一个目录下就需要不能使用这种形式来给变量赋值。我目前只知道可以通过localhost/website/subdir/...这种形式可以访问不是和这个html同文件夹的文件,好像还可以通过xmlhttp.send来设置,我没研究。

上面这两部分其实和上篇文章中给出的例子差不多,下面的就不会一样了。因为我们使用的是aspx文件和c#脚本来实现服务器端被请求的文件和相应的。

我们先创建一个GetUsernames.aspx文件,然后去掉除了@page开头的这一行以外的其它所有行,然后在这个aspx文件的代码文件中输入下面的代码:

private void Page_Load(object sender, System.EventArgs e) { GetUsernameList(); } private void GetUsernameList() { //把请求的字符串赋给变量strQuery string strQuery = Request["q"].ToString(); //创建一个xml形式的变量来存放发送给客户端的信息 string strXmlNames = ""; //xml内容. string[] arrStrNames = new string[5]{"Ian Suttle", "John Doe", "Alex Wright", "Albert Einstein", "Sierra Tracy"}; //为每个名字创建xml结点 foreach(string strName in arrStrNames) { //If the request matches the beginning of a name, then add it to the string // otherwise it shouldn't be a valid match if (strName.ToLower().Substring(0, strQuery.Length) == strQuery.ToLower()) strXmlNames += "<user><name>" + strName + "</name></user>"; } //增加xml字符串的父节点 strXmlNames = "<?xml version=/"1.0/" ?><users>" + strXmlNames + "</users>"; //创建一个XmlDocument对象来存放我们的xml字符串 XmlDocument xDoc = new XmlDocument(); xDoc.LoadXml(strXmlNames); //使用xsl-T XPathNavigator xPathNav = xDoc.CreateNavigator(); //创建XSL-T对象 XslTransform xslt = new XslTransform(); xslt.Load(Server.MapPath("Names.xslt")); //对xml进行转换,并把相应后的结果作为响应输出字符串 xslt.Transform(xPathNav, null, Response.OutputStream); }

下面再给大家附上xslt文件:

<?xml version="1.0" encoding="UTF-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:for-each select="users/user"> <xsl:value-of select="name" /><br /> </xsl:for-each> </xsl:template> </xsl:stylesheet>

这些代码也很简单毕竟只是例子,呵呵。可能有的新手还不懂xsl-t,说白了xsl-t控制xml文件就相当于css控制HTML文件,只是控制它的显示。我也是之前在做dotnetnuke的User Defined Table模块时学了xsl,花点时间去学,很简单的。

事实上在.net2.0和.net3.5已经基本上不需要这么复杂的响应了,我们这个例子是针对现在还是用.net1.1做开发而想实现ajax的新手。不过你要是想使用magicajax什么的就不需要学习这个东西了,毕竟人家都给封装好了,你只是简单的用。我个人不是很喜欢那些嚼烂的东西,就算用我也得改改它,以便更好用,所以我更喜欢从基础开始,去看他们的实现原理。

如果这个文章对你有帮助你就顶一下。

PS:看到一篇一样性质的文章Lhttp://www.cnblogs.com/hyfei0315/archive/2008/07/15/1243388.html, 有兴趣可以看看。

dujingjing1230

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML+javascript+aspx+c#实现ajax功能

前面我使用了最近本的asp文件和vb脚本去实现了ajax,但是现在都已经基本上不用asp文件了,下面就说说如何使用.net1.1中的文件来实现ajax吧。首先必须明白ajax中最重要还是那个xmlhttp对象,然后就是相当于一个触发器的javascript。先创建一个html文件: DotNet AJAX Sample <!-- body, i
复制链接

扫一扫

专栏目录