夏日博客

A-A+

javascript异步返回数据代码介绍

2016年01月28日 前端设计 暂无评论 阅读 6 views 次

在日常的使用中，不可避免的在异步的返回数据中需要运行脚本，而将返回数据直接写入页面中的某个容器中，脚本是不会运行的,异步执行一般都要有个回调callback函数，给调用者增加一个callback函数，然后把obj作为参数传给这个callback.

例,代码如下:

  1. var a=(function(){  
  2. var obj=null;  
  3. return {  
  4. win:function(config) {             
  5.       if (config && typeof config == "object") {                
  6.           this.loadScriptFile(_TC.baseUrl,   
  7.              function() {                  
  8.   
  9.             obj= $.dialog(config);  
  10. a.bFn();  
  11.           });   
  12.       }  
  13.   },  
  14. bFn: fucntion(){  
  15. //..处理obj  
  16. }  
  17. };  
  18. })();  

下面举个例子，异步返回的数据：

  1. <div id="test">...</div>  
  2.    
  3. <script type="text/javascript">  
  4. alert('test');  
  5. </script>  
  6. <div id="test2">..</div>  
  7.    
  8. <script type="text/javascript">  
  9. alert('test2');  
  10. </script>  

异步操作的代码(以jquery代码为例)：

  1. $.get('test.php', function(data){  
  2.     $('#container').html(data);  
  3. })  

这样实现的话，异步中的数据会写入到container容器中，但两个script标签中的脚本不会运行，下面说一下解决方案：

1.将返回的数据以script标签分割开

2.将含有dom元素的文本分批加入到指定容器中，加入后将文本之间的脚本添加到header中运行(注:添加的过程中，各段需要延迟运行，因为脚本的运行需要时间，延迟的时间以脚本中时间最长的为准)

3.脚本运行完成后将添加到header中的脚本移出

以下为网上的一段实现代码:

  1. var global_html_pool = [];  
  2. var global_script_pool = [];  
  3. var global_script_src_pool = [];  
  4. var global_lock_pool = [];  
  5. var innerhtml_lock = null;  
  6. var document_buffer = "";  
  7.    
  8. function set_innerHTML(obj_id, html, time) {  
  9.  if (innerhtml_lock == null) {  
  10.   innerhtml_lock = obj_id;  
  11.  }  
  12.  else if (typeof(time) == "undefined") {  
  13.   global_lock_pool[obj_id + "_html"] = html;  
  14.   window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10);  
  15.   return;  
  16.  }  
  17.  else if (innerhtml_lock != obj_id) {  
  18.   global_lock_pool[obj_id + "_html"] = html;  
  19.   window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10);  
  20.   return;  
  21.  }  
  22.    
  23.  function get_script_id() {  
  24.   return "script_" + (new Date()).getTime().toString(36)  
  25.     + Math.floor(Math.random() * 100000000).toString(36);  
  26.  }  
  27.    
  28.  document_buffer = "";  
  29.    
  30.  document.write = function (str) {  
  31.   document_buffer += str;  
  32.  }  
  33.  document.writeln = function (str) {  
  34.   document_buffer += str + "n";  
  35.  }  
  36.    
  37.  global_html_pool = [];  
  38.    
  39.  var scripts = [];  
  40.  html = html.split(/</script>/i);  
  41.  for (var i = 0; i < html.length; i++) {  
  42.   global_html_pool[i] = html[i].replace(/<script[sS]*$/ig, "");  
  43.   scripts[i] = {text: '', src: '' };  
  44.   scripts[i].text = html[i].substr(global_html_pool[i].length);  
  45.   scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1);  
  46.   scripts[i].src = scripts[i].src.match(/srcs*=s*("([^"]*)"|'([^']*)'|([^s]*)▼)/i); 
  47.   if (scripts[i].src) { 
  48.    if (scripts[i].src[2]) { 
  49.     scripts[i].src = scripts[i].src[2]; 
  50.    } 
  51.    else if (scripts[i].src[3]) { 
  52.     scripts[i].src = scripts[i].src[3]; 
  53.    } 
  54.    else if (scripts[i].src[4]) { 
  55.     scripts[i].src = scripts[i].src[4]; 
  56.    } 
  57.    else { 
  58.     scripts[i].src = ""; 
  59.    } 
  60.    scripts[i].text = ""; 
  61.   } 
  62.   else { 
  63.    scripts[i].src = ""; 
  64.    scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1); 
  65.    scripts[i].text = scripts[i].text.replace(/^s*<!--s*/g, ""); 
  66.   } 
  67.  } 
  68.   
  69.  var s; 
  70.  if (typeof(time) == "undefined") { 
  71.   s = 0; 
  72.  } 
  73.  else { 
  74.   s = time; 
  75.  } 
  76.   
  77.  var script, add_script, remove_script; 
  78.  for (var i = 0; i < scripts.length; i++) { 
  79.   var add_html = "document_buffer += global_html_pool[" + i + "];n"; 
  80.   add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;n"; 
  81.   script = document.createElement("script"); 
  82.   if (scripts[i].src) { 
  83.    script.src = scripts[i].src; 
  84.    if (typeof(global_script_src_pool[script.src]) == "undefined") { 
  85.     global_script_src_pool[script.src] = true; 
  86.    } 
  87.   } 
  88.   else { 
  89.    script.text = scripts[i].text; 
  90.   } 
  91.   s += 500; 
  92.   script.defer = true; 
  93.   script.type =  "text/javascript"; 
  94.   script.id = get_script_id(); 
  95.   global_script_pool[script.id] = script; 
  96.   add_script = add_html; 
  97.   add_script += "document.getElementsByTagName('head').item(0).appendChild(global_script_pool['" + script.id + "']);n"; 
  98.   window.setTimeout(add_script, s); 
  99.   remove_script = "document.getElementsByTagName('head').item(0).removeChild(document.getElementById('" + script.id + "'));n"; 
  100.   remove_script += "delete global_script_pool['" + script.id + "'];n"; 
  101.   window.setTimeout(remove_script, s + 20000); 
  102.  } 
  103.   
  104.  var end_script = "if (document_buffer.match(/<\/script>/i)) {n"; 
  105.  end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");n"; 
  106.  end_script += "}n"; 
  107.  end_script += "else {n"; 
  108.  end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;n"; 
  109.  end_script += "innerhtml_lock = null;n"; 
  110.  end_script += "}";  
  111.  window.setTimeout(end_script, s);  
  112. }  
标签：

给我留言