昨天看了一天的ajax,今天又看了两个小时,终于弄出来个门道,其实ajax不是难,不是枯燥,而是自己不会用,这是根本所在下面分享学习经验,以下是我程序代码的下载地址:http://vdisk.weibo.com/s/BQ2aD 或者这个地址 http://download ...
昨天看了一天的ajax,今天又看了两个小时,终于弄出来个门道,其实ajax不是难,不是枯燥,而是自己不会用,这是根本所在
下面分享学习经验,以下是我程序代码的下载地址:http://vdisk.weibo.com/s/BQ2aD 或者这个地址 http://download.csdn.net/detail/heikeyuit/5398845
首先了解什么是ajax。
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
{ var //非IE浏览器创建 if(get='_blank'>window.= new //IE浏览器创建 if (window.ActiveXObject) { try { = new ActiveXObject("Microsoft.); } catch (e) { try { = new ActiveXObject("ms); } catch (ex) { } } } if (!"创建); return false; } // false); = function () { if () { if (//如果是状态码则显示成功 //document.getElementById("Text1").value = xxxxx = 在此处我们可以将我们传递的参数返回给我们的html标签,或者其他变量处理问题 } //responseText为服务器返回的文本 else { alert("AJAX服务器返回错误"); } } } //开始发送请求 }
这只是前台的代码,就这些代码就已经足够了,实现了局部刷新页面的功能,剩下的后台代码是根据项目的不同而定,我在这里不必引入了。
大家看到这些代码感觉怎么样,对于刚学习javascript或者ajax的同学,要想记住这些代码,真的是很难啊,还有怎么去理解这些东西呢,我上面基本都有注释,大家一般可以理解。但是如果每个页面都需要局部刷新的话,这样就会感觉每个页面都要写这样的代码是不是很麻烦啊,jQuery帮助我们完成了很多东西,这样可以减轻我们开发项目的难度,以下是使用jQuery的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxComment.aspx.cs" Inherits="ajax学习.无刷新评论.AjaxComment1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src='/images/loading.gif' data-original="../js/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnComment").click(function () { var comment = $("#txtComment").val(); $.post("AjaxComment.ashx",{"msg":comment}, function (data, status) { if (status != "success") { alert("发表评论失败,请重试"); return; } if (data == "ok") { var newComment = $("<li>评论日期:"+new Date().toString()+",IP:,"+"本机"+"内容:"+comment+"</li>"); $("#ulComment").append(newComment); alert("评论发表成功"); } else { alert("评论发表有问题"); } }); }); }); </script></head><body> <form id="form1" runat="server"> <div> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="ajax学习.DataSetCommentTableAdapters.T_CommentTableAdapter" UpdateMethod="Update"> <DeleteParameters> <asp:Parameter Name="Original_Id" Type="Int64" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="IP" Type="String" /> <asp:Parameter Name="Msg" Type="String" /> <asp:Parameter Name="PostDate" Type="String" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="IP" Type="String" /> <asp:Parameter Name="Msg" Type="String" /> <asp:Parameter Name="PostDate" Type="String" /> <asp:Parameter Name="Original_Id" Type="Int64" /> </UpdateParameters> </asp:ObjectDataSource> <ul id="ulComment"> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1"> <ItemTemplate> <li>评论日期:<%#Eval("PostDate")%>,IP:<%#Eval("IP")%>,内容:<%#Eval("Msg")%><br/></li> </ItemTemplate> </asp:Repeater> </ul> <textarea id="txtComment" cols="20" rows="10"></textarea><br/> <input id="btnComment" type="button" value="提交" /> </div> </form></body></html>
后台代码(AjaxComment.ashx)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head> <title></title> <script src='/images/loading.gif' data-original="../js/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.post("PagedServices.ashx", { "action": "getpagecount" }, function (data, status) { for (var i = 1; i <=data; i++) { var td = $("<td><a href=''>" + i + "</a></td>"); $("#trPage").append(td); } $("#trPage td").click(function (e) { e.preventDefault();//不要导向链接地址 $.post("PagedServices.ashx", { "action": "getpagedata", "pagenum": $(this).text()}, function (data, status) { var comments = $.parseJSON(data); $("#ulComments li").remove(); for (var i = 0; i < comments.length; i++) { var comment = comments[i]; var li = $("<li>" + comment.Id + "---" + comment.IP + "---" + comment.Msg + "---" + comment.PostDate + "</li>"); $("#ulComments").append(li); } }); }); }); }); </script></head><body> <ul id="ulComments"></ul> <table><tr id="trPage"></tr></table></body></html>
后台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatPanel.aspx.cs" Inherits="ajax学习.UpdatePanel.UpdatPanel" %><%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="普通刷新页面显示当前时间" onclick="Button1_Click" /> </div> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Ajax无刷新显示当前时间" /> <br /> </ContentTemplate> </asp:UpdatePanel> </div> </form></body></html>
但是微软后来真的是开发一个很好地工具,那就是ajax与WCF的结合,废话少说,引入代码,供大家思考
using System;using System.Collections.Generic;using System.Linq;using System.Runtime.Serialization;using System.ServiceModel;using System.ServiceModel.Activation;using System.ServiceModel.Web;using System.Text;namespace ajax学习.WCF之Ajax{ [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class PersonService { // 要使用 HTTP GET,请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json) // 要创建返回 // 请添加 [WebGet(ResponseFormat=WebMessageFormat.// 并在操作正文中包括以下行: // WebOperationContext.Current.OutgoingResponse.ContentType = "text/ [OperationContract] public void DoWork() { // 在此处添加操作实现 return; } [OperationContract] public Person GetPerson(int id) { return new Person(){Name="Tom",Age=30}; } // 在此处添加更多操作并使用 [OperationContract] 标记它们 } public class Person { public string Name { get; set; } public int Age{get;set;} }}
使用了WCF后我们就可以在javascript中直接调用后台封装的属性和方法了,就这样,很简单吧,言归正传,学会才是硬道理,我将我的代码程序上传到网上了,大家如果不懂的话,可以自己调试一下。以下是我程序代码的下载地址:http://vdisk.weibo.com/s/BQ2aD 或者这个地址 http://download.csdn.net/detail/heikeyuit/5398845
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:学习.net与ajax的详细案例总结
关键词:.NET
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。