zoukankan      html  css  js  c++  java
  • 前台和后台,前端和后端

    概述

            学习AJAX的过程中,发现自己之前存在着很多的不足,于是花了些时间,总结了一些知识,现在和大家分享一下。


    前端和后端,前台和后台

            前端和后端指的是客户端和服务器端;前台和后台指的都是客户端上浏览者浏览界面和管理者管理界面。


    get和post方法

            客户端和服务器端进行数据的传递通过的都是get方法或者post方法。get方法的数据会留在浏览器中新返回页面的url里面;post方法中的数据在浏览器的请求包内的数据内容里面,服务器接收后,如果没有对齐进行处理,那么我们就无法在返回页面中找到相应的数据。


    脚本

           单纯的说脚本太抽象,从电影的角度说:电影后期编辑时,编辑师根据脚本对拍摄的影像进行剪切,排版,加入特效等等相应的操作;从计算机语言的角度说:HTML文档后期运行时,浏览器根据脚本(客户端脚本)对HTML进行相应动态的处理和显示。具体让我用一句话来说的话,脚本就是可以加工成型东西的机制。


    纯HTML页面之间数据传递和使用

            叙述

                   单单使用html标签进行数据的传递和使用(特指)是不可能实现的,所以,这里说的“纯”是可以有客户端脚本的HTML页面,当然,另一个隐含的意思就是,这里没有后台脚本等等的参与,所以,你直接把数据提交给服务器,这个方法是不管用的,也就是说post方法不可以实现纯HTML页面之间数据传递(可以)和使用(不可以),在这里本人也会给出相应post方法的数据传递的实现代码,好了,接着说本块的这个话题。

                    如何实现这个该功能呢?有什么方法呢?一个思路是通过get方法;另一个思路是通过浏览器中的cookie。

           通过get方法    

                    传递数据的页面代码(通过3种方法实现,其它的大家自己再想一想,本句不再重复)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>利用链接标签a手动拼接url</title>
      </head>
      <body>
      	<a href="获得url中的参数.html?name=qingshan&sex=man">链接</a>
      </body>
    </html>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>利用javascript手动拼接url</title>
        <script type="text/javascript">
        	  //JavaScript中写window.open("test3.html?name=qingshan&key=qingshan");弹出窗口一般不行
        		function Post(){
    				url="获得url中的参数.html?name=" + encodeURI(document.getElementById("name").value);
    				//页面跳转,并在url中传递数据
    				location.href=url;  //location为对象
    				//window.location.href=url;  location为对象
    				//window.location=url; location为属性
    				//document.location=url;				
    			}
        </script>
      </head>
      <body>
      	<input type="text" name="name" id="name"/>
    		<input type="submit" value="提交" onclick="javascript:Post();" />
      </body>
    </html>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" />
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>利用form表单自动拼接url</title>
    	</head>	
    	<body>		
    		<!--浏览器会自动在url后面加上相应的值,形如:test.html?name=数值&sex=数值-->
    		<form method="get" action="获得url中的参数.html">
    			姓名:<input type="text" name="name" />
    			<br />
    			性别:<input type="text" name="sex" />
    			<br />
    			<input type="submit" value="提交" />
    		</form>
    	</body>
    </html>

                    接收并显示数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" />
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>获得url中的参数</title>
    		<script type="text/javascript">
    			/*
    				1、从 URL 字符串中提取变量的值
    				2、字符串对象的indexof(),substr(),split(),toUpperCase()方法
    			*/
    			//方法一  href属性			
    			function Request(strName){ 
    				//BOM对象 获取当前页面的url  
    				var strHref = window.document.location.href; 
    				
    				//字符串对象的方法 获取参数字符串开始的位置
    				var intPos = strHref.indexOf("?"); 
    				//取出参数字符串
    				var strRight = strHref.substr(intPos + 1);
    				//将多个参数,按照“&”进行分割
    				var arrTmp = strRight.split("&"); 
    				
    				for(var i = 0; i < arrTmp.length; i++){ 
    					//将一个参数字符串按照“=”分割成:参数名和参数值
    					var arrTemp = arrTmp[i].split("=");
    					if(arrTemp[0].toUpperCase() == strName.toUpperCase())
    						return arrTemp[1]; 
    				}				
    				return ""; 
    			}
    			
    			//方法二  search方法			
    			/*
    			function Request(sPan){
    				var sQuery = document.location.search;
    				if(sQuery.indexOf("?") == 0)
    					sQuery = sQuery.substr(1);
    					
    				if(sQuery.indexOf("&") >= 0){
    					var aQuery = sQuery.split("&");
    					var sTempQuery;
    					
    					for (var nTempCount = 0; nTempCount < aQuery.length; nTempCount++){
    						sTempQuery = aQuery[nTempCount];
    						
    						if (sTempQuery.indexOf("=") >= 0){
    							if (sTempQuery.substring(0,sTempQuery.indexOf("=")) == sPan){
    								//return deCodeURI(sTempQuery.substr(sTempQuery.indexOf("=") + 1));  JavaScript脚本
    								return sTempQuery.substr(sTempQuery.indexOf("=") + 1);  //表单	
    							}
    						}else
    							return false;
    					}
    					
    					return false;
    				}else{
    					if (sQuery.indexOf("=") >= 0){
    						if (sQuery.substring(0,sQuery.indexOf("=")) == sPan){
    							//return decodeURI(sQuery.substr(sQuery.indexOf("=") + 1));  JavaScript脚本
    							return sQuery.substr(sQuery.indexOf("=") + 1);
    						}else 
    							return false;
    					}else
    						return false;
    				}
    			}
    			*/
    		</script>
    	</head>
    	
    	<body>	
    		<form method=get action="test3.htm" name="myform">
    			<input type="text" name="name" value="请在文本输入框里输入内容" />
    			<input type="submit" value="提交" />
    		</form>
    		<script type="text/javascript">
    			//页面加载完成后自动运行下面的代码
    			Rtext=Request("name")
    			if(Rtext!=""){
    				myform.name.value=Rtext;
    			}
    		</script>
    	</body>
    </html>

           通过浏览器cookie

                   传送数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>发送数据</title>
        <script type="text/javascript">	    
    	    //传送的数据赋值到cookie中
    			function setCookie(name,value,path)	//两个参数,一个是cookie的名子,一个是值
    			{
    			    //var Days = 30; 	//此 cookie 将被保存 30 天
    			    //var exp  = new Date();    //new Date()("December 31, 9998");
    			    //exp.setTime(exp.getTime() + Days*24*60*60*1000);
    			    
    			    //document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    			    //document.cookie = name + "="+ escape (value) + ";expires=";
    			    
    			    //escape()及unescapte()方法已过时,现使用encodeURI()和decodeURI()
    			    document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires=";
    			}
    			
    			//从cookie中取出相应的值
    			function getCookie(name)        
    			{
    			    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    			    try{
    			    	if(arr != null)
    			    		return decodeURI(arr[2]); 
    			    	return null;
    			    }catch(err){			    	
    			    }			
    			}
    			
    			//删除cookie中相应的值
    			function delCookie(name)
    			{
    			    var exp = new Date()();
    			    exp.setTime(exp.getTime() - 1);
    			    var cval=getCookie(name);			    
    			    if(cval!=null) 
    			    	document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    			}
    			
    			//往cookie中添加传送数据
    			setCookie("name","青山");
       	</script>
      </head>
    
      <body>
      	<a href="ReadCookie.html">跳转</a>
      </body>
    </html>

                   显示数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>显示数据</title>
        <script type="text/javascript">
    	    //往cookie中添加传送的数据
    			function setCookie(name,value,path)	//两个参数,一个是cookie的名子,一个是值
    			{
    			    //var Days = 30; 	//此 cookie 将被保存 30 天
    			    //var exp  = new Date();    //new Date()("December 31, 9998");
    			    //exp.setTime(exp.getTime() + Days*24*60*60*1000);
    			    
    			    //document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    			    //document.cookie = name + "="+ escape (value) + ";expires=";
    			    
    			    //escape()及unescapte()方法已过时,现使用encodeURI()和decodeURI()
    			    document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires=";
    			}
    			
    			//从cookie中取出相应的值
    			function getCookie(name)        
    			{
    					//正则表达式的运用
    			    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    			    try{
    			    	if(arr != null)
    			    	//避免中文乱码问题
    			    		return decodeURI(arr[2]); 
    			    	return null;
    			    }catch(err){			    	
    			    }			
    			}
    			
    			//删除cookie中相应的值
    			function delCookie(name)
    			{
    			    var exp = new Date();
    			    exp.setTime(exp.getTime() - 1);
    			    var cval=getCookie(name);			    
    			    if(cval!=null) 
    			    	document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    			}
    			
    			//从cookie中获得数据
    			alert(getCookie("name"));
    			//删除数据
    			delCookie("name");
    			alert("删除?" + getCookie("name"));
        </script>
      </head>
    
      <body>
      </body>
    </html>

           post方法提交数据

                  对于HTML中书写form标签的方法在这里就不写了,下去有兴趣的读者可以自己写一下。下面用的方法是通过Javascript创建节点的方法,具体如下

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>模板</title>
        <script type="text/javascript">
        	function addForm(){
        		//创建form标签,并设置相应的属性
        		var fatherForm = document.createElement("form");
        		fatherForm.method="post";  //可以设置为get
        		fatherForm.action="a.html";
        		
        		//创建第一个input标签,并设置相应的属性
        		var firstInput = document.createElement("input");
        		firstInput.type="hidden";   //child1.setAttribute("type","text");
        		firstInput.name="name";
        		firstInput.value="青山";
        		
        		//创建第二个input标签,并设置相应的属性
        		var secondInput = document.createElement("input");
        		secondInput.type="hidden";
        		secondInput.name="sex";
        		secondInput.value="男";
        		
        		//将创建的input的节点添加到form标签里
        		fatherForm.appendChild(firstInput);
        		fatherForm.appendChild(secondInput);    		
        		
        		//将创建的form节点添加到body标签里
        		//document.getElementById("body").appendChild(father);
        		document.body.appendChild(fatherForm);
        		
        		//提交表单
        		fatherForm.submit();
        	}
        </script>
      </head>
      <body id="body">
      	<input type="button" value="input" onclick="javascript:addForm();"/>
      </body>
    </html>

                           对于post的方法的验证,可以逐步的做,可以先显示创建的节点,然后通过工具查看相应的请求(post或get)

            

    ASP.net页面之间的跳转

            asp.net页面之间的跳转有多种思路。思路一:客户端直接进行跳转工作;思路二:服务器端执行相应的服务器端代码进行相应的跳转工作;思路三:浏览器执行服务器端返回的脚本进行跳转。

           三种思路,每一种思路都有很多具体的实现,例如:上面get和post就是一些具体的方法。在这里只写一些本人认为重点的内容

    不需要执行服务器端代码
        1、有javascript参与
             修改属性 
                 1、location.href="跳转后的页面.html";
                 2、window.location="跳转后的页面.html";
                 3、window.location.href="跳转后的页面.html";
                 4、document.location="跳转后的页面.html";
             执行方法
                 1、window.open("跳转后的页面.html");
                 2、表单提交方法
        2、无javascript参与
             1、<a href="http://www.baidu.com?name=青山&sex=男">跳转到百度</a>
             2、<form method="get" action="跳转后的页面.html"></form> <!--method可以为post-->
    
    只需要执行服务器端代码
        1、response.redirect("answer.aspx?name=aaa&sex=bbb");  //注意,这个可能是第三种情况
        2、server.transfer("answer.aspx?name=aaa&sex=bbb");
        3、server.execute("answer.aspx?name=aaa&sex=bbb");
           
        区别:
             response.redirect():没有站点限制(可以由雅虎服务器跳到新浪服务器);速度慢;当前url显示的路径改变;
             transfer()和execute():只能进行站内页面跳转(同一台服务器上);速度快;当前url显示的路径不变;
             redirect():可实现*.aspx页面跳转到其它类型页面
             transfer():只能进行*.aspx页面之间跳转
             execute():把aspx页面上的内容插入到另一个aspx页面最后面
    
    需要服务端和客户端都执行脚本
        通过使用Response.Write方法有多种具体的实现,在这里就不写了
        1、Response.Write("<script type='text/javascript'>window.open('aaa.aspx?name=qingshan&sex=man');</script>");
               很多浏览器禁止窗口的弹出窗体;目标页面和原页面可以在2个服务器上,原窗口保留,另外新增一个新页面
        2、Response.Write("<script type='text/javascript'> window.location='aaa.aspx?name=qingshan&sex=man';</script>");
               新打开的页面,原窗口被代替

    asp.net页面之间数据的传递

            客户端和服务器端进行数据的交流都是通过post方法或者get方法,这一点在前面也说了,之所以在这里再说,是为了让大家明白清楚,下面的内容。

     runat="server" 的意思就是变成控件,变成asp.net的控件,标签元素和控件是不同的东西,在服务器端,控件会进行一个处理,生成具有一些标志的标签元素,然后返回给浏览器,浏览器和服务器端进行交互的时候,都会把这些具有特殊标志的标签元素的所有特性给传过来

           asp.net服务器端控件会在客户端请求的时候,被服务器变成标签元素返回给浏览器,浏览器每次和服务器进行交互的时候,都会把这些标签的state返回给服务器端,然后,服务器端解析这些状态,看看是否有相应事件的触发,当然,我们也可以通过后端代码访问这些数据,因为这些数据包含了该“控件”的所有信息,所以,有时会使我们对post和get方法在这里的作用有些迷茫,其实,这些数据都是通过post方法或者get方法实现传递的,至于服务器端是如何解析数据并执行的,我们现在不用管。

           一个小测试,说明服务端控件传送state信息。

    前端
    <body>
        <form id="form1" runat="server" method="get">
            <asp:Button ID="Button1" runat="server" Text="测试" onclick="Button1_Click" />
        </form>
    </body>
    
    后端
        protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Write("测试内容");
        }

    结果(方便大家看,这里用的为get方法)


            接着说我们ASP.net页面之间数据传输的问题,这里具体的代码就不写了,说一下思路。思路一:前台为主;思路二:后台为主。具体的东西大家可以看一下别人的东西吧!下面是我copy张世栋并简单做了一些修改的东西,大家可以看看

    1. 使用QueryString变量
       QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中。但是对于传递数组或对象的话,就不能用这个方法了。
    
    //ask.aspx的代码   
    protected void Button1_Click(object sender,EventArgs e)  
    {  
        //传递的参数包含在URL中,URL的长度有限制
        Response.Redirect("answer.aspx?name=天天");  
    }  
      
    //answer.aspx中代码   
    protectedvoid Page_Load(object sender, EventArgs e)  
    {  
        Response.Write(Request.QueryString["name"]);  
    }
    
                                                                        
    2. 使用Application 对象变量
       Application对象的作用范围是整个全局,也就是说对所有用户都有效。其常用Lock和UnLock方法来对application对象进行锁定,防止多个用户同时对次此对象进行操作,造成数据混乱。
    
    //ask.aspx的代码  
    private void Button1_Click(object sender, System.EventArgs e)  
    {  
        //类似与哈希表
        Application["name"] = "天天";  
        //使用Server.Transfer跳转页面的时候浏览器显示的地址并没有改变
        Server.Transfer("answer.aspx");  
    }  
    //answer.aspx中代码  
    private void Page_Load(object sender, EventArgs e)  
    {  
        Application.Lock();  
        Response.Write(Application["name"].ToString());  
        Application.UnLock();  
    }
    
    3. 使用Session变量
       其操作与Application类似,作用于用户个人,所以,过量的存储会导致服务器内存资源的耗尽。
    //ask.aspx的代码
    private void Button1_Click(object sender, System.EventArgs e)  
    {  
        Session["name"] = "天天";  
        Response.Redirect ("answer.aspx");  
    }  
    //answer.aspx中代码  
    private void Page_Load(object sender, EventArgs e)  
    {  
        Response.Write(Session["name"].ToString());  
    }
    
                                                             
    4. 使用Cookie对象变量
       与Session一样,对每一个用户而言的,Cookie是存放在客户端的,而session是存放在服务器端的。而且Cookie的使用要配合ASP.NET内置对象Request来使用
    
    //ask.aspx的代码  
    private void Button1_Click(object sender, System.EventArgs e)  
    {  
          HttpCookiecookieTest = new HttpCookie("name"); //创建cookie对象  
          cookieTest.Value ="天天";                      //给cookie对象赋值  
          Response.AppendCookie(cookieTest);              //保存cookies对象(response.Cookie.Add(CookieName);)  
          erver.Transfer("answer.aspx");  
    }  
    //answer.aspx中代码  
    private void Page_Load(object sender, EventArgs e)  
    {  
         HttpCookie MyCookie= Request.Cookies["name"];//获取Cookie对象  
         String StrName =MyCookie.Value;   //获取其变量值  
         Response.Write(StrName);  
    }  
    
    5. 使用cache缓存的方式
       缓存存在的时间不是太长所以需要慎重使用
    
    //ask.aspx的代码  
    protected void Button1_Click(object sender,EventArgs e)  
    {  
        this.Cache.Insert("name", "天天");  
        Server.Transfer("answer.aspx");  
    }  
      
    //answer.aspx中代码  
    protectedvoid Page_Load(object sender, EventArgs e)  
    {  
        Response.Write(Cache["name"].ToString());  
    }  
    
    6. 使用Server.Transfer方法
       这个才可以说是面象对象开发所使用的方法,其使用Server.Transfer方法把流程从当前页面引导到另一个页面中,新的页面使用前一个页面的应答流,所以这个方法是完全面象对象的,简洁有效。
    
    //ask.aspx的代码  
    public string name  
    {  
        get  
        {  
            return "天天";  
        }  
    }  
    private void Button1_Click(object sender, System.EventArgs e)  
    {  
        Server.Transfer("answer.aspx");  
    }  
      
    //answer.aspx中C#代码  
    private void Page_Load(object sender, EventArgs e)  
    {  
        ask a = new ask();  
        string StrName  = a.name;  
        Response.Write(StrName);  
    }

            方法不仅仅只有上面那些,还有很多种,有兴趣的读者,可以继续做下去。

    总结

           本篇博客主要写的内容为:静态HTML之间页面的转化;静态HTML之间数据的传递;ASP.net页面之间的转化;ASP.net页面之间数据的传递;静态HTML和ASP.net页面之间的交互。里面的有些内容可能不是做了为一个模块来讲,但是,可以从别的模块中得到,所以在上面的描述中就没有再重复的写了,另外,在静态HTML和ASP.net页面之间交互的解释非常的少,

  • 相关阅读:
    正则表达式
    JavaScript基础
    Servlet监听器
    Java EKT关键技术强化 tomcat中文乱码问题
    spring和springmvc 整合步骤
    [ERROR] [ERROR] Some problems were encountered while processing the POMs: [ERROR] 'packaging' with value 'war' is invalid. Aggregator projects require 'pom' as packaging. @ line 9, column 16
    Pagehelper的 使用
    异步 json的使用
    分页技术 PageHelper
    Exception encountered during context initialization
  • 原文地址:https://www.cnblogs.com/riasky/p/3464973.html
Copyright © 2011-2022 走看看