搜索

首页 >后端开发 >C#.Net教程 >学习.net与ajax的详细案例总结

学习.net与ajax的详细案例总结

高洛峰
高洛峰原创
2016-12-16 16:32:411071浏览

首先了解什么是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" %>



   
   
   


   


   

        DeleteMethod="Delete" InsertMethod="Insert"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
TypeName="ajax学习.DataSetCommentTableAdapters.T_CommentTableAdapter"
UpdateMethod="Update">
           
               
           
           
               
               
               
           
           
               
               
               
               
           
       
       

           
               
                   
  • 评论日期:<%#Eval("PostDate")%>,IP:<%#Eval("IP")%>,内容：<%#Eval("Msg")%>

    •            
           
           

   

    value="提交" />
   

   


后台代码（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 = "http://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 = "http://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" %>



       


       


       
       
       

           
            onclick="Button1_Click" />
       

       
      
           
               
                    Text="Ajax无刷新显示当前时间" />
                   

               
           
       

       


    但是微软后来真的是开发一个很好地工具，那就是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;}

        }
    }



    更多学习.net与ajax的详细案例总结相关文章请关注PHP中文网！


    声明：
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    上一篇：Asp.net Jquery Ajax 实例下一篇：C#索引器

    相关文章

    查看更多