关于jsp、js、html代码执行顺序
2017-04-22 00:49
435 查看
<html> <head> <script type="text/javascript"> function jsLoad() { document.body.innerHTML += "#jsLoad:" + new Date().getTime(); } function jsGo() { console.log("jsGo:" + new Date().getTime()); <% System.out.println("Java in jsGo:" + System.currentTimeMillis()); %> } </script> </head> <body onload="jsLoad()"> <%="Java in htmlBody:" + System.currentTimeMillis()%> <input type="button" value="Click" onclick="jsGo()" /> </body> </html>输出结果如下(按顺序排列):
Java in jsGo:1492802686580(Eclipse控制台输出,这是服务器端,与前台显示没关)
Java in htmlBody:1492802686581(Html网页内容,直接浏览器渲染)
jsLoad:1492802687009(Html网页内容,直接浏览器渲染)
jsGo:1492802689999(浏览器客户端控制台(手动点击按钮后发生))
=======================================================================
先通过上面的结果来看现象:
1.最初js方法jsGo没被调用,但里面的java代码直接执行了,在它上面的js代码都没执行。
2.<body>标签里面的java代码几乎与js里面的java代码同时执行,实际上很多时候两时间都一样。
3.<body>里面的onload方法在页面结束加载之后触发。
4.手动点击“Click”按钮后,浏览器控制台输出:jsGo:1492802689999,但并没有执行java程序。
=======================================================================
通过上面的现象,分析总结如下:
<%xxx%>这是jsp中嵌入的java程序,是在服务器端运行的。
<script>xxx</script>这是页面脚本,是在浏览器客户端运行的。
在编译jsp页面时,是直接编译里面的java代码,生成一个servlet,最终输出到前台的是一个html格式的流(原先所有的java代码都变成html里面的常量了),然后浏览器客户端对html进行解析渲染,在渲染时是标准的html格式,完全没有任何java代码(如果有浏览器也无法解析啊)。
JSP是Servlet的扩展,在没有JSP之前,就已经出现了Servlet技术。Servlet是利用输出流动态生成HTML页面,包括每一个HTML标签和每个在HTML页面中出现的内容。
每个JSP页面就是一个Servlet实例——JSP页面由系统编译成Servlet,Servlet再负责响应用户请求。JSP其实也是Servlet的一种简化,使用JSP时,其实还是使用Servlet,因为Web应用中的每个JSP页面都会由Servlet容器生成对应的Servlet。首次请求转化abc.jsp->xyzServlet.java->xyzServlet.class,再次请求就更快了。
响应给浏览器的html文档如下:
<html> <head> <script type="text/javascript"> function jsLoad() { document.body.innerHTML += "#jsLoad:" + new Date().getTime();// 时间当然是在浏览器给出的,只有java代码是传来之前就已变成常量值了 } function jsGo() { console.log("jsGo:" + new Date().getTime()); } </script> </head> <body onload="jsLoad()"> Java in htmlBody:1492802686581#jsLoad:1492802687009// 注:“#jsLoad:1492802687009”是在onload完成后加上去的 <input type="button" value="Click" onclick="jsGo()" /> </body> </html>
点击“Click”按钮后执行js方法jsGo(),但里面已经没有java代码,所以当然不可能在控制台(而且还是服务器端的)打印出语句了。
=======================================================================
从反向来分析一下:(页面上的js代码是HTML文档的一部分)
1.服务器如tomcat根本就没有去解析渲染html(包括js等页面脚本)的能力,故js的一些属性方法是不可能在服务器进行预执行的,如上面的new Date()当然是在浏览器每次加载网页时由浏览器去解析出来的。
2.浏览器压根就没有解析java代码的能力,所以到达浏览器的html页面里面一定是不包含java代码的。
3.服务器在把jsp编译成servlet时,由于无解析html、js脚本的能力,故只能直接把java代码编译完成,其他的原封不动交给浏览器去解析。
4.推论:js可以使用java的变量,但是java不可以使用js的变量。因为java代码只在服务器编译一次就完事了,成为html里面的常量值了,所以js当然可以直接调用,但服务器并不能识别js声明的变量和函数,当然也就无法进行调用了。
5.简单记住一点:jsp页面只在服务器存在,到浏览器只存在纯html(当然其中包括js)。
=======================================================================
html、js的加载顺序:
<html> <head> <script> alert("script-head"); </script> </head> <body onload="alert('html-tag');"> <script> alert("script-body"); </script> </body> <script> alert("script-body-outer"); </script> </html> <script> alert("script-html-outer"); </script>输出结果:script-head、script-body、script-body-outer、script-html-outer、html-tag
从上面输出结果可以明显看到:
js在页面装载时执行的顺序就是其引入标记<script />的出现顺序, <script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。只有全部js脚本按顺序加载完毕后才开始html标签内容的加载过程。
相关文章推荐
- 关于在jsp中java代码和js以及html代码的执行顺序
- 关于HTML页面中JS/JQ/Onload执行顺序测试代码
- 关于js在html中执行顺序的问题
- jsp中java代码、jsp代码、js代码执行的顺序
- 关于HTML/JSP文件中JS文件和CSS文件的导入顺序
- 关于js代码执行顺序
- jsp代码和js代码执行的顺序
- 关于Eclipse中JSP,JS,HTML等代码自动提示的设置
- jsp中java代码、jsp代码、js代码执行的顺序
- jsp中java代码、jsp代码、js代码执行的顺序
- jsp中java代码 jsp代码 js代码执行的顺序
- html文件中js代码执行顺序
- jsp中java代码、jsp代码、js代码执行的顺序
- 关于JavaScript的执行顺序,如果多个js中(a.js,b.js,c.js)都有一个方法(如test方法),那么如果再html中触发执行该test方法,是执行的那个js中的test方法(a.)?
- jsp中java代码、jsp代码、js代码执行的顺序
- jsp页面关于Java,js和html的加载顺序
- 关于分页 HTML 代码中的 Js 函数指定问题( 编号:20110705A0847 )
- js在html中的加载执行顺序
- .net 服务器事件和客户端js事件的执行顺序以及在脚本运行前定义脚本要修改的 HTML 元素
- 关于DataBind和页面代码执行顺序