解析客户端脚本、服务器端脚本
2014-02-25 16:44
316 查看
转自:http://blog.csdn.net/wang379275614/article/details/16857903
做b/s的东西,感觉首先要弄懂客户端与服务器端的交互原理(参考之前文章:http://blog.csdn.net/wang379275614/article/details/9771659 ),前台与后台的概念,前台、后台代码是如何被编译或解释的一个过程,不能云里雾里。
现在做网站必然离不开脚本,如果只懂得写codebehide里的东西是远远不够的,这里主要介绍asp.net中脚本(js为例)的分类及解释过程。
Ø <script>标记对中的代码;
Ø 写在一个单独js文件中(例如<script id="s" src="test.js"></script>中的test.js)中的代码。
Ø <scriptrunat="server">标记对中的代码(只能放置方法和属性等,而不能直接添加语句和表达式);
Ø <%%>中的代码。
在处理页面时web服务器会检测出页面中的服务器端内容,包括后台代码和前台代码中得服务器端脚本,并进行编译,生成一种汇编语言,并保存在程序集中(备后续使用,一次编译即可)。(asp中的服务器端脚本每次都由服务器端脚本引擎解释执行,与asp.net机制不同)
![](http://img.blog.csdn.net/20131121111202015?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzM3OTI3NTYxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
Ø 客户端脚本主要用于控制用户与浏览器的交互;而服务器端脚本与code-behind代码相似,主要用于生成网页代码。
Ø 注意两种脚本定义方法的方式,客户端脚本定义一个方法用functionfunName(){};客户端脚本其实就是后台代码,所以与传统的后台编程语言定义方法的方式一致,例如,public string funName(){};
Ø 客户端脚本对最终浏览用户相对是公开的;服务器端脚本是不对外开放的,要经过web服务器处理。即通过客户端浏览器请求到页面后,右击页面,查看源文件中的代码,有完整的客户端脚本,而肯定没有服务器端脚本。例如:
![](http://img.blog.csdn.net/20131121112117281?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzM3OTI3NTYxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
Ø 客户端(html)控件可以随意访问客户端或服务器端脚本定义的方法,因为此时页面上所有的东西都已发送到客户端;服务器端控件,只能调用服务器端脚本或.cs中定义的方法,若调用客户端脚本定义的方法,必然编译时因找不到方法而发生编译错误。
测试1:客户端控件调用服务器端脚本定义的方法,没错误
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
定义服务器端脚本
<script type="text/javascript" runat="server">
public string testServer(){
return "这是服务器端脚本";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%--服务器端控件调用服务器端脚本定义的方法testServer,没问题--%>
<asp:TextBox ID="TextBox1" runat="server" Text="<%#testServer()%>"></asp:TextBox>
<%--客户端控件调用服务器端脚本定义的方法testServer,没问题--%>
<input id="Text1" type="text" value="<%#testServer()%>" />
</div>
</form>
</body>
</html>
测试2:服务器端控件调用客户端脚本定义的方法
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<%--定义客户端脚本,如下:--%>
<script type="text/javascript">
function testBrowser() {
alert("这是客户端脚本");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%--客户端控件调用客户端脚本定义的testBrowser函数没有问题,如下语句:--%>
<%--<%--<input id="Button2" type="button" value="button" onclick="testBrowser()" />--%>
<%--服务器端控件调用客户端脚本的testBrowser方法会发生编译错误,如下:--%>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="testBrowser()" />
</div>
</form>
</body>
</html>
会发生如下错误:
![](http://img.blog.csdn.net/20131121111241859?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzM3OTI3NTYxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这是目前自己的理解,可能有不当的地方,请参考。
做b/s的东西,感觉首先要弄懂客户端与服务器端的交互原理(参考之前文章:http://blog.csdn.net/wang379275614/article/details/9771659 ),前台与后台的概念,前台、后台代码是如何被编译或解释的一个过程,不能云里雾里。
现在做网站必然离不开脚本,如果只懂得写codebehide里的东西是远远不够的,这里主要介绍asp.net中脚本(js为例)的分类及解释过程。
两种脚本概念
在写js代码时,首先要知道,脚本分客户端脚本和服务器端脚本,它们二者有很大的区别,解释机理是不同的。顾名思义,一个运行在客户端,一个运行在服务器端。(一般都写在前台的.aspx文件中)客户端
客户端脚本完全在客户浏览器中解释执行,主要是控制用户与浏览器的交互,它在服务器端不做任何处理,包括Ø <script>标记对中的代码;
Ø 写在一个单独js文件中(例如<script id="s" src="test.js"></script>中的test.js)中的代码。
服务器端
主要用于生成网页代码,感觉asp.net中服务器端脚本与后台.cs文件中得代码地位是相同的,就是将后台代码以服务器端脚本的形式转移到了前台。包括Ø <scriptrunat="server">标记对中的代码(只能放置方法和属性等,而不能直接添加语句和表达式);
Ø <%%>中的代码。
在处理页面时web服务器会检测出页面中的服务器端内容,包括后台代码和前台代码中得服务器端脚本,并进行编译,生成一种汇编语言,并保存在程序集中(备后续使用,一次编译即可)。(asp中的服务器端脚本每次都由服务器端脚本引擎解释执行,与asp.net机制不同)
对比
Ø 客户端脚本主要用于控制用户与浏览器的交互;而服务器端脚本与code-behind代码相似,主要用于生成网页代码。
Ø 注意两种脚本定义方法的方式,客户端脚本定义一个方法用functionfunName(){};客户端脚本其实就是后台代码,所以与传统的后台编程语言定义方法的方式一致,例如,public string funName(){};
Ø 客户端脚本对最终浏览用户相对是公开的;服务器端脚本是不对外开放的,要经过web服务器处理。即通过客户端浏览器请求到页面后,右击页面,查看源文件中的代码,有完整的客户端脚本,而肯定没有服务器端脚本。例如:
Ø 客户端(html)控件可以随意访问客户端或服务器端脚本定义的方法,因为此时页面上所有的东西都已发送到客户端;服务器端控件,只能调用服务器端脚本或.cs中定义的方法,若调用客户端脚本定义的方法,必然编译时因找不到方法而发生编译错误。
测试1:客户端控件调用服务器端脚本定义的方法,没错误
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
定义服务器端脚本
<script type="text/javascript" runat="server">
public string testServer(){
return "这是服务器端脚本";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%--服务器端控件调用服务器端脚本定义的方法testServer,没问题--%>
<asp:TextBox ID="TextBox1" runat="server" Text="<%#testServer()%>"></asp:TextBox>
<%--客户端控件调用服务器端脚本定义的方法testServer,没问题--%>
<input id="Text1" type="text" value="<%#testServer()%>" />
</div>
</form>
</body>
</html>
测试2:服务器端控件调用客户端脚本定义的方法
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<%--定义客户端脚本,如下:--%>
<script type="text/javascript">
function testBrowser() {
alert("这是客户端脚本");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%--客户端控件调用客户端脚本定义的testBrowser函数没有问题,如下语句:--%>
<%--<%--<input id="Button2" type="button" value="button" onclick="testBrowser()" />--%>
<%--服务器端控件调用客户端脚本的testBrowser方法会发生编译错误,如下:--%>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="testBrowser()" />
</div>
</form>
</body>
</html>
会发生如下错误:
总结
aspx、aspx.cs文件运行时的处理过程:服务器先将页面中没服务器标识(例如runat="server")的部分取出,编译其它部分(包括服务器端脚本),然后发送处理过后的文件至客户端,由客户端的脚本引擎解释客户端脚本。这是目前自己的理解,可能有不当的地方,请参考。
相关文章推荐
- 9.1.1: 企业应用开发面临的挑战---可扩展性,可伸缩性
- 【全知讯微小兔】浅谈:微信营销深水误区是什么!
- 手动删除ArcGis
- C++打印出当前源文件的文件名以及源文件的当前行号
- 怎样克服浮躁心理
- 深入理解ReferenceQueue GC finalize Reference
- vi修改编辑文件提示Write Error!(File System full?)错误的研究
- 可视化编程的一些资料
- 向GridView的模板列绑定OnClientClick的函数时出现了奇怪的问题
- CentOS 6.5 X64 U盘启动盘制作
- HDU-1505 City Game
- CUDA的计时方法
- verilog写的三分频
- SQL on Hadoop系统的最新进展
- 迷宫算法
- Android 系列:如何解决安卓SDK无法下载Package的问题
- Ubuntu下为Firefox安装Adobe Flash Player
- platform_driver_register()--如何match之后调用probe
- Linux环境下修改MySQL端口方法:
- php @符号的使用