zscomehuyue
- 浏览: 402030 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
305954240：
好，好，好文。。。
facebook怎么赚钱？facebook盈利模式解析 -
天外鸭：
你好，我想问一些，那个runsall是哪个版本的命令，我在9. ...
db2常用命令大全 -
tterry：
这个叫热部署的话真是羞煞我等
idea -
Torero：
请求的不是Action的Execute方法, 而是其他方法呢? ...
struts2拦截器实现权限控制 -
fortaotao：
咨询一个问题，<security-constraint& ...
备忘：启用 Tomcat 下的 HTTPS
JSON的问题
JSON的问题
复杂list对象的转换
String ss = "[{\"linkId\":\"3037\", \"pointInfos\":[{\"lon\":185.87934298597,\"lat\":17.28910961713},{\"lon\":185.87938502633,\"lat\":17.289867677156}]}] ";
Map<String, Object> map = new HashMap<String, Object>();
map.put("pointInfos", PointInfo.class);
JSONArray json = JSONArray.fromObject(ss);
NetworkLink [] s= (NetworkLink[]) json.toArray( json, NetworkLink.class,map);
System.out.println(s[0].getPointInfos().get(0).getLon());
今天想利用json写一个tree,但是中途碰到一个关于单引号,双引号的问题,折磨了我两个小时,特此写下,记录这事,
Map<String, Object> map = new HashMap<String, Object>();
map.put("attributes", "{id:\"node2_value\"}, rel:\"adm\"}");
map.put("data", "机构\"名称");
map.put("icons", "../images/tree/hd.png");
map.put("state", "open");
JSONObject json = JSONObject.fromObject(map);
response.getWriter().write(json.toString());
传到前台的竟是
{"icons":"../images/tree/hd.png","attributes":"{id:\"node2_glue\"}, rel:\"adm\"}","data":"机构\"名称","state"
:"open"}
后来把\"换成' ,但只json标准又不支持'.
最后终于转过来劲了 ,晕死这么简单
Map<String, Object> map = new HashMap<String, Object>();
Map<String, Object> sMap = new HashMap<String, Object>();
sMap.put("id", "node2_value");
sMap.put("rel", "adm");
map.put("attributes", sMap);
map.put("data", "机构\"名称");
map.put("icons", "../images/tree/hd.png");
map.put("state", "open");
JSONObject json = JSONObject.fromObject(map);
* 22:16
* 浏览 (275)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-19
缩略显示
JSON 小结
JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式，并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。
尽管有许多宣传关于 XML 如何拥有跨平台，跨语言的优势，然而，除非应用于 Web Services，否则，在普通的 Web 应用中，开发者经常为 XML 的解析伤透了脑筋，无论是服务器端生成或处理 XML，还是客户端用 JavaScript 解析 XML，都常常导致复杂的代码，极低的开发效率。实际上，对于大多数 Web 应用来说，他们根本不需要复杂的 XML 来传输数据，XML 的扩展性很少具有优势，许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比，返回 HTML 片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。
现在， JSON 为 Web 应用开发者提供了另一种数据交换格式。让我们来看看 JSON 到底是什么，同 XML 或 HTML 片段相比，JSON 提供了更好的简单性和灵活性。
Ajax 资源中心
请访问 Ajax 资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
JSON 数据格式解析
和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用 JSON 传输一个简单的 String，Number，Boolean，也可以传输一个数组，或者一个复杂的 Object 对象。
String，Number 和 Boolean 用 JSON 表示非常简单。例如，用 JSON 表示一个简单的 String “ abc ”，其格式为：
"abc"
除了字符 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要编码外，其他 Unicode 字符可以直接输出。下图是一个 String 的完整表示结构：
图 1. String 的完整表示结构
图 1. String 的完整表示结构
一个 Number 可以根据整型或浮点数表示如下：
图 2. Number 的表示结构
图 2. Number 的表示结构
这与绝大多数编程语言的表示方法一致，例如：
12345（整数）
-3.9e10（浮点数）
Boolean 类型表示为 true 或 false 。此外，JavaScript 中的 null 被表示为 null，注意，true、false 和 null 都没有双引号，否则将被视为一个 String 。
JSON 还可以表示一个数组对象，使用 [] 包含所有元素，每个元素用逗号分隔，元素可以是任意的 Value，例如，以下数组包含了一个 String，Number，Boolean 和一个 null：
["abc",12345,false,null]
Object 对象在 JSON 中是用 {} 包含一系列无序的 Key-Value 键值对表示的，实际上此处的 Object 相当于 Java 中的 Map<String, Object>，而不是 Java 的 Class 。注意 Key 只能用 String 表示。
例如，一个 Address 对象包含如下 Key-Value：
city:Beijing
street:Chaoyang Road
postcode:100025（整数）
用 JSON 表示如下：
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
其中 Value 也可以是另一个 Object 或者数组，因此，复杂的 Object 可以嵌套表示，例如，一个 Person 对象包含 name 和 address 对象，可以表示如下：
{"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}
JavaScript 处理 JSON 数据
上面介绍了如何用 JSON 表示数据，接下来，我们还要解决如何在服务器端生成 JSON 格式的数据以便发送到客户端，以及客户端如何使用 JavaScript 处理 JSON 格式的数据。
我们先讨论如何在 Web 页面中用 JavaScript 处理 JSON 数据。我们通过一个简单的 JavaScript 方法就能看到客户端如何将 JSON 数据表示给用户：
function handleJson() {
var j={"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
};
document.write(j.name);
document.write(j.address.city);
}
假定服务器返回的 JSON 数据是上文的：
{"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}
只需将其赋值给一个 JavaScript 变量，就可以立刻使用该变量并更新页面中的信息了，相比 XML 需要从 DOM 中读取各种节点而言，JSON 的使用非常容易。我们需要做的仅仅是发送一个 Ajax 请求，然后将服务器返回的 JSON 数据赋值给一个变量即可。有许多 Ajax 框架早已包含了处理 JSON 数据的能力，例如 Prototype（一个流行的 JavaScript 库：http://prototypejs.org）提供了 evalJSON() 方法，能直接将服务器返回的 JSON 文本变成一个 JavaScript 变量：
new Ajax.Request("http://url", {
method: "get",
onSuccess: function(transport) {
var json = transport.responseText.evalJSON();
// TODO: document.write(json.xxx);
}
});
服务器端输出 JSON 格式数据
下面我们讨论如何在服务器端输出 JSON 格式的数据。以 Java 为例，我们将演示将一个 Java 对象编码为 JSON 格式的文本。
将 String 对象编码为 JSON 格式时，只需处理好特殊字符即可。另外，必须用 (") 而非 (') 表示字符串：
static String string2Json(String s) {
StringBuilder sb = new StringBuilder(s.length()+20);
sb.append('\"');
for (int i=0; i<s.length(); i++) {
char c = s.charAt(i);
switch (c) {
case '\"':
sb.append("\\\"");
break;
case '\\':
sb.append("\\\\");
break;
case '/':
sb.append("\\/");
break;
case '\b':
sb.append("\\b");
break;
case '\f':
sb.append("\\f");
break;
case '\n':
sb.append("\\n");
break;
case '\r':
sb.append("\\r");
break;
case '\t':
sb.append("\\t");
break;
default:
sb.append(c);
}
}
sb.append('\"');
return sb.toString();
}
将 Number 表示为 JSON 就容易得多，利用 Java 的多态，我们可以处理 Integer，Long，Float 等多种 Number 格式：
static String number2Json(Number number) {
return number.toString();
}
Boolean 类型也可以直接通过 toString() 方法得到 JSON 的表示：
static String boolean2Json(Boolean bool) {
return bool.toString();
}
要将数组编码为 JSON 格式，可以通过循环将每一个元素编码出来：
static String array2Json(Object[] array) {
if (array.length==0)
return "[]";
StringBuilder sb = new StringBuilder(array.length << 4);
sb.append('[');
for (Object o : array) {
sb.append(toJson(o));
sb.append(',');
}
// 将最后添加的 ',' 变为 ']':
sb.setCharAt(sb.length()-1, ']');
return sb.toString();
}
最后，我们需要将 Map<String, Object> 编码为 JSON 格式，因为 JavaScript 的 Object 实际上对应的是 Java 的 Map<String, Object> 。该方法如下：
static String map2Json(Map<String, Object> map) {
if (map.isEmpty())
return "{}";
StringBuilder sb = new StringBuilder(map.size() << 4);
sb.append('{');
Set<String> keys = map.keySet();
for (String key : keys) {
Object value = map.get(key);
sb.append('\"');
sb.append(key);
sb.append('\"');
sb.append(':');
sb.append(toJson(value));
sb.append(',');
}
// 将最后的 ',' 变为 '}':
sb.setCharAt(sb.length()-1, '}');
return sb.toString();
}
为了统一处理任意的 Java 对象，我们编写一个入口方法 toJson(Object)，能够将任意的 Java 对象编码为 JSON 格式：
public static String toJson(Object o) {
if (o==null)
return "null";
if (o instanceof String)
return string2Json((String)o);
if (o instanceof Boolean)
return boolean2Json((Boolean)o);
if (o instanceof Number)
return number2Json((Number)o);
if (o instanceof Map)
return map2Json((Map<String, Object>)o);
if (o instanceof Object[])
return array2Json((Object[])o);
throw new RuntimeException("Unsupported type: " + o.getClass().getName());
}
我们并未对 Java 对象作严格的检查。不被支持的对象（例如 List）将直接抛出 RuntimeException 。此外，为了保证输出的 JSON 是有效的，Map<String, Object> 对象的 Key 也不能包含特殊字符。细心的读者可能还会发现循环引用的对象会引发无限递归，例如，精心构造一个循环引用的 Map，就可以检测到 StackOverflowException：
@Test(expected=StackOverflowError.class)
public void testRecurrsiveMap2Json() {
Map<String, Object> map = new HashMap<String, Object>();
map.put("key", map);
JsonUtil.map2Json(map);
}
好在服务器处理的 JSON 数据最终都应该转化为简单的 JavaScript 对象，因此，递归引用的可能性很小。
最后，通过 Servlet 或 MVC 框架输出 JSON 时，需要设置正确的 MIME 类型（application/json）和字符编码。假定服务器使用 UTF-8 编码，则可以使用以下代码输出编码后的 JSON 文本：
response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
pw.write(JsonUtil.toJson(obj));
pw.flush();
小结
JSON 已经是 JavaScript 标准的一部分。目前，主流的浏览器对 JSON 支持都非常完善。应用 JSON，我们可以从 XML 的解析中摆脱出来，对那些应用 Ajax 的 Web 2.0 网站来说，JSON 确实是目前最灵活的轻量级方案。
* 16:29
* 浏览 (456)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-18
缩略显示
IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结
今天测试代码时，发现不少IE可以运行的ajax，但在FF中报错。
IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下：
1.兼容firefox的 outerHTML，FF中没有outerHtml的方法。
if (window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function() {
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for (var i=0;i<attrs.length;i++) {
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
}
2.集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:
<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>
9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
10.event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以下面的frame为例：
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：
<body >
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body >
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
15. 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();
有人说标准是：
document.body.onload=new Function('inject()');
16. firefox与IE(parentElement)的父元素的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
18.innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';
20. IE,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
24. CSS圆角
IE：不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
25. CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
* 17:04
* 浏览 (878)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-18
缩略显示
AJAX数据加载页面
<div id="divprogressbar"
style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: #FFFFFF; filter: alpha ( opacity = 80 ); z-index: 100">
<div style="text-align: center; padding-top: 200px">
<table align="center" border="1" width="30%" cellspacing="0"
cellpadding="4" style="border-collapse: collapse" bgcolor="#FFFFEC"
height="87">
<tr>
<td bgcolor="#3399FF" style="font-size: 12px;" height="24"
align="center" class="menubar2" style="color: #0000ff;">
数据正在载入中
</td>
</tr>
<tr>
<td style="font-size: 12px; line-height: 200%" align="center">
页面正在载入数据中.请耐心等待......
<marquee style="border: 1px solid #000000" direction="right"
width="300" scrollamount="5" scrolldelay="10" bgcolor="#F0F0F0">
<table cellspacing="1" cellpadding="0">
<tr height=8>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
</tr>
</table>
</marquee>
</td>
</tr>
</table>
</div>
</div>
* 10:32
* 浏览 (1056)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-15
缩略显示
仿Google首页搜索自动补全
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 自动完成功能(优化版)</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
var highlightindex = -1;//表示当前高亮节点
var timeoutId;
$(document).ready(function() {
var wordInput = $("#word");//文本框
var wordInputOffset = wordInput.offset();//获得文本框位置
$("#auto").hide().css("border", "1px black solid").css("position", "absolute")
.css("top", wordInputOffset.top + wordInput.height() + 5 + "px")
.css("left", wordInputOffset.left + "px").width(wordInput.width() + 3 + "px");
wordInput.keyup(function(event) {
//处理文本框中的键盘事件
//如果输入字母，将文本框中最新信息发送给服务器
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;//获得键值
if (keyCode == 27) {
var wordText = $("#word").val();
autoHide();
wordInput.text(wordText);
}
else {
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { //8对应退格键，46对应删除键
var wordText = $("#word").val();//获得文本框中的内容
var autoNode = $("#auto");
if (wordText != "") {
clearTimeout(timeoutId);//对上次未完成的延时操作进行取消
//延时操作，减少与服务器的交互次数，延时500ms，防止用户操作过快
timeoutId = setTimeout(function() {
$.post("AutoCompleteServlet", {word:wordText}, function(data) {//发送数据，第二项是属性名对应属性值
var jqueryObj = $(data);//将dom对象data转换成jQuery的对象
var wordNodes = jqueryObj.find("word");//找到所有word节点
autoNode.html("");
wordNodes.each(function(i) { //i是索引，用来给id赋值
var wordNode = $(this);//获取单词内容
var newDivNode = $("<div>").attr("id", i).css("backgroundColor", "white");
newDivNode.html(wordNode.text()).appendTo(autoNode);//新建div节点，加入单词内容
//增加鼠标进入事件，高亮节点
newDivNode.mouseover(function() {
//将原来高亮的节点取消高亮
if (highlightindex != -1) {
$("#auto").children("div").eq(highlightindex)
.css("backgroundColor", "white");
}
//记录新的高亮索引
highlightindex = $(this).attr("id");
$(this).css("backgroundColor", "#3366CC").css("cursor","pointer");
});
//增加鼠标移出事件，取消节点高亮
newDivNode.mouseout(function() {
if (keyCode == 13) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -1) {
lightEventHide();
highlightindex = -1;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
autoHide();
$("#word").get(0).blur();//让文本框失去焦点
}
//取消鼠标移出节点的高亮
//$(this).css("backgroundColor", "white");
}
}
);
//增加鼠标点击事件,可以进行补全
newDivNode.click(function() {
//取出高亮节点的文本内容
var comText = $(this).text();
autoHide();
highlightindex = -1;
//文本框内容变为高亮节点内容
$("#word").val(comText);
});
});
//添加单词内容到弹出框
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
highlightindex = -1;//弹出框隐藏，高亮节点索引设成-1
}
}, "xml");
}, 300);
}
else
{
autoNode.hide();
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) { //判断是否输入的是向上38向下40按键
if (keyCode == 38) {
var autoNodes = $("#auto").children("div").css("background-color", "white");
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex--;
} else {
lightEvent();
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
highlightindex = autoNodes.length - 1;//如果改变索引值后index变成-1，则将索引值指向最后一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
if (keyCode == 40) {
var autoNodes = $("#auto").children("div");
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css("background-color", "white");
}
highlightindex++;
if (highlightindex == autoNodes.length) {
highlightindex = 0;//如果改变索引值等于最大长度，则将索引值指向第一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
} else if (keyCode == 13) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -1) {
lightEventHide();
highlightindex = -1;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
$("#auto").hide();
$("#word").get(0).blur();//让文本框失去焦点
}
//下拉框没有高亮
}
}
}
)
;
$("input[type='button']").click(function() {
alert("文本框中的[" + $("#word").val() + "]被提交了");
});
});
function lightEventHide(){
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function lightEvent(){
var comText = $("#auto").children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function autoHide(){
$("#auto").hide();
}
</script>
<h3>
<center>施杨 仿google自动补全(jQuery优化版)</center>
</h3>
<br />
<table align="center">
<tr><td>
<input type="text" id="word" maxlength=2048 size=55 />
<br/>
<td></tr>
<tr><td align="center">
<input type="button" value="shiyang 搜索"/>
</td></tr>
</table>
<br />
<div id="auto"></div>
</body>
</html>
* 20:18
* 浏览 (1377)
* 评论 (2)
* 分类: AJAX
* 收藏Spinner
2009-02-15
缩略显示
JSON LIB 日期转换
public class Person {
private String name;
private Date birthday;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public Date getBirthday() {
return birthday;
}
}
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import net.sf.ezmorph.object.DateMorpher;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.util.JSONUtils;
/**
* @author <a href="mailto:wang-yu@msn.com">WangYu</a></br>
* @version 1.0 <br>
* @since JDK 1.6.0.12 <br>
*/
public class JsonUtil {
/**页面传至后台时，json数据在request的参数名称*/
public final static String JSON_ATTRIBUTE = "json";
public final static String JSON_ATTRIBUTE1 = "json1";
public final static String JSON_ATTRIBUTE2 = "json2";
public final static String JSON_ATTRIBUTE3 = "json3";
public final static String JSON_ATTRIBUTE4 = "json4";
/**
* 从一个JSON 对象字符格式中得到一个java对象，形如：
* {"id" : idValue, "name" : nameValue, "aBean" : {"aBeanId" : aBeanIdValue, ...}}
* @param object
* @param clazz
* @return
*/
public static Object getDTO(String jsonString, Class clazz){
JSONObject jsonObject = null;
try{
setDataFormat2JAVA();
jsonObject = JSONObject.fromObject(jsonString);
}catch(Exception e){
e.printStackTrace();
}
return JSONObject.toBean(jsonObject, clazz);
}
/**
* 从一个JSON 对象字符格式中得到一个java对象，其中beansList是一类的集合，形如：
* {"id" : idValue, "name" : nameValue, "aBean" : {"aBeanId" : aBeanIdValue, ...},
* beansList:[{}, {}, ...]}
* @param jsonString
* @param clazz
* @param map 集合属性的类型 (key : 集合属性名, value : 集合属性类型class) eg: ("beansList" : Bean.class)
* @return
*/
public static Object getDTO(String jsonString, Class clazz, Map map){
JSONObject jsonObject = null;
try{
setDataFormat2JAVA();
jsonObject = JSONObject.fromObject(jsonString);
}catch(Exception e){
e.printStackTrace();
}
return JSONObject.toBean(jsonObject, clazz, map);
}
/**
* 从一个JSON数组得到一个java对象数组，形如：
* [{"id" : idValue, "name" : nameValue}, {"id" : idValue, "name" : nameValue}, ...]
* @param object
* @param clazz
* @return
*/
public static Object[] getDTOArray(String jsonString, Class clazz){
setDataFormat2JAVA();
JSONArray array = JSONArray.fromObject(jsonString);
Object[] obj = new Object[array.size()];
for(int i = 0; i < array.size(); i++){
JSONObject jsonObject = array.getJSONObject(i);
obj[i] = JSONObject.toBean(jsonObject, clazz);
}
return obj;
}
/**
* 从一个JSON数组得到一个java对象数组，形如：
* [{"id" : idValue, "name" : nameValue}, {"id" : idValue, "name" : nameValue}, ...]
* @param object
* @param clazz
* @param map
* @return
*/
public static Object[] getDTOArray(String jsonString, Class clazz, Map map){
setDataFormat2JAVA();
JSONArray array = JSONArray.fromObject(jsonString);
Object[] obj = new Object[array.size()];
for(int i = 0; i < array.size(); i++){
JSONObject jsonObject = array.getJSONObject(i);
obj[i] = JSONObject.toBean(jsonObject, clazz, map);
}
return obj;
}
/**
* 从一个JSON数组得到一个java对象集合
* @param object
* @param clazz
* @return
*/
public static List getDTOList(String jsonString, Class clazz){
setDataFormat2JAVA();
JSONArray array = JSONArray.fromObject(jsonString);
List list = new ArrayList();
for(Iterator iter = array.iterator(); iter.hasNext();){
JSONObject jsonObject = (JSONObject)iter.next();
list.add(JSONObject.toBean(jsonObject, clazz));
}
return list;
}
/**
* 从一个JSON数组得到一个java对象集合，其中对象中包含有集合属性
* @param object
* @param clazz
* @param map 集合属性的类型
* @return
*/
public static List getDTOList(String jsonString, Class clazz, Map map){
setDataFormat2JAVA();
JSONArray array = JSONArray.fromObject(jsonString);
List list = new ArrayList();
for(Iterator iter = array.iterator(); iter.hasNext();){
JSONObject jsonObject = (JSONObject)iter.next();
list.add(JSONObject.toBean(jsonObject, clazz, map));
}
return list;
}
/**
* 从json HASH表达式中获取一个map，该map支持嵌套功能
* 形如：{"id" : "johncon", "name" : "小强"}
* 注意commons-collections版本，必须包含org.apache.commons.collections.map.MultiKeyMap
* @param object
* @return
*/
public static Map getMapFromJson(String jsonString) {
setDataFormat2JAVA();
JSONObject jsonObject = JSONObject.fromObject(jsonString);
Map map = new HashMap();
for(Iterator iter = jsonObject.keys(); iter.hasNext();){
String key = (String)iter.next();
map.put(key, jsonObject.get(key));
}
return map;
}
/**
* 从json数组中得到相应java数组
* json形如：["123", "456"]
* @param jsonString
* @return
*/
public static Object[] getObjectArrayFromJson(String jsonString) {
JSONArray jsonArray = JSONArray.fromObject(jsonString);
return jsonArray.toArray();
}
/**
* 把数据对象转换成json字符串
* DTO对象形如：{"id" : idValue, "name" : nameValue, ...}
* 数组对象形如：[{}, {}, {}, ...]
* map对象形如：{key1 : {"id" : idValue, "name" : nameValue, ...}, key2 : {}, ...}
* @param object
* @return
*/
public static String getJSONString(Object object) throws Exception{
String jsonString = null;
//日期值处理器
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.registerJsonValueProcessor(java.util.Date.class, new DateJsonValueProcessor());
if(object != null){
if(object instanceof Collection || object instanceof Object[]){
jsonString = JSONArray.fromObject(object, jsonConfig).toString();
}else{
jsonString = JSONObject.fromObject(object, jsonConfig).toString();
}
}
return jsonString == null ? "{}" : jsonString;
}
private static void setDataFormat2JAVA(){
//设定日期转换格式
JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(new String[] {"yyyy-MM-dd", "yyyy-MM-dd HH:mm:ss"}));
}
}
public class Test {
public static void main(String[] args) {
String personData = "{\"birthday\":\"1980/01/01\",\"name\":\"testname\"}";
JSONObject jsonPerson = JSONObject.fromObject(personData);
String[] dateFormats = new String[] {"yyyy/MM/dd"};
JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(dateFormats));
Person person = (Person)JSONObject.toBean(jsonPerson, Person.class);
System.out.println(person.getBirthday());
}
}
* 17:20
* 浏览 (1774)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-15
缩略显示
json lib
public class Test {
public static void main(String[] args) {
// 转化数组,集合
// 1.
boolean[] boolArray = new boolean[] { true, false, true };
JSONArray jsonArray1 = JSONArray.fromObject(boolArray);
System.out.println(jsonArray1);
/* [true,false,true] */
// 2.
List<String> list = new ArrayList<String>();
list.add("第一个");
list.add("第二个");
JSONArray jsonArray2 = JSONArray.fromObject(list);
System.out.println(jsonArray2);
/* ["第一个","第二个"] */
// 3.
JSONArray jsonArray3 = JSONArray.fromObject("['json','is','easy']");
System.out.println(jsonArray3);
/* ["json","is","easy"] */
// 转化对象,转化Map
Map<String, Object> map = new HashMap<String, Object>();
map.put("name", "json");
map.put("bool", Boolean.TRUE);
map.put("int", new Integer(1));
map.put("arr", new String[] { "a", "b" });
map.put("func", "function(i){return this.arr[i];}");
JSONObject json = JSONObject.fromObject(map);
System.out.println(json);
/*
* {"func":function(i){return
* this.arr[i];},"arr":["a","b"],"int":1,"bool":true,"name":"json"}
*/
// 转化Bean
Stock stock = new Stock();
stock.setId("000001");
stock.setName("浦发银行");
JSONObject jsonObject = JSONObject.fromObject(stock);
System.out.println(jsonObject);
/* {"id":"000001","name":"浦发银行","now":0,"today":0,"yesterday":0} */
// 从JSON到Beans//转化为动态bean
String myjson = "{name:\"json\",bool:true,int:1,double:2.2,function:function(a){return a;},array:[1,2]}";
JSONObject jsonObj = JSONObject.fromObject(myjson);
Object bean = JSONObject.toBean(jsonObj);
System.out.println(bean);
/*
* net.sf.ezmorph.bean.MorphDynaBean@16df84b[ {double=2.2, int=1,
* function=function(a){ return a; }, name=json, bool=true, array=[1,
* 2]} ]
*/
JSONObject json1 = new JSONObject(true);
XMLSerializer xmlSerializer2 = new XMLSerializer();
String xml = xmlSerializer2.write(json1);
System.out.println("xml:" + xml);
/*
* xml:<?xml version="1.0" encoding="UTF-8"?> <o null="true"/>
*/
JSONObject json2 = JSONObject
.fromObject("{\"name\":\"json\",\"bool\":true,\"int\":1}");
XMLSerializer xmlSerializer3 = new XMLSerializer();
String xml2 = xmlSerializer3.write(json2);
System.out.println("xml2:" + xml2);
/*
* xml2:<?xml version="1.0" encoding="UTF-8"?> <o><bool
* type="boolean">true</bool><int type="number">1</int><name
* type="string">json</name></o>
*/
JSONArray json3 = JSONArray.fromObject("[1,2,3]");
XMLSerializer xmlSerializer4 = new XMLSerializer();
String xml3 = xmlSerializer4.write(json3);
System.out.println("xml3:" + xml3);
/*
* xml3:<?xml version="1.0" encoding="UTF-8"?> <a><e type="number">1</e><e
* type="number">2</e><e type="number">3</e></a>
*/
}
}
* 16:04
* 浏览 (879)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-14
缩略显示
AJAX缓存
//URL地址的时间戳,骗过浏览器不读缓存
function convertURL(url) {
// 获取时间戳
var timestamp = (new Date()).valueOf();
// 将时间戳信息添加到url上
if (url.indexOf("?") > 0) {
url = url + "&t=" + timstamp;
} else {
url = url + "?t=" + timstamp;
}
}
* 16:46
* 浏览 (300)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-14
缩略显示
AjaxXMLHttpRequest
// 定义一个全局的XMLHttpRequest对象
var xmlHttpRequest;
function verify() {
var userName = document.getElementById("userName").value;
// 创建XMLHttpRequst对象
// 需要这对IE核其他类型的浏览器建立这个对象的不同方法写不同的代码
if (window.XMLHttpRequest) {
// 针对FireFox,Mozilla,Opera,Safari,IE7,IE8
xmlHttpRequest = new XMLHttpRequest();
// 针对某些特定版本的Mozilla浏览器的BUG进行修正
try {
if (xmlHttpRequest.overrideMimeType()) {
xmlHttpRequest.overrideMimeType("text/xml");
}
} catch (e) {
}
} else if (window.ActiveXObject) {
// 针对IE6,IE5.5,IE5
// 两个可以用于创建XMLHTTPRquest对象的控件名称,保存在一个js的数组中
// 排在前面的版本比价新
var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try {
// 取出一个控件名进行创建,如果创建成功就终止循环
// 如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
// 确认XMLHttpReques对象创建成功
if (!xmlHttpRequest) {
alert("XMLHttpRequest对象创建失败!!");
return;
} else {
// 2.注册回调函数
// 注册毁掉函数时,只需要函数名不需要加括号
// 我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
xmlHttpRequest.onreadystatechange = callback;
// 3.设置连接信息
// 第一个参数表示http的请求方式,支持所有的饿http的请求方式,主要使用get核post
// 第二个参数表示请求的url路径
// 第三个参数表示采用同步还是异步,true表示异步
//xmlHttpRequest.open("GET", "AJAX?name=" + userName, true);
//POST方式请求的代码
xmlHttpRequest.open("POST","AJAX",true);
//POST方法需要自己设置http请求头
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4发送数据,开始与服务器端交互
// 同步方式下,send这句话会在服务器端数据回来之后执行
// 异步方式下,send这句话会立即完成执行
//get方式的send方法参数为空
//xmlHttpRequest.send(null);
//post方式的send方法参数为你要传递的url参数
xmlHttpRequest.send("name="+userName);
}
}
// 5.回调函数
function callback() {
// 判断对象的状态是否交互完成
if (xmlHttpRequest.readyState == 4) {
// 判读http的交互是否成功
if (xmlHttpRequest.status == 200) {
// 获取服务器端的返回数据
var responseText = xmlHttpRequest.responseText;
// 将数据显示在页面上
// 通过dom方式找到dom对应的节点
var divResult = document.getElementById("result");
divResult.innerHTML = responseText;
}
}
}
* 14:22
* 浏览 (220)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-01-12
缩略显示
AJAX异步通信技术学习笔记
AJAX是一中运用JavaScript和可扩展编辑语言（XML），在网络浏览器和服务器之间传送或接收数据的技术。
AJAX的工作原理相当与在用户和服务器之间加了一个中间层，使用户请求与服务器响应异步化。这样还可以把以前的一些服务器负担的工作转交给客户端，利用客户端闲置的处理能力来处理，减轻服务器和宽带的负担。
AJAX是WEB2.0的核心之一．AJAX技术运用与浏览器中，使向服务器索取网页的部分信息成为可能．
XMLHttpRequest对象
XMLHttpRequest提供客户端同HTTP服务器异步通信的协议．通过这个协议，AJAX可以使页面象桌面程序一样同服务器端进行数据层面的交换，而不必每次都刷新页面，也不用每次都将数据处理的工作都交给服务器来做，这样既减轻了服务器负担又加快了响应速度，缩短了用户等待的时间．
XMLHttpRequest对象的方法：
Abort() 停止当前请求
getAllResponseHeaders() 返回HTTP请求的所有响应头部的键/值字符串
getResponseHeader("header") 返回指定头部属性的字符串值
Open("method", "url") 建立对服务器的调用。Method参数可以是GET POST PUT, url参数可以是相对URL或绝对对 URL
Send(content) 向服务器发送请求
setRequestHeader("header","value") 为指定头部属性设置指定值
XMLHttpRequest对象的属性：
Onreadystatechange 状态改变的时间触发器，通常绑定一个JavaScript 函数，每当状态发生改变时，就调用该函数
readyState 请求的状态，有5个可取值：
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 从服务器返回的文本形式的响应内容
responseXML 从服务器返回的兼容DOM的XML文档对象
Status 从服务器返回的状态码，例如404="文件找不到"
200 = "成功"
statusText 从服务器返回的状态文本信息，例如OK或Not Found(未找到)
<script language = "javascript">
//定义一个将指向XMLHttpRequest对象的变量
var xmlHttp;
//定义一个函数用于创建XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//定义一个函数用于启动与服务器的异步同信
function begin(){
createXMLHttpRequest(); //调用createXMLHttpRequest函数
xmlHttp.onreadystatechange = processor; //将事件触发器绑定到 processor上
xmlHttp.open("GET", "test.xml"); //使用GET方法建立对服务器资 源test.xml的一个异步调用
xmlHttp.send(null); //向服务器发送请求
}
//定义一个状态处理函数用于处理状态触发器的状态改变
function processor(){
//如果处理请求完成
if(xmlHttp.readyState == 4){
//如果服务器返回状态为成功
if(xmlHttp.status = 200){
//将从服务器返回的内容报告给用户
alert("从服务器返回的内容为：" + xmlHttp.responseText);
}
}
}
</script>
DOM是面向HTML和XML文档的一组API，它为文档提供了结构化的表示，并定义了如何通过脚本（JavaScript）来访问文档结构。如果没有DOM，JavaScript根本就不存在Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，可通过JavaScript来访问这些元素的属性和方法，实现动态编辑页面的功能。
这里所说的DOM是符合W3C标准的文档对象模型，它以树型结构表示HTML和XML文档，并定义可操作这个树及其节点的一系列方法和属性。在网络浏览器端，通过JavaScript利用DOM提供的API来操作HTML和XML文档。
1.操作HTML文档
HTML文档各个节点在DOM中被视为个种类型的Node对象.而且每个 Node对象都有自己的属性和方法,通常利用这些属性和方法来遍历或动态编辑整个树。
操作HTML文档的常用DOM方法：
getElementById(isIDValue) 返回文档中具有指定id属性的元素
getElementByTabName(isTagName) 返回当前元素中有指定标记名的子元素 的数组
appendChild(childNode) 在当前节点的childNodes[]组中增加一个 节点childNode
cloneNode(false | true) false表示仅复制当前节点；true表示复制 当前节点以及它的所有子孙节点
hasChildNodes() 判断当前节点是否拥有子节点，有则返回 true
insertBefore(newNode,targetNode) 将节点newNode作为当前元素的子节点 插到targetNode元素前面
removeChild(childNode) 从文档树中删除子节点childNode
resplaceChild(newNode,oldNode) 将节点oldNode替换为节点newNode
getAttribute(sAttrName) 返回指定属性的字符串值
setAttribute(sAttriName, vAttrValue) 把指定的属性设置为镇定的字符串值，如 果该属性不存在则添加一个新属性
removeAttribute(sAttrName) 从元素中删除属性sAttrName
操作HTML文档的常用DOM属性：
Attributes 如果该节点是一个Element,则以NamedNodeMap 形式返回该元素的属性
childNodes 以Node[]的形式存放当前节点的子节点，如果没 有子节点，则返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点，如 果没有子节点，则为null
lastChild 以Node的形式返回当前节点的最后一个节点，如 果没有子节点，则为null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点， 如果没有这样的节点，则返回null
nodeName 节点的名字，Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点，如果没 有父亲节点，则为null
previoiusSibling 以Node的形式返回紧挨当前节点，位于它之前的 兄弟节点。如果没有这样的节点，则返回null
操作XML文档
在数据的表示和交换方面XML文档更具优势，针对XML的访问和操作，DOM也用样提供了一系列的API。利用这些API，可方便地从XML文档中读取数据信息，动态创建展示这些数据信息的HTML页面。
操作XML文档，通常遵循以下4个步骤：
载入整个XML文档
从XML文档中提取数据信息
对提取的信息进行加工处理
创建包含处理结果的HTML页面展示给用户
遍历XML文档的常用DOM方法:
getElementById(sIDValue) 返回文档中具体指定id属性的元素
getElementByTabName(sTagName) 返回当前元素中有指定标记名的子元素的数 组
hasChildNodes() 判断当前节点是否拥有子节点,有则返回true getAttribute(sAttrName) 返回指定属性的字符串值
操作XML文档的常用DOM属性:
childNodes 以Node[]的形式存放当前节点的子节点,如果没有子节点,则 返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点,如果没有子 节点,则为null
lastChild 以Node的形式返回当前节点的最后一个子节点,如果没有 这样的节点,则返回null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点， 如果没有这样的节点，则返回null
nodeName 节点的名字，Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点，如果没 有父亲节点，则为null
previoiusSibling 以Node的形式返回紧挨当前节点，位于它之前的 兄弟节点。如果没有这样的节点，则返回null
* 11:25
* 浏览 (498)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-01-07
缩略显示
JSON数据调用
JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
JSON的规则很简单： 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。具体细节参考http://www.json.org/json-zh.html
举个简单的例子：
function showJSON() {
var user =
{
"username":"andy",
"age":20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
}
这表示一个user对象，拥有username, age, info, address 等属性。
同样也可以用JSON来简单的修改数据，修改上面的例子
function showJSON() {
var user =
{
"username":"andy",
"age":20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
user.username = "Tom";
alert(user.username);
}
JSON提供了json.js包，下载[url]http://www.json.org/json.js [/url]后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。
function showCar() {
var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");
alert(carr.toJSONString());
}
function Car(make, model, year, color) {
this.make = make;
this.model = model;
this.year = year;
this.color = color;
}
可以使用eval来转换JSON字符到Object
function myEval() {
var str = '{ "name": "Violet", "occupation": "character" }';
var obj = eval('(' + str + ')');
alert(obj.toJSONString());
}
或者使用parseJSON()方法
function myEval() {
var str = '{ "name": "Violet", "occupation": "character" }';
var obj = str.parseJSON();
alert(obj.toJSONString());
}
下面使用prototype写一个JSON的ajax例子。
先写一个servlet (我的是servlet.ajax.JSONTest1.java)就写一句话
response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");
再在页面中写一个ajax的请求
function sendRequest() {
var url = "/MyWebApp/JSONTest1";
var mailAjax = new Ajax.Request(
url,
{
method: 'get',
onComplete: jsonResponse
}
);
}
function jsonResponse(originalRequest) {
alert(originalRequest.responseText);
var myobj = originalRequest.responseText.parseJSON();
alert(myobj.name);
}
prototype-1.5.1.js中提供了JSON的方法，String.evalJSON(), 可以不使用json.js, 修改上面的方法
function jsonResponse(originalRequest) {
alert(originalRequest.responseText);
var myobj = originalRequest.responseText.evalJSON(true);
alert(myobj.name);
}
JSON还提供了java的jar包 http://www.json.org/java/index.html API也很简单，下面举个例子
在javascript中填加请求参数
function sendRequest() {
var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");
var pars = "car=" + carr.toJSONString();
var url = "/MyWebApp/JSONTest1";
var mailAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: jsonResponse
}
);
}
使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改servlet添加JSON的处理(要使用json.jar)
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {
String s3 = request.getParameter("car");
try {
JSONObject jsonObj = new JSONObject(s3);
System.out.println(jsonObj.getString("model"));
System.out.println(jsonObj.getInt("year"));
} catch (JSONException e) {
e.printStackTrace();
}
response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");
}
同样可以使用JSONObject生成JSON字符串，修改servlet
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {
String s3 = request.getParameter("car");
try {
JSONObject jsonObj = new JSONObject(s3);
System.out.println(jsonObj.getString("model"));
System.out.println(jsonObj.getInt("year"));
} catch (JSONException e) {
e.printStackTrace();
}
JSONObject resultJSON = new JSONObject();
try {
resultJSON.append("name", "Violet")
.append("occupation", "developer")
.append("age", new Integer(22));
System.out.println(resultJSON.toString());
} catch (JSONException e) {
e.printStackTrace();
}
}
* 07:51
* 浏览 (469)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2008-06-16
缩略显示
Ajax Libraries
Ajax Libraries
Each library is available via both google.load(), and directly via <script/> tag. The google.load() approach offers the most functionality and performance. In the sections that follow, we document all of the libraries that are available. For each library we list it's name (as in the name used in google.load(), all of the versions that we have on hand for the library, etc.
jQuery
name: jquery
versions: 1.2.3, 1.2.6
load request: google.load("jquery", "1.2.6");
extras: uncompressed:true, e.g., google.load("jquery", "1.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
site: http://jquery.com/
note: 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild...
prototype
name: prototype
versions: 1.6.0.2
load request: google.load("prototype", "1.6.0.2");
path: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js
site: http://www.prototypejs.org/
script.aculo.us
name: scriptaculous
versions: 1.8.1
load request: google.load("scriptaculous", "1.8.1");
path: http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js
site: http://script.aculo.us/
note: this library depends on prototype. before loading this module, you must load prototype e.g.:
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
mootools
name: mootools
versions: 1.11
load request: google.load("mootools", "1.11");
extras: uncompressed:true, e.g., google.load("mootools", "1.11", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js
path(u): http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js
site: http://mootools.net/
dojo
name: dojo
versions: 1.1.1
load request: google.load("dojo", "1.1.1");
extras: uncompressed:true, e.g., google.load("dojo", "1.1.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js
path(u): http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js.uncompressed.js
site: http://dojotoolkit.org/
* 21:29
* 浏览 (433)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2008-05-08
缩略显示
JSP中使用AJAX示例：分别将结果提交为STRUTS，SERVLET,WEBWORK的不同操作方
我原先刚开始学AJAX的时候，忘了从什么地方拉下来的一篇文章，不过，如果没有AJAX基础，最好不看这篇示例，因为你肯定看不懂，因为这个示例页不能够给你立即看到立即实现的效果，你应该先去看一个最简单的示例，怎么样用AJAX去把一个文本文件的内容读回来。然后再回来看这篇文章，这里你可以看到使用AJAX分别把内容提交到STRUTS,SERVLET,WEBWORK，是怎么样操作的。我在看这篇文章以前，都是把一个JSP的处理请求，发给另外一个JSP页面处理，并在那个页面理采用BEAN的方式，虽然我是采用的STRUTS结构，但是却不知道可以直接将内容提交到ACTION，这样就可以减少一道工序了，人笨就是这样。
写这个页面的朋友是谁，我真的忘了，不过，还是非常感谢。示例就自己看吧：
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
ajax
</title>
</head>
<body bgcolor="#ffffff">
<h1>
<input name="username" type="text" maxlength="20" />
<input id="chk-name-btn" type="button" value="检测帐号" onclick="testName('<%=request.getContextPath()%>')" />
<div id="view_name"></div>
</h1>
</body>
</html>
<script language="javascript">
if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest=function() {
return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
};
}//取得XMLHttpRequest对象
function testName(path){
//path是取得系统路径
var view_name=document.getElementById("view_name");
var req=new XMLHttpRequest();
复杂list对象的转换
String ss = "[{\"linkId\":\"3037\", \"pointInfos\":[{\"lon\":185.87934298597,\"lat\":17.28910961713},{\"lon\":185.87938502633,\"lat\":17.289867677156}]}] ";
Map<String, Object> map = new HashMap<String, Object>();
map.put("pointInfos", PointInfo.class);
JSONArray json = JSONArray.fromObject(ss);
NetworkLink [] s= (NetworkLink[]) json.toArray( json, NetworkLink.class,map);
System.out.println(s[0].getPointInfos().get(0).getLon());
今天想利用json写一个tree,但是中途碰到一个关于单引号,双引号的问题,折磨了我两个小时,特此写下,记录这事,
Map<String, Object> map = new HashMap<String, Object>();
map.put("attributes", "{id:\"node2_value\"}, rel:\"adm\"}");
map.put("data", "机构\"名称");
map.put("icons", "../images/tree/hd.png");
map.put("state", "open");
JSONObject json = JSONObject.fromObject(map);
response.getWriter().write(json.toString());
传到前台的竟是
{"icons":"../images/tree/hd.png","attributes":"{id:\"node2_glue\"}, rel:\"adm\"}","data":"机构\"名称","state"
:"open"}
后来把\"换成' ,但只json标准又不支持'.
最后终于转过来劲了 ,晕死这么简单
Map<String, Object> map = new HashMap<String, Object>();
Map<String, Object> sMap = new HashMap<String, Object>();
sMap.put("id", "node2_value");
sMap.put("rel", "adm");
map.put("attributes", sMap);
map.put("data", "机构\"名称");
map.put("icons", "../images/tree/hd.png");
map.put("state", "open");
JSONObject json = JSONObject.fromObject(map);
* 22:16
* 浏览 (275)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-19
缩略显示
JSON 小结
JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式，并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。
尽管有许多宣传关于 XML 如何拥有跨平台，跨语言的优势，然而，除非应用于 Web Services，否则，在普通的 Web 应用中，开发者经常为 XML 的解析伤透了脑筋，无论是服务器端生成或处理 XML，还是客户端用 JavaScript 解析 XML，都常常导致复杂的代码，极低的开发效率。实际上，对于大多数 Web 应用来说，他们根本不需要复杂的 XML 来传输数据，XML 的扩展性很少具有优势，许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比，返回 HTML 片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。
现在， JSON 为 Web 应用开发者提供了另一种数据交换格式。让我们来看看 JSON 到底是什么，同 XML 或 HTML 片段相比，JSON 提供了更好的简单性和灵活性。
Ajax 资源中心
请访问 Ajax 资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
JSON 数据格式解析
和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用 JSON 传输一个简单的 String，Number，Boolean，也可以传输一个数组，或者一个复杂的 Object 对象。
String，Number 和 Boolean 用 JSON 表示非常简单。例如，用 JSON 表示一个简单的 String “ abc ”，其格式为：
"abc"
除了字符 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要编码外，其他 Unicode 字符可以直接输出。下图是一个 String 的完整表示结构：
图 1. String 的完整表示结构
图 1. String 的完整表示结构
一个 Number 可以根据整型或浮点数表示如下：
图 2. Number 的表示结构
图 2. Number 的表示结构
这与绝大多数编程语言的表示方法一致，例如：
12345（整数）
-3.9e10（浮点数）
Boolean 类型表示为 true 或 false 。此外，JavaScript 中的 null 被表示为 null，注意，true、false 和 null 都没有双引号，否则将被视为一个 String 。
JSON 还可以表示一个数组对象，使用 [] 包含所有元素，每个元素用逗号分隔，元素可以是任意的 Value，例如，以下数组包含了一个 String，Number，Boolean 和一个 null：
["abc",12345,false,null]
Object 对象在 JSON 中是用 {} 包含一系列无序的 Key-Value 键值对表示的，实际上此处的 Object 相当于 Java 中的 Map<String, Object>，而不是 Java 的 Class 。注意 Key 只能用 String 表示。
例如，一个 Address 对象包含如下 Key-Value：
city:Beijing
street:Chaoyang Road
postcode:100025（整数）
用 JSON 表示如下：
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
其中 Value 也可以是另一个 Object 或者数组，因此，复杂的 Object 可以嵌套表示，例如，一个 Person 对象包含 name 和 address 对象，可以表示如下：
{"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}
JavaScript 处理 JSON 数据
上面介绍了如何用 JSON 表示数据，接下来，我们还要解决如何在服务器端生成 JSON 格式的数据以便发送到客户端，以及客户端如何使用 JavaScript 处理 JSON 格式的数据。
我们先讨论如何在 Web 页面中用 JavaScript 处理 JSON 数据。我们通过一个简单的 JavaScript 方法就能看到客户端如何将 JSON 数据表示给用户：
function handleJson() {
var j={"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
};
document.write(j.name);
document.write(j.address.city);
}
假定服务器返回的 JSON 数据是上文的：
{"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}
只需将其赋值给一个 JavaScript 变量，就可以立刻使用该变量并更新页面中的信息了，相比 XML 需要从 DOM 中读取各种节点而言，JSON 的使用非常容易。我们需要做的仅仅是发送一个 Ajax 请求，然后将服务器返回的 JSON 数据赋值给一个变量即可。有许多 Ajax 框架早已包含了处理 JSON 数据的能力，例如 Prototype（一个流行的 JavaScript 库：http://prototypejs.org）提供了 evalJSON() 方法，能直接将服务器返回的 JSON 文本变成一个 JavaScript 变量：
new Ajax.Request("http://url", {
method: "get",
onSuccess: function(transport) {
var json = transport.responseText.evalJSON();
// TODO: document.write(json.xxx);
}
});
服务器端输出 JSON 格式数据
下面我们讨论如何在服务器端输出 JSON 格式的数据。以 Java 为例，我们将演示将一个 Java 对象编码为 JSON 格式的文本。
将 String 对象编码为 JSON 格式时，只需处理好特殊字符即可。另外，必须用 (") 而非 (') 表示字符串：
static String string2Json(String s) {
StringBuilder sb = new StringBuilder(s.length()+20);
sb.append('\"');
for (int i=0; i<s.length(); i++) {
char c = s.charAt(i);
switch (c) {
case '\"':
sb.append("\\\"");
break;
case '\\':
sb.append("\\\\");
break;
case '/':
sb.append("\\/");
break;
case '\b':
sb.append("\\b");
break;
case '\f':
sb.append("\\f");
break;
case '\n':
sb.append("\\n");
break;
case '\r':
sb.append("\\r");
break;
case '\t':
sb.append("\\t");
break;
default:
sb.append(c);
}
}
sb.append('\"');
return sb.toString();
}
将 Number 表示为 JSON 就容易得多，利用 Java 的多态，我们可以处理 Integer，Long，Float 等多种 Number 格式：
static String number2Json(Number number) {
return number.toString();
}
Boolean 类型也可以直接通过 toString() 方法得到 JSON 的表示：
static String boolean2Json(Boolean bool) {
return bool.toString();
}
要将数组编码为 JSON 格式，可以通过循环将每一个元素编码出来：
static String array2Json(Object[] array) {
if (array.length==0)
return "[]";
StringBuilder sb = new StringBuilder(array.length << 4);
sb.append('[');
for (Object o : array) {
sb.append(toJson(o));
sb.append(',');
}
// 将最后添加的 ',' 变为 ']':
sb.setCharAt(sb.length()-1, ']');
return sb.toString();
}
最后，我们需要将 Map<String, Object> 编码为 JSON 格式，因为 JavaScript 的 Object 实际上对应的是 Java 的 Map<String, Object> 。该方法如下：
static String map2Json(Map<String, Object> map) {
if (map.isEmpty())
return "{}";
StringBuilder sb = new StringBuilder(map.size() << 4);
sb.append('{');
Set<String> keys = map.keySet();
for (String key : keys) {
Object value = map.get(key);
sb.append('\"');
sb.append(key);
sb.append('\"');
sb.append(':');
sb.append(toJson(value));
sb.append(',');
}
// 将最后的 ',' 变为 '}':
sb.setCharAt(sb.length()-1, '}');
return sb.toString();
}
为了统一处理任意的 Java 对象，我们编写一个入口方法 toJson(Object)，能够将任意的 Java 对象编码为 JSON 格式：
public static String toJson(Object o) {
if (o==null)
return "null";
if (o instanceof String)
return string2Json((String)o);
if (o instanceof Boolean)
return boolean2Json((Boolean)o);
if (o instanceof Number)
return number2Json((Number)o);
if (o instanceof Map)
return map2Json((Map<String, Object>)o);
if (o instanceof Object[])
return array2Json((Object[])o);
throw new RuntimeException("Unsupported type: " + o.getClass().getName());
}
我们并未对 Java 对象作严格的检查。不被支持的对象（例如 List）将直接抛出 RuntimeException 。此外，为了保证输出的 JSON 是有效的，Map<String, Object> 对象的 Key 也不能包含特殊字符。细心的读者可能还会发现循环引用的对象会引发无限递归，例如，精心构造一个循环引用的 Map，就可以检测到 StackOverflowException：
@Test(expected=StackOverflowError.class)
public void testRecurrsiveMap2Json() {
Map<String, Object> map = new HashMap<String, Object>();
map.put("key", map);
JsonUtil.map2Json(map);
}
好在服务器处理的 JSON 数据最终都应该转化为简单的 JavaScript 对象，因此，递归引用的可能性很小。
最后，通过 Servlet 或 MVC 框架输出 JSON 时，需要设置正确的 MIME 类型（application/json）和字符编码。假定服务器使用 UTF-8 编码，则可以使用以下代码输出编码后的 JSON 文本：
response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
pw.write(JsonUtil.toJson(obj));
pw.flush();
小结
JSON 已经是 JavaScript 标准的一部分。目前，主流的浏览器对 JSON 支持都非常完善。应用 JSON，我们可以从 XML 的解析中摆脱出来，对那些应用 Ajax 的 Web 2.0 网站来说，JSON 确实是目前最灵活的轻量级方案。
* 16:29
* 浏览 (456)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-18
缩略显示
IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结
今天测试代码时，发现不少IE可以运行的ajax，但在FF中报错。
IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下：
1.兼容firefox的 outerHTML，FF中没有outerHtml的方法。
if (window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function() {
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for (var i=0;i<attrs.length;i++) {
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
}
2.集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:
<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>
9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
10.event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以下面的frame为例：
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：
<body >
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body >
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
15. 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();
有人说标准是：
document.body.onload=new Function('inject()');
16. firefox与IE(parentElement)的父元素的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
18.innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';
20. IE,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
24. CSS圆角
IE：不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
25. CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
* 17:04
* 浏览 (878)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-18
缩略显示
AJAX数据加载页面
<div id="divprogressbar"
style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: #FFFFFF; filter: alpha ( opacity = 80 ); z-index: 100">
<div style="text-align: center; padding-top: 200px">
<table align="center" border="1" width="30%" cellspacing="0"
cellpadding="4" style="border-collapse: collapse" bgcolor="#FFFFEC"
height="87">
<tr>
<td bgcolor="#3399FF" style="font-size: 12px;" height="24"
align="center" class="menubar2" style="color: #0000ff;">
数据正在载入中
</td>
</tr>
<tr>
<td style="font-size: 12px; line-height: 200%" align="center">
页面正在载入数据中.请耐心等待......
<marquee style="border: 1px solid #000000" direction="right"
width="300" scrollamount="5" scrolldelay="10" bgcolor="#F0F0F0">
<table cellspacing="1" cellpadding="0">
<tr height=8>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
</tr>
</table>
</marquee>
</td>
</tr>
</table>
</div>
</div>
* 10:32
* 浏览 (1056)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-15
缩略显示
仿Google首页搜索自动补全
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 自动完成功能(优化版)</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
var highlightindex = -1;//表示当前高亮节点
var timeoutId;
$(document).ready(function() {
var wordInput = $("#word");//文本框
var wordInputOffset = wordInput.offset();//获得文本框位置
$("#auto").hide().css("border", "1px black solid").css("position", "absolute")
.css("top", wordInputOffset.top + wordInput.height() + 5 + "px")
.css("left", wordInputOffset.left + "px").width(wordInput.width() + 3 + "px");
wordInput.keyup(function(event) {
//处理文本框中的键盘事件
//如果输入字母，将文本框中最新信息发送给服务器
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;//获得键值
if (keyCode == 27) {
var wordText = $("#word").val();
autoHide();
wordInput.text(wordText);
}
else {
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { //8对应退格键，46对应删除键
var wordText = $("#word").val();//获得文本框中的内容
var autoNode = $("#auto");
if (wordText != "") {
clearTimeout(timeoutId);//对上次未完成的延时操作进行取消
//延时操作，减少与服务器的交互次数，延时500ms，防止用户操作过快
timeoutId = setTimeout(function() {
$.post("AutoCompleteServlet", {word:wordText}, function(data) {//发送数据，第二项是属性名对应属性值
var jqueryObj = $(data);//将dom对象data转换成jQuery的对象
var wordNodes = jqueryObj.find("word");//找到所有word节点
autoNode.html("");
wordNodes.each(function(i) { //i是索引，用来给id赋值
var wordNode = $(this);//获取单词内容
var newDivNode = $("<div>").attr("id", i).css("backgroundColor", "white");
newDivNode.html(wordNode.text()).appendTo(autoNode);//新建div节点，加入单词内容
//增加鼠标进入事件，高亮节点
newDivNode.mouseover(function() {
//将原来高亮的节点取消高亮
if (highlightindex != -1) {
$("#auto").children("div").eq(highlightindex)
.css("backgroundColor", "white");
}
//记录新的高亮索引
highlightindex = $(this).attr("id");
$(this).css("backgroundColor", "#3366CC").css("cursor","pointer");
});
//增加鼠标移出事件，取消节点高亮
newDivNode.mouseout(function() {
if (keyCode == 13) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -1) {
lightEventHide();
highlightindex = -1;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
autoHide();
$("#word").get(0).blur();//让文本框失去焦点
}
//取消鼠标移出节点的高亮
//$(this).css("backgroundColor", "white");
}
}
);
//增加鼠标点击事件,可以进行补全
newDivNode.click(function() {
//取出高亮节点的文本内容
var comText = $(this).text();
autoHide();
highlightindex = -1;
//文本框内容变为高亮节点内容
$("#word").val(comText);
});
});
//添加单词内容到弹出框
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
highlightindex = -1;//弹出框隐藏，高亮节点索引设成-1
}
}, "xml");
}, 300);
}
else
{
autoNode.hide();
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) { //判断是否输入的是向上38向下40按键
if (keyCode == 38) {
var autoNodes = $("#auto").children("div").css("background-color", "white");
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex--;
} else {
lightEvent();
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
highlightindex = autoNodes.length - 1;//如果改变索引值后index变成-1，则将索引值指向最后一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
if (keyCode == 40) {
var autoNodes = $("#auto").children("div");
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css("background-color", "white");
}
highlightindex++;
if (highlightindex == autoNodes.length) {
highlightindex = 0;//如果改变索引值等于最大长度，则将索引值指向第一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
} else if (keyCode == 13) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -1) {
lightEventHide();
highlightindex = -1;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
$("#auto").hide();
$("#word").get(0).blur();//让文本框失去焦点
}
//下拉框没有高亮
}
}
}
)
;
$("input[type='button']").click(function() {
alert("文本框中的[" + $("#word").val() + "]被提交了");
});
});
function lightEventHide(){
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function lightEvent(){
var comText = $("#auto").children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function autoHide(){
$("#auto").hide();
}
</script>
<h3>
<center>施杨 仿google自动补全(jQuery优化版)</center>
</h3>
<br />
<table align="center">
<tr><td>
<input type="text" id="word" maxlength=2048 size=55 />
<br/>
<td></tr>
<tr><td align="center">
<input type="button" value="shiyang 搜索"/>
</td></tr>
</table>
<br />
<div id="auto"></div>
</body>
</html>
* 20:18
* 浏览 (1377)
* 评论 (2)
* 分类: AJAX
* 收藏Spinner
2009-02-15
缩略显示
JSON LIB 日期转换
public class Person {
private String name;
private Date birthday;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public Date getBirthday() {
return birthday;
}
}
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import net.sf.ezmorph.object.DateMorpher;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.util.JSONUtils;
/**
* @author <a href="mailto:wang-yu@msn.com">WangYu</a></br>
* @version 1.0 <br>
* @since JDK 1.6.0.12 <br>
*/
public class JsonUtil {
/**页面传至后台时，json数据在request的参数名称*/
public final static String JSON_ATTRIBUTE = "json";
public final static String JSON_ATTRIBUTE1 = "json1";
public final static String JSON_ATTRIBUTE2 = "json2";
public final static String JSON_ATTRIBUTE3 = "json3";
public final static String JSON_ATTRIBUTE4 = "json4";
/**
* 从一个JSON 对象字符格式中得到一个java对象，形如：
* {"id" : idValue, "name" : nameValue, "aBean" : {"aBeanId" : aBeanIdValue, ...}}
* @param object
* @param clazz
* @return
*/
public static Object getDTO(String jsonString, Class clazz){
JSONObject jsonObject = null;
try{
setDataFormat2JAVA();
jsonObject = JSONObject.fromObject(jsonString);
}catch(Exception e){
e.printStackTrace();
}
return JSONObject.toBean(jsonObject, clazz);
}
/**
* 从一个JSON 对象字符格式中得到一个java对象，其中beansList是一类的集合，形如：
* {"id" : idValue, "name" : nameValue, "aBean" : {"aBeanId" : aBeanIdValue, ...},
* beansList:[{}, {}, ...]}
* @param jsonString
* @param clazz
* @param map 集合属性的类型 (key : 集合属性名, value : 集合属性类型class) eg: ("beansList" : Bean.class)
* @return
*/
public static Object getDTO(String jsonString, Class clazz, Map map){
JSONObject jsonObject = null;
try{
setDataFormat2JAVA();
jsonObject = JSONObject.fromObject(jsonString);
}catch(Exception e){
e.printStackTrace();
}
return JSONObject.toBean(jsonObject, clazz, map);
}
/**
* 从一个JSON数组得到一个java对象数组，形如：
* [{"id" : idValue, "name" : nameValue}, {"id" : idValue, "name" : nameValue}, ...]
* @param object
* @param clazz
* @return
*/
public static Object[] getDTOArray(String jsonString, Class clazz){
setDataFormat2JAVA();
JSONArray array = JSONArray.fromObject(jsonString);
Object[] obj = new Object[array.size()];
for(int i = 0; i < array.size(); i++){
JSONObject jsonObject = array.getJSONObject(i);
obj[i] = JSONObject.toBean(jsonObject, clazz);
}
return obj;
}
/**
* 从一个JSON数组得到一个java对象数组，形如：
* [{"id" : idValue, "name" : nameValue}, {"id" : idValue, "name" : nameValue}, ...]
* @param object
* @param clazz
* @param map
* @return
*/
public static Object[] getDTOArray(String jsonString, Class clazz, Map map){
setDataFormat2JAVA();
JSONArray array = JSONArray.fromObject(jsonString);
Object[] obj = new Object[array.size()];
for(int i = 0; i < array.size(); i++){
JSONObject jsonObject = array.getJSONObject(i);
obj[i] = JSONObject.toBean(jsonObject, clazz, map);
}
return obj;
}
/**
* 从一个JSON数组得到一个java对象集合
* @param object
* @param clazz
* @return
*/
public static List getDTOList(String jsonString, Class clazz){
setDataFormat2JAVA();
JSONArray array = JSONArray.fromObject(jsonString);
List list = new ArrayList();
for(Iterator iter = array.iterator(); iter.hasNext();){
JSONObject jsonObject = (JSONObject)iter.next();
list.add(JSONObject.toBean(jsonObject, clazz));
}
return list;
}
/**
* 从一个JSON数组得到一个java对象集合，其中对象中包含有集合属性
* @param object
* @param clazz
* @param map 集合属性的类型
* @return
*/
public static List getDTOList(String jsonString, Class clazz, Map map){
setDataFormat2JAVA();
JSONArray array = JSONArray.fromObject(jsonString);
List list = new ArrayList();
for(Iterator iter = array.iterator(); iter.hasNext();){
JSONObject jsonObject = (JSONObject)iter.next();
list.add(JSONObject.toBean(jsonObject, clazz, map));
}
return list;
}
/**
* 从json HASH表达式中获取一个map，该map支持嵌套功能
* 形如：{"id" : "johncon", "name" : "小强"}
* 注意commons-collections版本，必须包含org.apache.commons.collections.map.MultiKeyMap
* @param object
* @return
*/
public static Map getMapFromJson(String jsonString) {
setDataFormat2JAVA();
JSONObject jsonObject = JSONObject.fromObject(jsonString);
Map map = new HashMap();
for(Iterator iter = jsonObject.keys(); iter.hasNext();){
String key = (String)iter.next();
map.put(key, jsonObject.get(key));
}
return map;
}
/**
* 从json数组中得到相应java数组
* json形如：["123", "456"]
* @param jsonString
* @return
*/
public static Object[] getObjectArrayFromJson(String jsonString) {
JSONArray jsonArray = JSONArray.fromObject(jsonString);
return jsonArray.toArray();
}
/**
* 把数据对象转换成json字符串
* DTO对象形如：{"id" : idValue, "name" : nameValue, ...}
* 数组对象形如：[{}, {}, {}, ...]
* map对象形如：{key1 : {"id" : idValue, "name" : nameValue, ...}, key2 : {}, ...}
* @param object
* @return
*/
public static String getJSONString(Object object) throws Exception{
String jsonString = null;
//日期值处理器
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.registerJsonValueProcessor(java.util.Date.class, new DateJsonValueProcessor());
if(object != null){
if(object instanceof Collection || object instanceof Object[]){
jsonString = JSONArray.fromObject(object, jsonConfig).toString();
}else{
jsonString = JSONObject.fromObject(object, jsonConfig).toString();
}
}
return jsonString == null ? "{}" : jsonString;
}
private static void setDataFormat2JAVA(){
//设定日期转换格式
JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(new String[] {"yyyy-MM-dd", "yyyy-MM-dd HH:mm:ss"}));
}
}
public class Test {
public static void main(String[] args) {
String personData = "{\"birthday\":\"1980/01/01\",\"name\":\"testname\"}";
JSONObject jsonPerson = JSONObject.fromObject(personData);
String[] dateFormats = new String[] {"yyyy/MM/dd"};
JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(dateFormats));
Person person = (Person)JSONObject.toBean(jsonPerson, Person.class);
System.out.println(person.getBirthday());
}
}
* 17:20
* 浏览 (1774)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-15
缩略显示
json lib
public class Test {
public static void main(String[] args) {
// 转化数组,集合
// 1.
boolean[] boolArray = new boolean[] { true, false, true };
JSONArray jsonArray1 = JSONArray.fromObject(boolArray);
System.out.println(jsonArray1);
/* [true,false,true] */
// 2.
List<String> list = new ArrayList<String>();
list.add("第一个");
list.add("第二个");
JSONArray jsonArray2 = JSONArray.fromObject(list);
System.out.println(jsonArray2);
/* ["第一个","第二个"] */
// 3.
JSONArray jsonArray3 = JSONArray.fromObject("['json','is','easy']");
System.out.println(jsonArray3);
/* ["json","is","easy"] */
// 转化对象,转化Map
Map<String, Object> map = new HashMap<String, Object>();
map.put("name", "json");
map.put("bool", Boolean.TRUE);
map.put("int", new Integer(1));
map.put("arr", new String[] { "a", "b" });
map.put("func", "function(i){return this.arr[i];}");
JSONObject json = JSONObject.fromObject(map);
System.out.println(json);
/*
* {"func":function(i){return
* this.arr[i];},"arr":["a","b"],"int":1,"bool":true,"name":"json"}
*/
// 转化Bean
Stock stock = new Stock();
stock.setId("000001");
stock.setName("浦发银行");
JSONObject jsonObject = JSONObject.fromObject(stock);
System.out.println(jsonObject);
/* {"id":"000001","name":"浦发银行","now":0,"today":0,"yesterday":0} */
// 从JSON到Beans//转化为动态bean
String myjson = "{name:\"json\",bool:true,int:1,double:2.2,function:function(a){return a;},array:[1,2]}";
JSONObject jsonObj = JSONObject.fromObject(myjson);
Object bean = JSONObject.toBean(jsonObj);
System.out.println(bean);
/*
* net.sf.ezmorph.bean.MorphDynaBean@16df84b[ {double=2.2, int=1,
* function=function(a){ return a; }, name=json, bool=true, array=[1,
* 2]} ]
*/
JSONObject json1 = new JSONObject(true);
XMLSerializer xmlSerializer2 = new XMLSerializer();
String xml = xmlSerializer2.write(json1);
System.out.println("xml:" + xml);
/*
* xml:<?xml version="1.0" encoding="UTF-8"?> <o null="true"/>
*/
JSONObject json2 = JSONObject
.fromObject("{\"name\":\"json\",\"bool\":true,\"int\":1}");
XMLSerializer xmlSerializer3 = new XMLSerializer();
String xml2 = xmlSerializer3.write(json2);
System.out.println("xml2:" + xml2);
/*
* xml2:<?xml version="1.0" encoding="UTF-8"?> <o><bool
* type="boolean">true</bool><int type="number">1</int><name
* type="string">json</name></o>
*/
JSONArray json3 = JSONArray.fromObject("[1,2,3]");
XMLSerializer xmlSerializer4 = new XMLSerializer();
String xml3 = xmlSerializer4.write(json3);
System.out.println("xml3:" + xml3);
/*
* xml3:<?xml version="1.0" encoding="UTF-8"?> <a><e type="number">1</e><e
* type="number">2</e><e type="number">3</e></a>
*/
}
}
* 16:04
* 浏览 (879)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-14
缩略显示
AJAX缓存
//URL地址的时间戳,骗过浏览器不读缓存
function convertURL(url) {
// 获取时间戳
var timestamp = (new Date()).valueOf();
// 将时间戳信息添加到url上
if (url.indexOf("?") > 0) {
url = url + "&t=" + timstamp;
} else {
url = url + "?t=" + timstamp;
}
}
* 16:46
* 浏览 (300)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-02-14
缩略显示
AjaxXMLHttpRequest
// 定义一个全局的XMLHttpRequest对象
var xmlHttpRequest;
function verify() {
var userName = document.getElementById("userName").value;
// 创建XMLHttpRequst对象
// 需要这对IE核其他类型的浏览器建立这个对象的不同方法写不同的代码
if (window.XMLHttpRequest) {
// 针对FireFox,Mozilla,Opera,Safari,IE7,IE8
xmlHttpRequest = new XMLHttpRequest();
// 针对某些特定版本的Mozilla浏览器的BUG进行修正
try {
if (xmlHttpRequest.overrideMimeType()) {
xmlHttpRequest.overrideMimeType("text/xml");
}
} catch (e) {
}
} else if (window.ActiveXObject) {
// 针对IE6,IE5.5,IE5
// 两个可以用于创建XMLHTTPRquest对象的控件名称,保存在一个js的数组中
// 排在前面的版本比价新
var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try {
// 取出一个控件名进行创建,如果创建成功就终止循环
// 如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
// 确认XMLHttpReques对象创建成功
if (!xmlHttpRequest) {
alert("XMLHttpRequest对象创建失败!!");
return;
} else {
// 2.注册回调函数
// 注册毁掉函数时,只需要函数名不需要加括号
// 我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
xmlHttpRequest.onreadystatechange = callback;
// 3.设置连接信息
// 第一个参数表示http的请求方式,支持所有的饿http的请求方式,主要使用get核post
// 第二个参数表示请求的url路径
// 第三个参数表示采用同步还是异步,true表示异步
//xmlHttpRequest.open("GET", "AJAX?name=" + userName, true);
//POST方式请求的代码
xmlHttpRequest.open("POST","AJAX",true);
//POST方法需要自己设置http请求头
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4发送数据,开始与服务器端交互
// 同步方式下,send这句话会在服务器端数据回来之后执行
// 异步方式下,send这句话会立即完成执行
//get方式的send方法参数为空
//xmlHttpRequest.send(null);
//post方式的send方法参数为你要传递的url参数
xmlHttpRequest.send("name="+userName);
}
}
// 5.回调函数
function callback() {
// 判断对象的状态是否交互完成
if (xmlHttpRequest.readyState == 4) {
// 判读http的交互是否成功
if (xmlHttpRequest.status == 200) {
// 获取服务器端的返回数据
var responseText = xmlHttpRequest.responseText;
// 将数据显示在页面上
// 通过dom方式找到dom对应的节点
var divResult = document.getElementById("result");
divResult.innerHTML = responseText;
}
}
}
* 14:22
* 浏览 (220)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-01-12
缩略显示
AJAX异步通信技术学习笔记
AJAX是一中运用JavaScript和可扩展编辑语言（XML），在网络浏览器和服务器之间传送或接收数据的技术。
AJAX的工作原理相当与在用户和服务器之间加了一个中间层，使用户请求与服务器响应异步化。这样还可以把以前的一些服务器负担的工作转交给客户端，利用客户端闲置的处理能力来处理，减轻服务器和宽带的负担。
AJAX是WEB2.0的核心之一．AJAX技术运用与浏览器中，使向服务器索取网页的部分信息成为可能．
XMLHttpRequest对象
XMLHttpRequest提供客户端同HTTP服务器异步通信的协议．通过这个协议，AJAX可以使页面象桌面程序一样同服务器端进行数据层面的交换，而不必每次都刷新页面，也不用每次都将数据处理的工作都交给服务器来做，这样既减轻了服务器负担又加快了响应速度，缩短了用户等待的时间．
XMLHttpRequest对象的方法：
Abort() 停止当前请求
getAllResponseHeaders() 返回HTTP请求的所有响应头部的键/值字符串
getResponseHeader("header") 返回指定头部属性的字符串值
Open("method", "url") 建立对服务器的调用。Method参数可以是GET POST PUT, url参数可以是相对URL或绝对对 URL
Send(content) 向服务器发送请求
setRequestHeader("header","value") 为指定头部属性设置指定值
XMLHttpRequest对象的属性：
Onreadystatechange 状态改变的时间触发器，通常绑定一个JavaScript 函数，每当状态发生改变时，就调用该函数
readyState 请求的状态，有5个可取值：
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 从服务器返回的文本形式的响应内容
responseXML 从服务器返回的兼容DOM的XML文档对象
Status 从服务器返回的状态码，例如404="文件找不到"
200 = "成功"
statusText 从服务器返回的状态文本信息，例如OK或Not Found(未找到)
<script language = "javascript">
//定义一个将指向XMLHttpRequest对象的变量
var xmlHttp;
//定义一个函数用于创建XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//定义一个函数用于启动与服务器的异步同信
function begin(){
createXMLHttpRequest(); //调用createXMLHttpRequest函数
xmlHttp.onreadystatechange = processor; //将事件触发器绑定到 processor上
xmlHttp.open("GET", "test.xml"); //使用GET方法建立对服务器资 源test.xml的一个异步调用
xmlHttp.send(null); //向服务器发送请求
}
//定义一个状态处理函数用于处理状态触发器的状态改变
function processor(){
//如果处理请求完成
if(xmlHttp.readyState == 4){
//如果服务器返回状态为成功
if(xmlHttp.status = 200){
//将从服务器返回的内容报告给用户
alert("从服务器返回的内容为：" + xmlHttp.responseText);
}
}
}
</script>
DOM是面向HTML和XML文档的一组API，它为文档提供了结构化的表示，并定义了如何通过脚本（JavaScript）来访问文档结构。如果没有DOM，JavaScript根本就不存在Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，可通过JavaScript来访问这些元素的属性和方法，实现动态编辑页面的功能。
这里所说的DOM是符合W3C标准的文档对象模型，它以树型结构表示HTML和XML文档，并定义可操作这个树及其节点的一系列方法和属性。在网络浏览器端，通过JavaScript利用DOM提供的API来操作HTML和XML文档。
1.操作HTML文档
HTML文档各个节点在DOM中被视为个种类型的Node对象.而且每个 Node对象都有自己的属性和方法,通常利用这些属性和方法来遍历或动态编辑整个树。
操作HTML文档的常用DOM方法：
getElementById(isIDValue) 返回文档中具有指定id属性的元素
getElementByTabName(isTagName) 返回当前元素中有指定标记名的子元素 的数组
appendChild(childNode) 在当前节点的childNodes[]组中增加一个 节点childNode
cloneNode(false | true) false表示仅复制当前节点；true表示复制 当前节点以及它的所有子孙节点
hasChildNodes() 判断当前节点是否拥有子节点，有则返回 true
insertBefore(newNode,targetNode) 将节点newNode作为当前元素的子节点 插到targetNode元素前面
removeChild(childNode) 从文档树中删除子节点childNode
resplaceChild(newNode,oldNode) 将节点oldNode替换为节点newNode
getAttribute(sAttrName) 返回指定属性的字符串值
setAttribute(sAttriName, vAttrValue) 把指定的属性设置为镇定的字符串值，如 果该属性不存在则添加一个新属性
removeAttribute(sAttrName) 从元素中删除属性sAttrName
操作HTML文档的常用DOM属性：
Attributes 如果该节点是一个Element,则以NamedNodeMap 形式返回该元素的属性
childNodes 以Node[]的形式存放当前节点的子节点，如果没 有子节点，则返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点，如 果没有子节点，则为null
lastChild 以Node的形式返回当前节点的最后一个节点，如 果没有子节点，则为null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点， 如果没有这样的节点，则返回null
nodeName 节点的名字，Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点，如果没 有父亲节点，则为null
previoiusSibling 以Node的形式返回紧挨当前节点，位于它之前的 兄弟节点。如果没有这样的节点，则返回null
操作XML文档
在数据的表示和交换方面XML文档更具优势，针对XML的访问和操作，DOM也用样提供了一系列的API。利用这些API，可方便地从XML文档中读取数据信息，动态创建展示这些数据信息的HTML页面。
操作XML文档，通常遵循以下4个步骤：
载入整个XML文档
从XML文档中提取数据信息
对提取的信息进行加工处理
创建包含处理结果的HTML页面展示给用户
遍历XML文档的常用DOM方法:
getElementById(sIDValue) 返回文档中具体指定id属性的元素
getElementByTabName(sTagName) 返回当前元素中有指定标记名的子元素的数 组
hasChildNodes() 判断当前节点是否拥有子节点,有则返回true getAttribute(sAttrName) 返回指定属性的字符串值
操作XML文档的常用DOM属性:
childNodes 以Node[]的形式存放当前节点的子节点,如果没有子节点,则 返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点,如果没有子 节点,则为null
lastChild 以Node的形式返回当前节点的最后一个子节点,如果没有 这样的节点,则返回null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点， 如果没有这样的节点，则返回null
nodeName 节点的名字，Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点，如果没 有父亲节点，则为null
previoiusSibling 以Node的形式返回紧挨当前节点，位于它之前的 兄弟节点。如果没有这样的节点，则返回null
* 11:25
* 浏览 (498)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2009-01-07
缩略显示
JSON数据调用
JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
JSON的规则很简单： 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。具体细节参考http://www.json.org/json-zh.html
举个简单的例子：
function showJSON() {
var user =
{
"username":"andy",
"age":20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
}
这表示一个user对象，拥有username, age, info, address 等属性。
同样也可以用JSON来简单的修改数据，修改上面的例子
function showJSON() {
var user =
{
"username":"andy",
"age":20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
user.username = "Tom";
alert(user.username);
}
JSON提供了json.js包，下载[url]http://www.json.org/json.js [/url]后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。
function showCar() {
var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");
alert(carr.toJSONString());
}
function Car(make, model, year, color) {
this.make = make;
this.model = model;
this.year = year;
this.color = color;
}
可以使用eval来转换JSON字符到Object
function myEval() {
var str = '{ "name": "Violet", "occupation": "character" }';
var obj = eval('(' + str + ')');
alert(obj.toJSONString());
}
或者使用parseJSON()方法
function myEval() {
var str = '{ "name": "Violet", "occupation": "character" }';
var obj = str.parseJSON();
alert(obj.toJSONString());
}
下面使用prototype写一个JSON的ajax例子。
先写一个servlet (我的是servlet.ajax.JSONTest1.java)就写一句话
response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");
再在页面中写一个ajax的请求
function sendRequest() {
var url = "/MyWebApp/JSONTest1";
var mailAjax = new Ajax.Request(
url,
{
method: 'get',
onComplete: jsonResponse
}
);
}
function jsonResponse(originalRequest) {
alert(originalRequest.responseText);
var myobj = originalRequest.responseText.parseJSON();
alert(myobj.name);
}
prototype-1.5.1.js中提供了JSON的方法，String.evalJSON(), 可以不使用json.js, 修改上面的方法
function jsonResponse(originalRequest) {
alert(originalRequest.responseText);
var myobj = originalRequest.responseText.evalJSON(true);
alert(myobj.name);
}
JSON还提供了java的jar包 http://www.json.org/java/index.html API也很简单，下面举个例子
在javascript中填加请求参数
function sendRequest() {
var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");
var pars = "car=" + carr.toJSONString();
var url = "/MyWebApp/JSONTest1";
var mailAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: jsonResponse
}
);
}
使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改servlet添加JSON的处理(要使用json.jar)
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {
String s3 = request.getParameter("car");
try {
JSONObject jsonObj = new JSONObject(s3);
System.out.println(jsonObj.getString("model"));
System.out.println(jsonObj.getInt("year"));
} catch (JSONException e) {
e.printStackTrace();
}
response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");
}
同样可以使用JSONObject生成JSON字符串，修改servlet
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {
String s3 = request.getParameter("car");
try {
JSONObject jsonObj = new JSONObject(s3);
System.out.println(jsonObj.getString("model"));
System.out.println(jsonObj.getInt("year"));
} catch (JSONException e) {
e.printStackTrace();
}
JSONObject resultJSON = new JSONObject();
try {
resultJSON.append("name", "Violet")
.append("occupation", "developer")
.append("age", new Integer(22));
System.out.println(resultJSON.toString());
} catch (JSONException e) {
e.printStackTrace();
}
}
* 07:51
* 浏览 (469)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2008-06-16
缩略显示
Ajax Libraries
Ajax Libraries
Each library is available via both google.load(), and directly via <script/> tag. The google.load() approach offers the most functionality and performance. In the sections that follow, we document all of the libraries that are available. For each library we list it's name (as in the name used in google.load(), all of the versions that we have on hand for the library, etc.
jQuery
name: jquery
versions: 1.2.3, 1.2.6
load request: google.load("jquery", "1.2.6");
extras: uncompressed:true, e.g., google.load("jquery", "1.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
site: http://jquery.com/
note: 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild...
prototype
name: prototype
versions: 1.6.0.2
load request: google.load("prototype", "1.6.0.2");
path: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js
site: http://www.prototypejs.org/
script.aculo.us
name: scriptaculous
versions: 1.8.1
load request: google.load("scriptaculous", "1.8.1");
path: http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js
site: http://script.aculo.us/
note: this library depends on prototype. before loading this module, you must load prototype e.g.:
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
mootools
name: mootools
versions: 1.11
load request: google.load("mootools", "1.11");
extras: uncompressed:true, e.g., google.load("mootools", "1.11", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js
path(u): http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js
site: http://mootools.net/
dojo
name: dojo
versions: 1.1.1
load request: google.load("dojo", "1.1.1");
extras: uncompressed:true, e.g., google.load("dojo", "1.1.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js
path(u): http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js.uncompressed.js
site: http://dojotoolkit.org/
* 21:29
* 浏览 (433)
* 评论 (0)
* 分类: AJAX
* 收藏Spinner
2008-05-08
缩略显示
JSP中使用AJAX示例：分别将结果提交为STRUTS，SERVLET,WEBWORK的不同操作方
我原先刚开始学AJAX的时候，忘了从什么地方拉下来的一篇文章，不过，如果没有AJAX基础，最好不看这篇示例，因为你肯定看不懂，因为这个示例页不能够给你立即看到立即实现的效果，你应该先去看一个最简单的示例，怎么样用AJAX去把一个文本文件的内容读回来。然后再回来看这篇文章，这里你可以看到使用AJAX分别把内容提交到STRUTS,SERVLET,WEBWORK，是怎么样操作的。我在看这篇文章以前，都是把一个JSP的处理请求，发给另外一个JSP页面处理，并在那个页面理采用BEAN的方式，虽然我是采用的STRUTS结构，但是却不知道可以直接将内容提交到ACTION，这样就可以减少一道工序了，人笨就是这样。
写这个页面的朋友是谁，我真的忘了，不过，还是非常感谢。示例就自己看吧：
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
ajax
</title>
</head>
<body bgcolor="#ffffff">
<h1>
<input name="username" type="text" maxlength="20" />
<input id="chk-name-btn" type="button" value="检测帐号" onclick="testName('<%=request.getContextPath()%>')" />
<div id="view_name"></div>
</h1>
</body>
</html>
<script language="javascript">
if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest=function() {
return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
};
}//取得XMLHttpRequest对象
function testName(path){
//path是取得系统路径
var view_name=document.getElementById("view_name");
var req=new XMLHttpRequest();
分享到：
发表评论
相关推荐
java对象转json问题.rar
json与labview常见相互转化，能解决大多json问题
今天小编就为大家分享一篇关于MySQL插入json问题，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
jQuery的json问题。json定义标准。Ie6中getjson()与其他浏览器的兼容性的解决方案
从服务端收到的json中有中文 然后JsonData jd = JsonMapper.ToObject(strJson); json中如有中文 会出现\uXXXX\uXXXX等 我改了下 上传了能解决此问题的litjson版本
flutter json处理， json 嵌套， 列表 ，对象。简易的json和类实体的转换。通俗易懂，不需要其他插件即可处理相对复杂的类和列表的 json问题。
Json格式的数据阅读性很差，如果数据量大的话再阅读方面会十分困难，有了这软件，问题就解决了，能够快速把Json字符串排列规则的树结构，支持对JSON字符串进行格式化显示，支持粘贴数据并进行可视化展示以及自动格式...
摩纳哥JSON 摩纳哥编辑器的JSON语言插件。...请在有关monaco-json问题。 正在安装 此npm模块捆绑并分发在npm模块中。 发展 git clone https://github.com/Microsoft/monaco-json npm install . 用
下面小编就为大家带来一篇读写json中文ASCII乱码问题的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
.Net2.0处理JSON问题最精简代码，Newtonsoft.Json太大了，希望这个对大家有帮助。
php解决json中文问题，使用urlencode()进行编码转换解决
经过尝试，只需要在$.ajax中加入 contentType: “application/json; charset=utf-8″选项就可以了，这是因为在.net 3.5以后要对contentType进行检查，所以仅仅指定dataType的话.net就不会返回JSON了，那么我们的请求...
问题分析： Python下json手法的json在打印查看时，括号和数据都没有展开，查看起来比较困难。 解决方案： 使用json.dumps的separators设置，将数据展开格式化打印。 解决步骤： data = json.dumps(data, sort_keys=...
解决JSON.parse()在IE7下不兼容（ JSON在IE下未定义）问题。 直接引用就可以。 摘要必须大于100个字节！摘要必须大于100个字节！
但是在使用过程中存在着一个问题，如果数据不存在需要判空的逻辑，这种判空逻辑会扩散在代码的各个角落，很容易犯错。 本文就是为了将这个变化点收缩到一处，便于控制。设计中也分别对JObject类和JArray类进行了...
您是否有想要讨论的JKI JSON问题，想法或挑战？ 加入发生的对话。 JKI JSON JKI JSON是用于将LabVIEW数据展平为JSON字符串以及将JSON字符串展平为LabVIEW数据的库。 该库通过强大的功能扩展了LabVIEW的本机JSON序列...
主要介绍了Java Http请求传json数据乱码问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
序列化为json方案 将Sequelize模型转换为以下JSON模式变量（使用策略模式）： JSON Schema Draft-07- OpenAPI 3.0- 与Sequelize版本4、5和6兼容。 主要目标 易懂的代码，高度可维护 有效模式（由和验证器强制执行）...
PB调用http、api，PB解析json; PB调用http、api，PB解析json; PB调用http、api，PB解析json; PB调用http、api，PB解析json; PB调用http、api，PB解析json; PB调用http、api，PB解析json; PB调用http、api，PB解析...