学习.net与ajax的详细案例总结
昨天看了一天的ajax,今天又看了两个小时,终于弄出来个门道,其实ajax不是难,不是枯燥,而是自己不会用,这是根本所在
首先了解什么是ajax。
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 通过 AJAX,您的 JavaScript 可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。 AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。 一提到javascript,大家都会想到浏览器的兼容性问题,其实ajax也需要考虑到这个问题。因为不同浏览器使用的web的javascript的类不一样,所以产生的效果也不会一样的。下面不瞎说了,直接引入代码供大家参考。{ var xmlhttp;//非IE浏览器创建XmlHttpRequest对象 if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } //IE浏览器创建XmlHttpRequest对象 if (window.ActiveXObject) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("msxml2.XMLHTTP"); } catch (ex) { } } } if (!xmlhttp) { alert("创建xmlhttp对象异常"); return false; } // xmlhttp.open("POST", "GetDate.ashx?nd=" + new Date(), false); //向服务器某个页面发出请求 xmlhttp.open("GET", "URL“, false); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) {//如果是状态码则显示成功 //document.getElementById("Text1").value = xmlhttp.responseText; xxxxx = xmlhttp.responseText;//在此处我们可以将我们传递的参数返回给我们的html标签,或者其他变量处理问题 } //responseText为服务器返回的文本 else { alert("AJAX服务器返回错误"); } } } xmlhttp.send();//开始发送请求 }
这只是前台的代码,就这些代码就已经足够了,实现了局部刷新页面的功能,剩下的后台代码是根据项目的不同而定,我在这里不必引入了。
大家看到这些代码感觉怎么样,对于刚学习javascript或者ajax的同学,要想记住这些代码,真的是很难啊,还有怎么去理解这些东西呢,我上面基本都有注释,大家一般可以理解。但是如果每个页面都需要局部刷新的话,这样就会感觉每个页面都要写这样的代码是不是很麻烦啊,jQuery帮助我们完成了很多东西,这样可以减轻我们开发项目的难度,以下是使用jQuery的代码:
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
另一种方式
$.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
是不是很简单啊,在这里我们这是调用他写好的函数,我们就可以实现我们的无刷新代码了,现在感觉是不是无刷新页面是不是很简单了,但是我们这只是传递个小数据而已,如果从数据库中提取数据时就会很麻烦的,以下引入我的部分代码,让大家思考一下
以下是我实现无刷新评论并显示的前台和后台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxComment.aspx.cs" Inherits="ajax学习.无刷新评论.AjaxComment1" %>
后台代码(AjaxComment.ashx)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using ajax学习.DataSetCommentTableAdapters; using System.Web.Services; namespace ajax学习.无刷新评论 { /// /// AjaxComment 的摘要说明 /// [WebService(Namespace = "https://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class AjaxComment : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string msg = context.Request["msg"]; new T_CommentTableAdapter().Insert(context.Request.UserHostAddress,msg,DateTime.Now.ToString());//使用的是强类型DataSet context.Response.Write("ok"); } public bool IsReusable { get { return false; } } } }
大家看完前台代码是不是有疑问了,如果传递很多字段,很多属性的数据时,该怎么办呢,如果每个数据都是这样的自己split()一下的话,那么做大项目的话肯定会累屎了,下面jQuery有帮我们做了件好事情,就是json的使用,下面我引入我的使用无刷新评论的json代码
前台代码:
后台代码:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using ajax学习.DataSetCommentTableAdapters; using System.Web.Script.Serialization; namespace ajax学习.无刷新分页 { /// /// PagedServices 的摘要说明 /// [WebService(Namespace = "https://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class PagedServices : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; // context.Response.Write("Hello World"); string action=context.Request["action"]; var adapter = new T_CommentTableAdapter(); if (action == "getpagecount") { int count=adapter.SelectCount().Value; int pagecount=count/10; if(count%10!=0) { pagecount++; } context.Response.Write(pagecount); } else if(action=="getpagedata") { string pagenum=context.Request["pagenum"]; int iPageNum = Convert.ToInt32(pagenum); var data = adapter.GetPagedData((iPageNum - 1) * 10 + 1, iPageNum * 10); List list=new List (); foreach(var row in data) { list.Add(new Comments() { Id = (int)row.Id, IP = row.IP, Msg = row.Msg, PostDate = row.PostDate, }); } JavaScriptSerializer jss = new JavaScriptSerializer(); context.Response.Write(jss.Serialize(list)); } } public bool IsReusable { get { return false; } } } public class Comments { public int Id { get; set; } public string IP{get;set;} public string Msg{get;set;} public string PostDate{get;set;} } }
这样我们真的是省了很多力气啊,是不是jQuery很强大啊。。。。。。。。。。。。。
然后吧,微软感觉我必须封装自己的ajax,这样使得开发者做项目变得容易一些,微软真的是帮我们封装好了一个,但是对于高手来说,大家都不想用,感觉这样的代码太呆板,一点不灵活,我再下面引入代码,供新手参考:(不了解ajax运行原理的新手一样可以使用ajax快速开发新的项目)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatPanel.aspx.cs" Inherits="ajax学习.UpdatePanel.UpdatPanel" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
但是微软后来真的是开发一个很好地工具,那就是ajax与WCF的结合,废话少说,引入代码,供大家思考
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WCF_Ajax.aspx.cs" Inherits="ajax学习.WCF之Ajax.WCF_Ajax" %>
后台代码:(PersonService.svc)
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) // 要创建返回 XML 的操作, // 请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)], // 并在操作正文中包括以下行: // WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml"; [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中直接调用后台封装的属性和方法了,就这样,很简单吧,言归正传,学会才是硬道理,我将我的代码程序上传到网上了,大家如果不懂的话,可以自己调试一下。