javascript异步返回数据代码介绍
例
代码如下 | 复制代码 |
var a=(function(){ var obj=null; return { win:function(config) {
a.bFn(); }); }, bFn: fucntion(){ //..处理obj } }; })();
|
下面举个例子,异步返回的数据:
<div id="test">...</div>
<script type="text/javascript">
alert('test');
</script>
<div id="test2">..</div>
<script type="text/javascript">
alert('test2');
</script>
异步操作的代码(以jquery代码为例):
$.get('test.php', function(data){
$('#container').html(data);
})
这样实现的话,异步中的数据会写入到container容器中,但两个script标签中的脚本不会运行,下面说一下解决方案:
1. 将返回的数据以script标签分割开
2. 将含有dom元素的文本分批加入到指定容器中,加入后将文本之间的脚本添加到header中运行(注:添加的过程中,各段需要延迟运行,因为脚本的运行需要时间,延迟的时间以脚本中时间最长的为准)
3. 脚本运行完成后将添加到header中的脚本移出
以下为网上的一段实现代码:
代码如下 | 复制代码 |
var global_html_pool = []; var global_script_pool = []; var global_script_src_pool = []; var global_lock_pool = []; var innerhtml_lock = null; var document_buffer = ""; function set_innerHTML(obj_id, html, time) { if (innerhtml_lock == null) { innerhtml_lock = obj_id; } else if (typeof(time) == "undefined") { global_lock_pool[obj_id + "_html"] = html; window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10); return; } else if (innerhtml_lock != obj_id) { global_lock_pool[obj_id + "_html"] = html; window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10); return; } function get_script_id() { return "script_" + (new Date()).getTime().toString(36) + Math.floor(Math.random() * 100000000).toString(36); } document_buffer = ""; document.write = function (str) { document_buffer += str; } document.writeln = function (str) { document_buffer += str + "n"; } global_html_pool = []; var scripts = []; html = html.split(/</script>/i); for (var i = 0; i < html.length; i++) { global_html_pool[i] = html[i].replace(/<script[sS]*$/ig, ""); scripts[i] = {text: '', src: '' }; scripts[i].text = html[i].substr(global_html_pool[i].length); scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1); scripts[i].src = scripts[i].src.match(/srcs*=s*("([^"]*)"|'([^']*)'|([^s]*)[s>])/i); if (scripts[i].src) { if (scripts[i].src[2]) { scripts[i].src = scripts[i].src[2]; } else if (scripts[i].src[3]) { scripts[i].src = scripts[i].src[3]; } else if (scripts[i].src[4]) { scripts[i].src = scripts[i].src[4]; } else { scripts[i].src = ""; } scripts[i].text = ""; } else { scripts[i].src = ""; scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1); scripts[i].text = scripts[i].text.replace(/^s*<!--s*/g, ""); } } var s; if (typeof(time) == "undefined") { s = 0; } else { s = time; } var script, add_script, remove_script; for (var i = 0; i < scripts.length; i++) { var add_html = "document_buffer += global_html_pool[" + i + "];n"; add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;n"; script = document.createElement("script"); if (scripts[i].src) { script.src = scripts[i].src; if (typeof(global_script_src_pool[script.src]) == "undefined") { global_script_src_pool[script.src] = true; } } else { script.text = scripts[i].text; } s += 500; script.defer = true; script.type = "text/javascript"; script.id = get_script_id(); global_script_pool[script.id] = script; add_script = add_html; add_script += "document.getElementsByTagName('head').item(0).appendChild(global_script_pool['" + script.id + "']);n"; window.setTimeout(add_script, s); remove_script = "document.getElementsByTagName('head').item(0).removeChild(document.getElementById('" + script.id + "'));n"; remove_script += "delete global_script_pool['" + script.id + "'];n"; window.setTimeout(remove_script, s + 20000); } var end_script = "if (document_buffer.match(/<\/script>/i)) {n"; end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");n"; end_script += "}n"; end_script += "else {n"; end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;n"; end_script += "innerhtml_lock = null;n"; end_script += "}"; window.setTimeout(end_script, s); } |
补充:网页制作,js教程