我们在做网页开发时候,相信使用ajax请求对页面进行局部刷新的技术,大家应该都很熟悉了吧。
有时候我们需要动态的请求服务器,这时服务器如果发过一段带有
<script>
//there are some codes here.
</script>
这样的脚本,我们如何让他客户端生效呢?
好吧,我承认我是用的jquery,需且很实现起来很简单,很多人也都是用一些js库实现的吧。如果我需要写js的源码呢?昨天同事碰到了这个问题,我就去深入地了解了一下,结果收获了一些以前不太明确的,不知道的知识。
一开始不能使脚本生效的方法:
在服务器端请求得到了带有<script>code...<script>的html的片段,然后直接使用document.getElementById("target_div").innerHTML = responseText,很好,得到的html内容都进来了,而且页面显示也正确。可以在触发刚请求到<script></script>中功能的时候,发现这里的代码失效了,无论如何也执行不了。于是我就去找使script生效的方法。
后来,想到我看看jquery是怎么实现的不就行了吗?jqury的代码如下:
- // Evalulates a script in a global context
- globalEval: function( data ) {
- if ( data && /\S/.test(data) ) {
- // Inspired by code by Andrea Giammarchi
- // http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html
- var head = document.getElementsByTagName("head")[0] || document.documentElement,
- script = document.createElement("script");
-
- script.type = "text/javascript";
- if ( jQuery.support.scriptEval )
- script.appendChild( document.createTextNode( data ) );
- else
- script.text = data;
-
- // Use insertBefore instead of appendChild to circumvent an IE6 bug.
- // This arises when a base node is used (#2709).
- head.insertBefore( script, head.firstChild );
- head.removeChild( script );
- }
- }
这个函数就是实现动态加载执行script的关键,函数中的参数data指的就是<script>data</script>这里的data,函数代码很简单,意思就是在<head>这个节点中的第一个位置插入<script>data</script>,这时候data就会被浏览器执行。最后再把这个节点给删了。
刚看到这个代码的时候,我就想,难道把<script>data</script>插入到<head>的第一个位置就会生效吗?而我放到自已的target_div里就不会生效,一直就搞不明白这个问题。因为没有听过哪本书,或哪个资料上这么说过啊。笨笨的我想了一下午,晚上回家的时候突然想明白了,jquery这里的插入script,和我写的插入script是不一样的,jquery是先创建一个script节点(这里是关键),然后将插入到html页面中。再看看我的插入,是直接用的innerHTML进行赋值。然而这是为什么呢?大家应该知道script的执行顺序吧,script在html文档加载的时候会执行一次。这里区别就在于,虽然是ajax请求来的script,jquery的实现方法是属于文档加载,另一个却只是文本的插入。浏览器会区分出这两种方式,所以只有jquery的方法才是正确的。
那么我们还看到为什么非要插入到head的第一个元素位置呢,这里面应该有点学问吧,我还不知道这里有什么原因。希望哪位高手可以帮我解惑。
最后删掉这个结点,是因为我们已经把script代码插入到target_div了,为了不让我们觉得莫名其秒,所以从外表的html代码中是看不到任何端倪的。
如果你已经看到这段文字,我想你应该交学费了,哈哈。当然,我也学别人东西也不交学费的。这样就算了。不过欢迎大家一起讨论、交流,能有新的想法,新的问题。
(转载请注明出处:
[url=http://www.d9732.com]澳门博彩[/url])