温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
Rejoicing in hope, patient in tribulation.
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(1739)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_084',
blogTitle:'ajax和window.onload两种实现页面的加载状态',
blogAbstract:'ajax:\r\n\r\n\r\n\r\n\r\n\r\n\r\n&&& function ShowResut()//显示结果\r\n&&&& {\r\n&&&&&&&& if(xmlHttp.readyState == 1)//表示正在加载\r\n&&&&&&&& {\r\n&&&&&&&&&&&& document.getElementById(\"pgr\").innerHTML =\"正在加载....请稍等\";\r\n&&&&&&&&}\r\n&&&&&&&& if(xmlHttp.readyState == 4 && xmlHttp.status == 200)//请求处理完成',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:0,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'Rejoicing in hope, patient in tribulation.',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}请问：怎么样在ajax中异步调用页面并执行调用页里的JS - ITeye问答
众说周知 A页面使用AJAX的xmlHttp 异步调用另外一个页面B，
是把B页的前端代码（包括HTML,CSS,JS等）是以字符串的形式存储在data里
所以在A页面中显示的结果是HTML 但是JS等不体现也不执行
请问 怎么样才能使 A页面调用B页面的似乎 也执行其中的JS代码呢？
采纳的答案
依照ext的做法,先提取返回值中的js代码(包括&script src&和&script&&/script&2种),针对&script src="**"&&/script&的情况,用
var s = document.createElement('&script&');
s.setAttribute('type',"text/script");
s.setAttribute('src',"***");
var hd = document.getElementsByTagName('head')[0];
hd.appendChild(s);
来执行.
针对&script&script&/script&的情况,用
window.execScript(script);//script为&script&&/script&中包含的js代码.
或者用eval(script);来执行
来执行.
另附Ext源码:
update : function(html, loadScripts, callback){
if(typeof html == "undefined"){
html = "";
if(loadScripts !== true){
this.dom.innerHTML =
if(typeof callback == "function"){
callback();
var id = Ext.id();
var dom = this.
html += '&span id="' + id + '"&&/span&';
E.onAvailable(id, function(){
var hd = document.getElementsByTagName("head")[0];
var re = /(?:&script([^&]*)?&)((\n|\r|.)*?)(?:&\/script&)/
var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
var typeRe = /\stype=([\'\"])(.*?)\1/i;
while(match = re.exec(html)){
var attrs = match[1];
var srcMatch = attrs ? attrs.match(srcRe) :
if(srcMatch && srcMatch[2]){
var s = document.createElement("script");
s.src = srcMatch[2];
var typeMatch = attrs.match(typeRe);
if(typeMatch && typeMatch[2]){
s.type = typeMatch[2];
hd.appendChild(s);
}else if(match[2] && match[2].length & 0){
if(window.execScript) {
window.execScript(match[2]);
window.eval(match[2]);
var el = document.getElementById(id);
if(el){Ext.removeNode(el);}
if(typeof callback == "function"){
callback();
dom.innerHTML = html.replace(/(?:&script.*?&)((\n|\r|.)*?)(?:&\/script&)/ig, "");
A调用B的时候,是无法调用到B中的方法的,这点是不用怀疑的.
只能让B页面自动执行一些需要在调用的时候执行的函数,并且用一个标识判断该不该执行这些方法:
B.htm
window.onload=function(){
var strParam=location.search.substring(1);//获取传递过来的url参数.即?后面的字符串.
if(strParam=="true"){
//执行需要其它页面进行调用执行的JS代码.
在A.htm中发送数据的时候,以这种形式:xmlHttp.open("POST","B.htm?true",false);//传一个true到B.htm页面,告诉B页面执行部分代码.
xmlHttp.send();
已解决问题
未解决问题js中onload与onunload的使用示例
字体：[ ] 类型：转载 时间：
onload与onunload想必大家并不陌生吧，下面为大家演示下js中onload与onunload的妙用，感兴趣的朋友可以参考下，希望对大家有所帮助
引言： 今天周末没事，就想起前面自己做的一个B2C的电子商务平台，还有些一些地方没有完善，就想着完善，嗯，问题是这样的，在电子商务平台中有这样一个场景，我将购物车放置在Session中，使其在整个购物的过程中都能从Session中得到购物车模型，我在购物车某型中有的商品都会在数据库中减少其购物车中购买的数量，但是如果我关闭窗口，怎样让Session中的购物车模型中的商品数量添加到数据库中，于是我查找了GOOGLE、百度，得到的第一个提示，就是：关闭窗口自动清除Session，于是找到的第一个方法就是在&body&标签使用onunload属性，调用某个js如：&body onunload=”close()”&该方法是关闭窗口时触发close()事件，于是我就可以在close()方法中定义删除Session的方法…… 但是事实不是这样的，当你刷新这个页面，以及点击这个页面上的链接时onunload都会触发，于是我又在GOOGLE，百度中查找：得到的答案如下：
代码如下: &script& window.onunload = function(){if(self.screenTop&9000)alert('该窗口已经被关闭！')} &/script& 或 &script& window.onunload = function(){if(self.screenLeft&9000)alert(该窗口已经被关闭！.')} &/script&
说明： window.screenTop 获取浏览器客户区左上角相对于屏幕左上角的 y 坐标 screenTop&后面的数字必须大于你显示分辩率中的高度 比如，800*600, 这个数得大于600 window.screenLeft 获取浏览器客户区左上角相对于屏幕左上角的 x 坐标 screenLeft&后面的数字必须大于你显示分辩率中的宽度 比如，800*600, 这个数得大于800 通常这两个值设为9000 于是我使用上面的方法，实现了只有在关闭页面才触发onunload事件。 总结： ① 当使用onunload属性时，你可以使用Ajax来清除Session，也可以使用window.location.href来触发某个请求，比如我在这个用的是struts2我可以用&body onunload=”javascript:window.location.href-‘${pageContext.request.contextPath }/cart/closeWindow.action'” & 然后有closeWindow.action这个请求去处理Session中购物车的商品，让其数量添加到数据库中； ② 在此处我也有Ajax来处理请求，但是事实上我们只要处理Session，并不要处理完Session后有任何返回的异步信息，所以我还是使用的触发一个请求的方法，最终的写法如下：
代码如下: &body onunload="javascript:if(self.screenTop&9000) window.location.href='${pageContext.request.contextPath }/cart/closeWindow.action';"&
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JS异步加载的三种方式 - CSDN博客
JS异步加载的三种方式
一：同步加载
我们平时使用的最多的一种方式。
&script src=&/script.js&&&/script&
&script src=&/script.js&&&/script&
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把&script&标签放在&body&结尾处，这样尽可能减少页面阻塞。
二：异步加载
异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。
方法一：也叫Script DOM Element
(function(){
var scriptEle = document.createElement(&script&);
scriptEle.type = &text/javasctipt&;
scriptEle.async =
scriptEle.src = &/jquery/3.0.0-beta1/jquery.min.js&;
var x = document.getElementsByTagName(&head&)[0];
x.insertBefore(scriptEle, x.firstChild);
&async&属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(function(){;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async =
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + './ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。
方法二：onload时的异步加载
(function(){
if(window.attachEvent){
window.attachEvent(&load&, asyncLoad);
window.addEventListener(&load&, asyncLoad);
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async =
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + './ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。
方法三：其他方法
由于JavaScript的动态性，还有很多异步加载方法：
XHR Injection、 XHR Eval、
Script In Iframe、 Script defer属性、 document.write(script tag)。
XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
obj = new ActiveXObject(&Microsoft.XMLHTTP&);
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open(&GET&, &/jquery/3.0.0-beta1/jquery.min.js&, true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var script = document.createElement(&script&);
script.text = xmlHttp.responseT
document.getElementsByTagName(&head&)[0].appendChild(script);
XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
obj = new ActiveXObject(&Microsoft.XMLHTTP&);
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open(&GET&, &/jquery/3.0.0-beta1/jquery.min.js&, true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
$(&#btn1&).click(function(){
alert($(this).text());
Script In Irame：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。
var insertJS = function(){alert(2)};
var iframe = document.createElement(&iframe&);
document.body.appendChild(iframe);
var doc = iframe.contentWindow.//获取iframe中的window要用contentWindow属性。
doc.open();
doc.write(&&script&var insertJS = function(){};&\/script&&body onload='insertJS()'&&/body&&);
doc.close();
GMail Mobile：业内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。
&script type=&text/javascript&&
HTML5新属性：async和defer属性
defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。
&script type=&text/javascript& defer&&/script&
async属性：HTML5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。
&script type=&text/javascript& defer&&/script&
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer，这样IE 4之后的所有IE都支持异步加载。
没有async属性，script将立即获取（下载）并执行，期间阻塞了浏览器的后续处理。如果有async属性，那么script将被异步下载并执行，同时浏览器继续后续的处理。
总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。
三：延迟加载
有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。
JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。
解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者Object对象加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。
1：模拟较长的下载时间：
利用thread让其sleep一段时间在执行下载操作。
2：模拟较长的JS代码执行时间
var start = Number(new Date());
while(start + 5000 & Number(new Date())){//执行JS}
这段代码将使JS执行5秒才完成！
JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。
本文已收录于以下专栏：
相关文章推荐
Ext.Ajax.request({  
                url : urlStr...
一次事件的完整过程包括三步：捕获 执行目标元素的监听函数 冒泡
事件冒泡机制与委托机制，jQuery动态绑定
本文总结一下浏览器在 javascript 的加载方式。
关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execution），async ...
在介绍js异步加载之前，我们先来看看什么是js同步加载。我们平时最常使用的就是这种同步加载形式：
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停...
原文链接：http://handyxuefeng./blog/static//
  
本文总结一下浏览器在 javascri...
本文总结一下浏览器在 javascript 的加载方式。
关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execution），async ...
var JSLoader =function(){
var scripts = {}; // scripts['a.js'] = {loaded:false,funs:[]}function get...
JavaScript的优势之一是其如何处理异步代码。异步代码会被放入一个事件队列，等到所有其他代码执行后才进行，而不会阻塞线程。然而，对于初学者来说，书写异步代码可能会比较困难。而在这篇文章里，我将会...
看到一篇有趣的文章The Eight Levels of Programmers。以前似乎看过不少这种程序员的多少个级别、境界，但这篇语言很风趣，而且分类比较细化，让人觉得挺合情合理、无法反驳的。绝大...
有几天沒有更新博客了，主要是这几天项目遇到好多小问题，比如异步加载、输入特使字符、事件的执行顺序、还有最让人头疼的浏览器缓存问题。所以这几天一直在加班加点的调试、更改准备这个月的投产，终于昨天提交了系...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)下次自动登录
现在的位置:
& 综合 & 正文
关于body的onload调用ajax的一些看法
最近，看得一些开发人员在实现ajax的时候，aspx文件中在body的onload事件中，使用ajax调用后台的c#处理程序来对页面进行数据加载。然后在后台代码中，重写某个Control的Render方法，实现数据的绑定。我个人并不赞同这种方法。
首先，页面肯定会Load，那么就不需要先将页面发送到客户端，然后在客户端load的时候再次异步对服务器请求数据，这样做法很令人费解，就像一个人到某个地方去，本来一次就应该将要带的东西带上，但是却偏偏不带，等到了地方还，再派另一个回去将要带来的东西取来！这种做法，很不好(我是这样认为的)。
另外，在webform的cs文件中，重写Control的Render方法更是没有任何封装性。原本ajax就会破坏程序架构，如果这样做就变得更难扩展了。
&&&&推荐文章:
【上篇】【下篇】}