• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例10-8 使用线程传递JSON对象

实例10-8 使用线程传递JSON对象

1.功能描述

在新建的HTML页面中,页面在加载时创建一个Worker后台线程,该线程将返回给前台页面一个JSON对象,前台获取该JSON对象,使用遍历的方式显示对象中的全部内容。

2.实现代码

在DreamweaverCS5中新建一个HTML页面10-8.html,加入代码如代码清单10-8所示。

代码清单10-8 使用线程传递JSON对象

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>使用线程传递JSON对象</title>
	<link href="Css/csslO.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" language="jscript"
	        src="Js/js8.js"/>
	</script>
	</head>
	<body onLoad="pageload();">
	 <fieldset>
	   <legend>线程传递JSON对象</legend>
	   <p id=n"pStatus"></p>
	 </fieldset>
	</body>
	</html>

在代码清单10-8中,页面导入一个JavaScript文件js8.js,其中自定义一个函数pageload(),在页面加载时调用。其实现的代码如下所示:

	//JavaScript Document
	function $$(id){
	    return document.getElementByld(id);
	}
	var objWorker=new Worker("Js/js8_l.js");
	//自定义页面加载时调用的函数
	function pageload(){
	    objWorker.addEventListener('message',
	    function(event){
	        var strHTML="";
	        var ev=event.data;
	        for(var i in ev){
	           strHTML+="<span>"+i+":";
	           strHTML+="<b>"+ev[i]+"</b></span><br>";
	        }
	        $$("pStatus").style.display="block";
	        $$("pStatus").innerHTML=strHTML;
	    },
	    false);
	    objWorker.postMessage("");
	}

在代码清单10-8的JavaScript文件js8.js代码中,调用的后台线程脚本文件为js8_l.js,在该文件中通过postMessageO方法向前台发送JSON对象,其实现的代码如下所示:

	//JavaScript Document
	var json={
	   姓名:"陶国荣",
	   性别:"男",
	   邮箱:"tao_guo_rong@163.com"
	self.onmessage=function(event){
	   self.postMessage(json);
	   close();
	}

3.页面效果

该页面在Chrome10浏览器中执行的效果如图10-8所示。

图10-8 使用线程传递JSON对象

4.源码分析

在本实例中,当页面加载时触发onLoad事件,在该事件中调用pageload()函数。该函数首先定义一个后台线程对象objWorker,脚本文件指向js8_l.js,并通过调用对象的postMessage()方法向后台线程发送一个空字符请求。

在后台线程指向文件js8_l.js中,先自定义一个JSON对象json,当通过message事件监测前台页面请求后,调用self.postMessage()方法向前台代码传递JS0N对象,并使用dose语句关闭后台线程。前台为了在message事件中获取传递来的JSON对象内容,使用for语句的方式遍历整个JSON对象的内容,并显示在页面中。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101