BlogJava-xiaomage234-随笔分类-page

Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

小马歌 — Wed, 13 Apr 2016 05:47:00 GMT

小马歌 2016-04-13 13:47 发表评论

JQuery的Deferred对象详解

小马歌 — Fri, 23 Dec 2011 10:06:00 GMT

摘要: 作者：阮一峰日期： 2011年8月16日jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都... 阅读全文

小马歌 2011-12-23 18:06 发表评论

ymPrompt消息提示组件4.0版DEMO演示

小马歌 — Fri, 23 Dec 2011 06:37:00 GMT

from : http://www.rainweb.cn/JavaScript/message-alert/demo.html

ymPrompt消息提示组件4.0版DEMO演示

页面IFRAME:

页面文本:

页面文本1
页面文本2

页面Select选择框

更换皮肤： 修改默认配置：遮罩颜色：遮罩透明度:

组件调用方式1(传统参数传入方式)：
示例	调用方法
	ymPrompt.alert('http://www.qq.com',null,null,'确认要提交吗?',handler)
	ymPrompt.succeedInfo(document.getElementById('text').innerHTML,400,260,null,handler2)
	ymPrompt.errorInfo('操作失败！',null,null,null,handler)
	ymPrompt.confirmInfo('信息确认框功能测试',null,null,null,handler)
	ymPrompt.win(' 普通弹出窗口 ',300,200,'普通弹窗测试')
	ymPrompt.win('http://www.qq.com',500,300,'腾讯QQ官方网站',handler,null,null,true)

组件调用方式2(JSON方式)：
示例	源码
	ymPrompt.alert({message:'http://www.qq.com',title:'确认要提交吗?',handler:handler})
	ymPrompt.alert({message:'http://www.qq.com',title:'确认要提交吗?',handler:handler})
	ymPrompt.succeedInfo({message:' 当前版本号：'+ymPrompt.version+' 发布日期：'+ymPrompt.pubDate,width:400,height:260,handler:handler2})
	ymPrompt.errorInfo({message:'操作失败！',handler:handler})
	ymPrompt.confirmInfo({message:'信息确认框功能测试',handler:handler})
	ymPrompt.win({message:' 普通弹出窗口 ',width:300,height:200,title:'普通弹窗测试'})
	ymPrompt.win({message:'http://www.qq.com',width:500,height:300,title:'腾讯QQ官方网站',handler:handler,iframe:true})

其他使用方式演示：
示例	源码
	ymPrompt.alert()
	ymPrompt.alert('消息内容')
	ymPrompt.alert({title:'我的标题',message:'我的内容'})
	ymPrompt.alert({title:'fixPosition使用演示',message:'我会随滚动条一起滚动',fixPosition:true})
	ymPrompt.alert({title:'dragOut使用演示',message:'我不能拖出到窗口可见区域以外',dragOut:false})
	ymPrompt.alert({title:'autoClose使用演示',message:'程序控制关闭',autoClose:false,handler:autoClose})
	ymPrompt.win({message:' 无标题栏',handler:noTitlebar,btn:[['关闭我']],titleBar:false})
	ymPrompt.alert({message:'不显示遮罩',title:'不显示遮罩',showMask:false})
	ymPrompt.alert({message:'右下角弹出',title:'右下角弹出',winPos:'rb'})
	ymPrompt.alert({message:'自定义弹出位置',title:'右下角弹出',winPos:[200,1000]})
	ymPrompt.win({message:'自定义按钮',title:'自定义按钮测试',handler:testHd,btn:[['是','yes'],['否','no'],['取消','cancel']]})

组件方式及属性调用演示：
示例	源码
	ymPrompt.win(' 版本号：'+ymPrompt.version+' 发布日期：'+ymPrompt.pubDate+' 组件当前配置信息：'+json2str(ymPrompt.cfg)+' ',250,450)
	ymPrompt.win({message:'iframe.html',width:500,height:300,title:'getPage测试',handler:handlerIframe,iframe:true})
	ymPrompt.alert({message:'一秒钟后我的大小改为[400,300]',height:200,width:250}); setTimeout(function(){ymPrompt.resizeWin(400,300)},1000);
	ymPrompt.alert({message:'两秒钟后自动点击确定按钮',handler:handler});setTimeout(function(){ymPrompt.doHandler('ok')},1000);
	ymPrompt.alert({message:'悬浮右下角，模拟qq',fixPosition:true,winPos:'rb',showMask:false})
	ymPrompt.alert({message:'英文化成功',handler:en})
	ymPrompt.alert({message:'中文化成功',handler:cn})

小马歌 2011-12-23 14:37 发表评论

jQuery Dialog弹出层对话框插件演示

小马歌 — Fri, 23 Dec 2011 05:59:00 GMT

from: http://www.caixw.com/public/uploads/demo/jquery/dialog/

基本操作

默认的

new Dialog('这是一个默认对话框').show();

非模态对话框

new Dialog('非模态对话框，可以打开多个！',{modal:false}).show();

自动关闭

new Dialog('5秒后自动关闭',{time:5000}).show();

非fixed模式

new Dialog('对话框不随滚动条移动',{fixed:false}).show();

显示指定ID的内容

// 将显示本标签内的内容。
new Dialog({type:'id',value:'content-type-id'}).show();

加载一张图片

new Dialog({type:'img',value:'http://www.caixw.com/public/uploads/demo/images/300x125.gif'}).show();

加载一URL地址

new Dialog({type:'url',value:'http://www.caixw.com/public/uploads/demo/jquery/dialog/test.html'}).show();

加载一URL到iframe

new Dialog({type:'iframe',value:'http://www.caixw.com'}).show();

自定义CSS

自定义背景遮盖层

#dialog1-overlay
{
  background:blue;
  opacity:0.8;
  filter:alpha(opacity=80);
}

new Dialog('自定义背景遮盖层',{id:'dialog1'}).show();

自定义内容部分背景

#dialog2 .content
{
  width:250px;
  height:80px;
  background-image:url(http://www.caixw.com/public/uploads/demo/images/300x125.gif);
}

new Dialog('自定义内容部分背景',{id:'dialog2'}).show();

回调函数

show()函数

new Dialog('show()回调函数'
    {beforeShow:function(){alert('before show'),return true},afterShow:function(){alert('after show');}})
    .show();

hide()函数

dlg = new Dialog('hide()回调函数'
    {beforeHide:function(){alert('before hide'),return true},afterHide:function(){alert('after hide');}})
    .show();
dlg.hide();

close()函数

new Dialog('close()回调函数'
    {beforeClose:function(){alert('before close'),return true},afterClose:function(){alert('after close');}})
    .show();

小马歌 2011-12-23 13:59 发表评论

javascript表单提交【转】

小马歌 — Wed, 23 Nov 2011 11:32:00 GMT

总结得不错。

1、按钮为button，可在js中调用formName.submit()显性提交。若是submit按钮，则不能再这样加提交语句，否则会提交两次。

2、一个input域中回车，会默认第一个submit属性的按钮提交。若都是butoon属性，则回车不会提交表单。

3、有时提交表单后不能刷新页面，即没有action=""的情况，

（此时在handle()中进行处理后会返回一个false）或者或者。这样做了后能保证只执行js代码后，本页面不刷新，也不提交到另一个页面。

//一般提交
function del(myform)
{
myform.target="_blank" //也可以是_self,_top,_parent,默认为_self
myform.action="trade_delete.asp";
myform.submit();
}

//提交后对窗口的限制
function del(creator)
{
creator.target="preview";
creator.action="register_check.asp";
var win = window.open("about:blank","preview","toolbar=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=250,height=25,top=250,left=300");
win.focus();
creator.submit();
}

总结下这么几种的方法:

1,通过type=submit 或者图片的submti来提交(图片的这种方法很不错)

2,通过在imput里面加onclick来写个方法来做提交前的验证.type可以是button.,反正多个浏览器

做的时候,试验一下.

3,还有可以通过在form里面加onsubmit来验证.

4,通过在javascript的方法里头,用submit()方法来提交

具体得到这个form的方法有:

oForm = document.getElementById("form1");

oForm = document.forms("form1");

oForm = document.forms[0];

//通过上面的几种可以得到form

oForm.submit();

xml 代码

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
function dosubmit() {
alert("heihei");
}
script>
javascript测试head>
form>
body>
html>

可以在函数里面做出验证.

这个要用onclick 来触发事件,onchange,试了下不行其他不行.

这里是用按钮.这里type用了submit

xml 代码

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
function dosubmit() {
document.forms[0].submit();
alert("^_^提交成功！");
}
script>
javascript测试head>
form>
body>
html>

这里type用button,用document.forms[0].submit()来提交.

xml 代码

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
function dosubmit() {
//document.forms[0].submit();
alert("1111提交成功！");
}
script>
javascript测试head>
z
form>
body>
html>
onSubmit="return actionCheck();">

新闻类型编号

新闻类型名称

新闻存放目录名称

使用模版名称

小马歌 2011-11-23 19:32 发表评论

ibm文档中心，很好的教程

小马歌 — Sat, 19 Nov 2011 04:58:00 GMT

http://www.ibm.com/developerworks/cn/

小马歌 2011-11-19 12:58 发表评论

什么是Mashup

小马歌 — Sat, 19 Nov 2011 04:41:00 GMT

简介

　　一般使用源应用的API接口，或者是一些rss输出（含atom）作为内容源，合并的web应用用什么技术，则没有什么限制。mashup在geek群体和互联网玩家之中获得了极大的欢迎，mashup未必需要很高的编程技能，只需要熟悉api和网络服务工作方式，都能进行开发，所以很快成为一个流行的网络现象。很多公司例如yahoo/google都为此提供开放接口，以吸引这个群体。

　　Mashup 是一个非常cool的新的应用程序种类。如果你想真正的了解它们，我们需要回过头来看看你现在的计算机，其实它就是一个非常好的帮助你理解Mashup的模型。计算机运行着操作系统，例如Windows。现在开源的操作系统无疑是一个非常好的APIs 的集合或者一个应用程序编程接口，帮助开发者去构建他们的应用程序。计算机本身也是一个很好的为用户提供接口的例子，键盘和鼠标可以被理解为你通过计算机的接口而使用的不同的应用程序。

Mashup

一个API可能是帮助电脑接入网络又或者用来提供显示功能。总之，这些APIs 帮助开发者更加容易的去构建他们的应用程序。在过去开发者需要描绘每一个点显示的位置，而现在仅仅需要给出对称坐标，就可以完成一个窗口的绘制。

　　APIs做的事情是这样的。假如你访问文件系统，那么你所需得到APIs，这是计算机工作的途径。然后你就可以在一个窗口里运行一个应用程序。人们开发一个应用程序通常需要3或4个不同的APIs,或许更多。

编辑本段运行方式

　　这是一个计算机传统的运行方式。现在，我们将Windows，操作系统替换成网络。那么同样的，就会有许多公司来提供哪些APIs。比如yahoo,google.例如一个叫EVDB的公司，它是一个事件日历的数据库，可以提醒你什么时间到哪里做什么事情。也包括像 Amazon 和 eBay，又比如Technorati ，所有这些不同的公司把APIs放到网上使开发者可以访问。

　　现在假如你是一个Web开发者，你通过一个API 找到你附近哪些地方会有犯罪。然后你访问Google 地图API，把这两个内容整合在一起，那么你就得到了一个标有犯罪纪录的地图。这个新的地图就叫Mashup。因为开发者通过来自多个网站的APIs，把他们合并在一起，成为了一个新的很cool的应用程序。

编辑本段目前

　　越来越多的APIs被开放，这是一个比较明确的方向，每天都会有大概2.5个Mashup产生，预计到2007年每天Mashup的产生数量会增加到10个。

　　之所以，一天会有10个Mashup产生是因为，开发将会变得越来越容易，你不用再必须变成一个C语言程序员去展示你的创造力，你可以开发很Cool的应用，例如哪里有停车空位的地图，就像在California得Bay 地区的 ParkingCarma 所做的那样。又或者你开发一个地图标记出你的邻居和你想去会见某人，这其实也已经是一个事实存在的应用了，FrozenBear公司正在做这方面的开发。

　　我们展示这些Mashup的同时，又有新的APIs随时发布到网上，这就形成了一个生态系统，而且这个生态系统比目前现存的所有生态系统都会增长的更快。Windows，你必须成为一个程序员才可以开发应用程序，Linux，Macintosh也同样是如此，但是Mashup却不必，它将会是今天增长速度最快的一个生态体统。

编辑本段发展

Windows

Mashup 不仅仅是发展的很快，更好的一个地方是你不再需通过某人才可以发布一个新API到网上。以前你必须要通过微软才可以发布一个新的API加入到Windows，这种情况同样出现在Macintosh。另，尽管你也许可以添加一个API直接到Linux，因为它是开源的，但是这对大多开发者来说并不具备这样的权利。

　　另外，你在发布了一个API到网上之后，不需要再通过谁去批准它，它会自动对所有开发者有效。所有的不同的APIs都会成为更多Mashup的燃料。

　　越来越多的Mashup出现在网上，越来越多的网络用户去使用这些新的Mashup应用程序。越来越多的开发者加入到开发Mashup这个生态系统当中。在未来两年，你将可以听到关于Mashup的信息。

编辑本段典型应用

地图 Mashup

　　在这个阶段的信息技术中，人们搜集大量有关事物和行为的数据，二者都常常具有位置注释信息。所有这些包含位置数据的不同数据集均可利用地图通过令人惊奇的图形化方式呈现出来。mashup 蓬勃发展的一种主要动力就是 Google 公开了自己的 Google Maps API。这仿佛打开了一道大门，让 Web 开发人员(包括爱好者、修补程序开发人员和其他一些人)可以在地图中包含所有类型的数据(从原子弹灾难到波士顿的 CowParade 奶牛都可以)。为了不落于人后，Microsoft(Virtual Earth)、Yahoo(Yahoo Maps)和 AOL(MapQuest)也很快相继公开了自己的 API。

视频和图象 Mashup

　　图像主机和社交网络站点(例如 Flickr 使用自己的 API 来共享图像)的兴起导致出现了很多有趣的 mashup。由于内容提供者拥有与其保存的图像相关的元数据(例如谁拍的照片，照片的内容是什么，在何时何地拍摄的等等)，mashup 的设计者可以将这些照片和其他与元数据相关的信息放到一起。例如，mashup 可以对歌曲或诗词进行分析，从而将相关照片拼接在一起，或者基于相同的照片元数据(标题、时间戳或其他元数据)显示社交网络图。另外一个例子可能以一个 Web 站点(例如 CNN 之类的新闻站点)作为输入，并在新闻中通过照片匹配而将照片中的内容以文字的形式呈现出来。

搜索和购物 Mashup

　　搜索和购物 mashup 在 mashup 这个术语出现之前就已经存在很长时间了。在 Web API 出现之前，有相当多的购物工具，例如 BizRate、PriceGrabber、MySimon 和 Google 的 Froogle，都使用了 B2B 技术或屏幕抓取的方式来累计相关的价格数据。为了促进 mashup 和其他有趣的 Web 应用程序的发展，诸如 eBay 和 Amazon 之类的消费网站已经为通过编程访问自己的内容而发布了自己的 API。

新闻 Mashup

　　新闻源(例如纽约时报、BBC 或路透社)已从 2002 年起使用 RSS 和 Atom 之类的联合技术来发布各个主题的新闻提要。以联合技术为基础的 mashup 可以聚集一名用户的提要，并将其通过 Web 呈现出来，创建个性化的报纸，从而满足读者独特的兴趣。

微博 Mashup

　　将多个微博在一个平台上进行聚合显示，在一个平台上可以同时绑定多个微博(腾讯微博、新浪微博、搜狐微博、网易微博、人人网、豆瓣、饭否、嘀咕、Follow5、天涯微博、人间网、做啥、9911、同学网、开心网等)，从而满足用户同步多个平台的要求，提供了微博信息汇总表，让用户方便查看自己所有平台的粉丝，关注和微博数，轻松实现在不同微博间自由切换。并且提供多微博评论列表读取，跨平台分享，聚合收藏等功能。使用户可在同一屏幕中同步收发信息，实现了真正意义上的社交网站双向聚合。类似网站功能的有玛撒网，微博通等。

扩展阅读：

1
http://dotnet.csdn.net/n/20060316/88236.html
2
http://www.robotbb.com
3
IBM Developworks上有更详细的资料：http://www.ibm.com/developerworks/cn/xml/x-mashups.html

小马歌 2011-11-19 12:41 发表评论

使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup【转】

小马歌 — Sat, 19 Nov 2011 04:40:00 GMT

由 yangyi 于 2009-05-31 22:28:36 提供

2009 年 5 月 25 日

随着公开提供的 Web 服务 API 不断增加，现在可以轻松地从不同 Web 源获取资源并构建 mashup —— 只要您能访问正确的 API 和工具。探究如何能够结合高深的跨域调用技术（JSONP）和灵活的 JavaScript 库（jQuery），以快速构建强大的 mashup。

简介

Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。

不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？

理解同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域，并且使用 GET 请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

JSON 和 JSONP

JSON 是用于在浏览器和服务器之间交换信息的轻量级数据格式（与 XML 相比）。JOSON 依赖于 JavaScript 开发人员，因为它是 JavaScript 对象的字符串表示。例如，假设有一个含两个属性的 ticker 对象：symbol 和 price。这是在 JavaScript 中定义 ticker 对象的方式：

var ticker = {symbol: 'IBM', price: 91.42};

并且这是它的 JSON 表示方式：

{symbol: 'IBM', price: 91.42}

从参考资料查找更多有关 JSON 和将其作为数据内部交换格式的信息。清单 1 定义了一个 JavaScript 函数，调用该函数时会显示 IBM 的股价。（我们没有详细介绍如何将该函数添加到 Web 页面）。

清单 1. 定义 showPrice 函数

function showPrice(data) {     alert("Symbol: " + data.symbol + ", Price: " + data.price); }

可以将 JSON 数据作为参数传递，以调用该函数：

showPrice({symbol: 'IBM', price: 91.42}); // alerts: Symbol: IBM, Price: 91.42

现在准备将这两个步骤包含到 Web 页面，如清单 2 所示。

清单 2. 在 Web 页面中包含 showPrice 函数和参数

加载页面后，应该看如图 1 所示的警告。

图 1. IBM ticker

至此，本文已展示了如何将静态 JSON 数据作为参数调用 JavaScript 函数。不过，通过在函数调用中动态包装 JSON 数据可以用动态数据调用函数，这是一种动态 JavaScript 插入的技术。要查看其效果，将下面一行放入名为 ticker.js 的独立 JavaScript 文件中。

showPrice({symbol: 'IBM', price: 91.42});

现在改变 Web 页面中的脚本，使其和清单 3 一样。

清单 3. 动态 JavaScript 插入代码

在清单 3 所示的例子中，动态插入的 JavaScript 代码位于 ticker.js 文件中，它将真正的 JSON 数据作为参数调用showPrice()函数。

前面已经提到，同源策略不阻止将动态脚本元素插入文档中。也就是说，可以动态插入来自不同域的 JavaScript，并且这些域都携带 JSON 数据。这其实是真正的 JSONP（JSON with Padding）：打包在函数调用中的 JSON 数据。注意，为了完成该操作，Web 页面必须在插入时具有已经定义好的回调函数，也就是我们例子中的 showPrice()。

不过，所谓的 JSONP 服务（或 Remote JSON Service）是一种带有附加功能的 Web 服务，该功能支持在特定于用户的函数调用中打包返回的 JSON 数据。这种方法依赖于接受回调函数名作为请求参数的远程服务。然后该服务生成对该函数的调用，将 JSON 数据作为参数传递，在到达客户端时将其插入 Web 页面并开始执行。

回页首

jQuery 的 JSONP 支持

从 1.2 版本开始，jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调，就可以加载位于另一个域的 JSON 数据，回调的语法为：url?callback=?。

jQuery 自动将 ? 替换为要调用的生成函数名。清单 4 显示了该代码。

清单 4. 使用 JSONP 回调

jQuery.getJSON(url+"&callback=?", function(data) {     alert("Symbol: " + data.symbol + ", Price: " + data.price); });

为此，jQuery 将一个全局函数附加到插入脚本时需要调用的窗口对象。另外，jQuery 也能优化非跨域调用。如果向同一个域发出请求，jQuery 就将其转化为普通 Ajax 请求。

使用 JSONP 支持的示例服务

在上一个例子中，使用了静态文件（ticker.js）将 JavaScript 动态插入到 Web 页面中。尽管返回了 JSONP 回复，但它不允许您在 URL 中定义回调函数名。这不是 JSONP 服务。因此，如何才能将其转换为真正的 JSONP 服务呢？可使用的方法很多。这里我们将分别使用 PHP 和 Java 展示两个示例。

首先，假设您的服务在所请求的 URL 中接受了一个名为 callback 的参数。（参数名不重要，但是客户和服务器必须都同意该名称）。另外假设向服务发送的请求是这样的：

http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=showPrice

在这种情况下，symbol 是表示请求 ticker symbol 的请求参数，而 callback 是 Web 应用程序的回调函数的名称。使用清单 5 所示的代码可以通过 jQuery 的 JSONP 支持调用该服务。

清单 5. 调用回调服务

jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?",  function(data) {     alert("Symbol: " + data.symbol + ", Price: " + data.price); });

注意，我们使用 ? 作为回调函数名，而非真实的函数名。因为 jQuery 会用生成的函数名替换 ?。所以您不用定义类似于showPrice() 的函数。

清单 6 显示了用 PHP 实现的 JSONP 服务的一段代码。

清单 6. 用 PHP 实现的 JSONP 服务的代码片段

$jsonData = getDataAsJson($_GET['symbol']); echo $_GET['callback'] . '(' . $jsonData . ');'; // prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});

清单 7 显示了具有同样功能的 Java™ Servlet 方法。

清单 7. 用 Java servlet 实现的 JSONP 服务

@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp)    throws ServletException, IOException { 	String jsonData = getDataAsJson(req.getParameter("symbol")); 	String output = req.getParameter("callback") + "(" + jsonData + ");";  	resp.setContentType("text/javascript");            	PrintWriter out = resp.getWriter(); 	out.println(output); 	// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"}); }

那么，如果要构建 mashup 应该怎么办，是从第三方服务器收集内容，并在单一的 Web 页面中显示它们吗？答案很简单：您必须使用第三方 JSONP 服务。这种服务并不少。

现成的 JSONP 服务

知道如何使用 JSONP 之后，可以开始使用一些现成的 JSONP Web 服务来构建应用程序和 mashup。下面为接下来的开发项目做准备。（提示：您可以复制特定的 URL 并将其粘贴到浏览器的地址栏，以检查生成的 JSONP 响应）。

Digg API：来自 Digg 的头条新闻：

http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript &callback=?

Geonames API：邮编的位置信息：

http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr API：来自 Flickr 的最新猫图片：

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any &format=json&jsoncallback=?

Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：

http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza &zip=10504&results=2&output=json&callback=?

回页首

重要提示

JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。（参见参考资料了解更多信息）。

回页首

结束语

在该系列的第一篇文章中，我们讲解了如何结合使用 JSONP 和 jQuery 快速构建强大的 mashup。主要主题包括：

浏览器同源策略的限制以及解决办法
作为一种有效的跨域通信技术，JSONP 能够绕过当前浏览器的同源策略限制
JSONP 使 Web 应用程序开发人员能够快速构建 mashup
示例 JSONP 服务及其使用：Ticker 服务

本系列的下一篇文章将介绍 Yahoo! 查询语言（YQL），这种单端点 JSONP 服务允许您跨 Web 查询、过滤和合并数据。最后还使用 YQL 和 jQuery 构建 mashup 应用程序。

参考资料

了解 JSON，它是针对 Java 和其他语言的 JavaScript Object Notation API。
阅读 “掌握 Ajax，第 10 部分: 使用 JSON 进行数据传输”，并了解在 Ajax 应用程序中使用 JSON 作为数据交换格式。
通过包含三部分的系列文章 “使用 jQuery”了解 jQuery。
Browser Security Handbook 提供关于同源策略的详细描述。
“征服 Ajax 应用程序的安全威胁”为确保 mashup 应用程序的安全提供技巧和最佳实践。
“打造安全 Ajax mashup 的未来”讲解了如何为混合 Web 应用程序改进浏览器。
浏览技术书店，阅读有关这些主题和其他技术主题的图书。

小马歌 2011-11-19 12:40 发表评论

代码分享 5个有趣的 JavaScript 片段

小马歌 — Wed, 03 Aug 2011 04:04:00 GMT

摘要: 很多人认为编程语言只是用于工作，没有什么乐趣，其实，只要我们发挥奇思妙想，再死板的东西也有有趣的一面。这篇文章告诉大家：使用JavaScript，可以做很多很多有趣的事情。以下代码拷贝到地址栏回车即可运行，赶紧试试吧。　　1. 网页射击游戏　　这个游戏可以在任何网页里面玩，把下面代码粘贴到地址栏回车，按空格键进行射击，W键可前进，A、D键或者方向键可改变射击方向。javascript:var%20... 阅读全文

小马歌 2011-08-03 12:04 发表评论

PHP十年前灭掉Perl，如今也将面临危机

小马歌 — Mon, 25 Jul 2011 08:33:00 GMT

本文来源于国外一位博友的文章，他在博客中写道：“是到了PHP落幕的时候了。就在我这个顽固的PHP分子正要把一个现有的Ruby on Rails代码库转换成PHP时，我要说这样的话”。

历史在重演

作者认为PHP将亡，因为我以前见到过。大概十年之前，PHP灭掉了Perl。当然了，并不十分彻底；它还坚守在某些环境里，它还有相当可观数量的顽固粉丝，遗留下来的应用程序也需要维护，持续几十年。但这种语言对于新一代的人，特别是 web开发者，它在1999年就开始灭亡了，到2005年左右几乎完全死了。

作为在那个时期出现的新的web开发者，事情显的很明白而且水到渠成：Perl已经不适应新的应用开发环境了。在Perl里，页面需要冗长的公式化的CGI方式实现，而这些在PHP里却可以用基本的、缺省的编程方式实现。Perl语言里到处都是旧时代的特征 — 引用，不方便的数据结构，还有其他许多的小的古怪语法语义 —— 这使得web开发冗长，不稳定，不方便。无怪乎没有一个出色的web应用是用Perl写成的，而用PHP你却能做的又快又简单，尽管PHP存在着在当时就显而易见的缺陷。

在1999年支持Perl反对PHP的争论有很多：Perl要快的多，有更多的程序库和驱动支持，CPAN是个神奇的地方，里面预先写好的代码能让你绝大部分任务省去80%的工作量。现在看起来这些就有点可笑了，但“PHP缺乏可扩展性”却是个真正的缺点。但总之PHP赢了，因为上面所说的这些问题并不是这种语言固有的。PHP解释器可以变得更快，程序库可以被开发出来，PERA和PECL目前已经变得相当庞大，这还不包括各种厂商希望人们去使用他们的API而提供的非正式的程序库。

时间在推移

十年之后，我可以感觉到历史大潮正在重演。开发人员对语言的期望在前进。如果说 Perl最缺乏的是PHP里令人惊讶的灵活的“关联数组”(也就是智能哈希表)，那么PHP现在缺乏的就是lambdas和方法链(method chaining)了。同时PHP往往是用在只要20行代码就能写出一个网页的地方，而如今却是如果你不使用什么MVC框架之类的东西就会被认为没有把事情做对。公式化的代码表明了问题所在：这种语言需要一个框架来替人们做这些事情。

退回到以前，我认为那些顽固的使用Perl来做web开发的人很傻。现在，经历了十年的PHP开发，我处在相同的位置上了。我可以在一个小时里用 PHP敲出一个不错的网站，在一两天里开发出一个优秀的网站。PHP的性能众人皆知，我可以无限的扩展它。我雇佣过的每个开发人员都会它，我集成过的每个系统里都有一个用它写出的打包的代码库。我深陷于PHP的方便性，尽管它对于我的任务并不是一个合适的语言。

转向Ruby on Rails

最明显有潜在能力继任PHP的是Ruby on Rails。Ruby是一个新的、干净的语言，具有现代的语言特征，松散、优雅的语法(很像Python)。Rails省去了我们常见的任务，省去了集成 web应用里的公式化的做法，把PHP里三、四行的习惯写法变成了first-class语言结构。这看起来极其像我需要的PHP替代品、能让开发工作再一次提速的东西。

我每天使用Rails，修改一个喜爱这种框架和语言的有经验的Rails专家所写的Rails应用，七个月后，我却不能断言Rails是一个正确的选择了，原因很难表达。我这篇文章的目的就是想试图把原因说清楚。

我的主要的抱怨，必须要提的，就是性能。我之前就说过这种问题不应该被当作一种语言的致命缺陷，它只是语言实现中的暂时的问题。所以我不能把这当作一个真正的问题，尽管它是我把现在的应用移植到PHP的最主要的一个原因。我可以让Rails跑的跟PHP一样快，但那需要提供2到4倍高的硬件条件。我估计五年内将还会这样，五年后我也许不必把程序移植到PHP。但现在，它不能满足我的要求。

第二，我讨厌Active Record。Active Record是一种模式，并不是Ruby固有的，在Rails的最新版本里是可选择的，但是对它的使用和这种模式已经深入到了Rails的DNA里了。我之前曾解释过为什么我认为这数据库上的ORM不是个好做法，所以我不会再重复解释,但有一点我需要总结的就是你省去了手工写CRUD所获得的效能要大于 ActiveRecord做傻事所损失的效能，要花时间搞清楚它是怎么工作的，顺应框架原则，防止它做这样的事情。

第三，我十分的不信任代码自动生成。工具能帮你生成模板式的代码很有用，但你的程序了却多出了成堆的毫无用处的代码来实现这些目的，这就变的不好了。代码生成喜欢“神奇推理”，因为生成器并不确定代码某些特别有用的特征究竟是专门写出的还是语言环境固有自带的。神奇推理是危险的。

代码生成让我想到了Ruby on Rails的一个可能是最根本的问题，就是它并不是一种语言。Ruby是一种语言。但Ruby，它在解决了PHP上的一些基本问题外，并没有解决核心问题，那就是现代web应用需要一系列的改进：像routing,model/view分类，drop-in功能性等都是很常见的特征。Rails里有，但这跟PHP里的Zend，Symfony 和 Code Igniter之类的MVC框架一样只是绑上去的绷带。

那么缺的是什么?

能够取代PHP的语言必须十分优秀于PHP，就如同PHP优秀于Perl一样。它必须承担起web应用的主要实现任务，就像PHP那样，你的代码的主要功能就是输出网页 —— 一个有点激进的要求，它要不适合去做其它的事情，例如当中shell脚本语言。我希望有这样一种语言，它能够承担起我开发一个MVC式的web应用时的所有的任务，所有功能都是核心内置的，不能仅是一个程序包。

问题是，没有这样的一种语言。有一段时间服务器端JavaScript看起来将会成为下一个重要的语言，它能统一web应用前端和后端的编程语言。但是这些JavaScript上的伟大思想总是徘徊在一些跑题的行为上，比如 nodejs：事件驱动模式非常的激进和强大，能让你开发出高性能的应用程序，最大化的使用新式硬件，但这是一种开发服务器端应用程序的思路，不是web 页面。并且你仍然需要去写一大堆可怕的web页面。另外一些CommonJS的成果例如ejScript开始尝试着取代PHP，但仍没有解决框架问题。

仍在等待

我不得不做出结论，PHP的替代者还不存在。Ruby on Rails很好，但并不比一个PHP之上的类似的MVC框架强多少，更别提由于Ruby自身的效率不高和ActiveRecord的ORM恶搞带来的双重打击。Python看起来并不感兴趣于作为下一代的web语言，JavaScript的服务器端解决方案还刚刚只是个开始。

我等待下一个大目标的出现。我希望能从PHP上转走，真的。我可不想成为Perl式的古董。但不管怎样，这种语言看起来还不存在。我判断错了吗？

小马歌 2011-07-25 16:33 发表评论

AJAX（XMLHttpRequest）进行跨域请求方法详解

小马歌 — Mon, 25 Jul 2011 08:22:00 GMT

摘要: 注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。... 阅读全文

小马歌 2011-07-25 16:22 发表评论

HTML Adobe AIR HelloWorld项目

小马歌 — Fri, 22 Jul 2011 08:39:00 GMT

这里我们通过一个简单的HelloWorld项目演示Air项目的开发过程，本文演示的是在Windows操作系统下，使用HTML技术来开发Air应用的过程，在不同操作系统下，使用不同的开发技术（比如：flash/flex）开发过程可能会略有不同。

建立开发环境

一个完整的Air开发环境需要安装AirRuntime、AirSDK、JavaRuntime，总体来说安装与配置过程还是比较简单的。其中AirRuntime、JavaRuntime的安装非常简单，我们只需要下载，并执行下载文件安装即可，和安装一个普通的应用程序没什么两样，下载地址：

AirRuntime：http://get.adobe.com/cn/air/

JavaRuntime：http://www.java.com/zh_CN/

需要说一下的是AirSDK的安装，首先我们要下载它：http://www.adobe.com/products/air/tools/sdk/

下载后我们会得到一个AdobeAIRSDK.zip文件，您可以将它解压到任何一个目录下，例如解压到“D:/AirSDK/”。解压后只需要在path环境变量中加入“D:/AirSDK/bin”。这样，我们的开发环境就搭建好了，下面让我们来开发应用程序吧。

编写应用程序

每一个Air应用都需要一个应用程序配置文件（以下称为：项目描述文件），这个文件使用XML格式，用于配置项目相关的信息，比如程序入口，初始窗体的一些设置等。Air运行时框架也是通过此文件才能得知应用程序的入口信息。

在这个程序配置文件中我们可以指定应用程序入口HTML文件，这样，我们就可以通过这个HTML文件来开启Air应用之旅。下面我们将制作一个Air应用，整个应用由“application.xml”、“HelloWorld.html”两个文件组成。我们先来看看项目描述文件。

创建项目描述文件

我们先来建立一个目录来存放Air应用的文件，比如：“D:/airApps/HelloWorld”。在HelloWorld建立一个application.xml文件，其内容如下：

com.keda.examples.HelloAir

0.1

HelloAir

HelloWorld.html

true

400

200

简单解释一下：

1. 元素，包括 AIR 命名空间属性：

该命名空间的最后一部分“1.5” 指定了应用程序所需的运行时版

本。

2. 元素：

examples.html.HelloWorld 应用程序 ID 与发布者 ID （AIR 从对应用程序包进行签名时使用的证书中获取）一起

可以标识唯一的应用程序。建议采用的形式为以点分隔的反向 DNS 样式的字符串，如 "com.company.AppName"。应用程

序 ID 可用于安装、访问专用应用程序文件系统存储目录、访问专用加密存储以及应用程序间的通信。

3. 元素：

0.1 可帮助用户确定安装哪个版本的应用程序。

4. 元素：

HelloWorld 用于操作系统中应用程序可执行文件、安装目录和对应用程序的其它引用的名称。

5. 包含下列子元素的 元素，为初始应用程序窗口指定属性：

HelloWorld.html 标识 AIR 要加载的根 HTML 文件。

true 使窗口立即可见。

400 设置窗口宽度（以像素为单位）。

200 设置窗口高度。

创建入口HTML页面

新建“HelloWorld.html”内容如下：

Hello World

HTML很简单，这里不多说了。到这里我们的Air应用就编写完成了，下面让我们调试运行一下。

调试运行Air应用

在Dos命令行下进入“D:/airApps/HelloWorld”，然后使用adl命令进行高度。命令如下：

adl application.xml

看看运行结果：

打包和分发

在Air应用打包之前需要Air的证书，Air证书有两种，一种是Air颁发的，另一种是自签名证书，这种证书我们可以直接通过命令行生成并使用，自签名证书打包的应用在安装时不会显示机构名称，如下图所示：

但作为学习自签名证书还是比较适用的，下面简介一下自签名证书的生成。

生成证书

命令格式说明：adt -certificate -cn name [-ou org_unit][-o org_name][-c country] key_type pfx_file password

-cn name 分配的作为新证书公共名称的字符串。

-ou org_unit 分配的作为证书颁发组织单位的字符串。（可选。）

-o org_name 被分配作为证书颁发组织的字符串。（可选。）

-c country 双字母 ISO-3166 国家/ 地区代码。如果提供的代码无效，则不会生成证书。（可选。）

key_type 用于证书的密钥类型，即“1024-RSA” 或“2048-RSA”。

pfx_file 证书文件的生成路径。

password 新证书的密码。当使用此证书对 AIR 文件签名时需要提供密码。

例如本程序证书使用以下命令生成：

adt -certificate -cn HelloWorld -ou it.kedacom.com -o KEDACOM 2048-RSA HelloWorld.p12 kedacom

打包分发

证书生成之后我们就可以进行打包了，

adt –package -tsa none -storetype pkcs12 -keystore HelloWorld.p12 HelloWorld.air application.xml HelloWorld.html

系统将提示您输入生成证书时的密码：kedacom。

HelloWorld.air 参数表示 ADT 生成的 AIR 文件。HelloWorld-app.xml 表示应用程序描述符文件。后面的参数表示应

用程序所使用的文件。此示例仅使用了两个文件，但可以包含任意数量的文件和目录。

至此，我们的应用就已经完成了，您可以通过双击生成的.air安装包来安装我们的应用。

用命令行工具进行打包还是比较繁琐的，推荐使用Aptana Studio来开发Air应用，项目创建、证书的生成、打包都有图形化工具可以使用。

Aptana Studio下载地址：http://www.aptana.org/studio/download

小马歌 2011-07-22 16:39 发表评论

gmail 邮件中css无效style无效background image背景图片无效不显示的解决办法[转]

小马歌 — Wed, 13 Jul 2011 06:14:00 GMT

gmail 邮件中css无效style无效background image背景图片无效不显示的解决办法

几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯
文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面，是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的，能正常显示的HTML邮件。

gmail会自动过滤掉 head里的

新闻类型编号
新闻类型名称
新闻存放目录名称
使用模版名称

BlogJava-xiaomage234-随笔分类-page

Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

JQuery的Deferred对象详解

ymPrompt消息提示组件4.0版DEMO演示

ymPrompt消息提示组件4.0版DEMO演示

页面IFRAME:

页面文本:

页面Select选择框

jQuery Dialog弹出层对话框插件演示

from: http://www.caixw.com/public/uploads/demo/jquery/dialog/基本操作

默认的

非模态对话框

自动关闭

非fixed模式

显示指定ID的内容

加载一张图片

加载一URL地址

加载一URL到iframe

自定义CSS

自定义背景遮盖层

自定义内容部分背景

回调函数

show()函数

hide()函数

close()函数

javascript表单提交【转】

ibm文档中心，很好的教程

什么是Mashup

简介

编辑本段运行方式

编辑本段目前

编辑本段发展

编辑本段典型应用

地图 Mashup

视频和图象 Mashup

搜索和购物 Mashup

新闻 Mashup

微博 Mashup

使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup【转】

代码分享 5个有趣的 JavaScript 片段

PHP十年前灭掉Perl，如今也将面临危机

AJAX（XMLHttpRequest）进行跨域请求方法详解

HTML Adobe AIR HelloWorld项目

建立开发环境

编写应用程序

创建项目描述文件

创建入口HTML页面

Hello World

调试运行Air应用

打包和分发

生成证书

打包分发

gmail 邮件中css无效style无效background image背景图片无效不显示的解决办法[转]

from: http://www.caixw.com/public/uploads/demo/jquery/dialog/

基本操作