javascript 的使用

近期的项目需要实现前台的流程图绘制的功能，由于完全没有接触过相关的技术，所以一直没有头绪不知道该用什么技术去实现如何去实现。在网站上，我也查到了很多关于在线流程图的的网站，Tersus，Gliffy， Flowchart等 都是很不错的网站。

由此我了解到大多是使用了javascript ,ajax,jquery的技术，所以我就开始去看看这方面的书籍。javascript主要是提供一些网页上的效果，jquery则是用javascript写的一些库其中实现了很多功能（就包括我的流程图绘制的功能），ajax是属于动态的局部地和后台进行交互的技术。

虽然还是刚刚接触，但是感觉有了jquery以后网页的效果就变得更加绚并且调用相当简单。

因为还是新手，所以没有很多总结的东西。我就将一些比较有用的代码贴出来。（我使用的是jsp+jquery）

推荐使用火狐中的firebug来调试js

一、js和servlet之间的交互

js

Java代码  

1. function addItem() {  
2.     with (document.getElementById("orderForm")) {  
3.         var product =document.getElementsByName("name");  
4.         for(var i=0;i<product.length;i++)  
5.         {  
6.           alert(product[i].value);  
7.         }  
8.           
9.         action = "order.do?method=add&product="+product;  
10.         method = "post";  
11.         submit();  
12.     }  
13. }  

servlet

Java代码  

1. String object[] = request.getParameterValues("product");  
2.         for(int i=0;i<object.length;i++)  
3.         {  
4.         System.out.println(" 获取的数组值为" +object[i]);  
5.         }  

servlet也是通过getParameter来获取参数的

向servlet传参需要使用post模式
用js触发servlet并传参
function dispatchServlet(）{
     var tmp = document.createElement("form");
     var action = "http://.../servlet.do?param1=aaa&param2=bbb";
     tmp.action = action;
     tmp.method = "post";
     document.body.appendChild(tmp);
     tmp.submit();
     return tmp;
}
servlet.do?param1=aaa&param2=bbb";
”？“后面跟参数 [参数名称]=[参数值]
多个参数用 ”&“间隔开。
这样，在servlet中就可以的到参数
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");

二、json字符串的处理

使用json2.js 调用

将json转为字符串

var obj={a:[2,3],b:{m:[3,4],n:2} };
var jsonStr = JSON.stringify( obj );
alert(jsonStr);
//将显示 {"a":[2,3],"b":{"m":[3,4],"n":2}}

将字符串转换为json

var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
alert(typeof(cToObj));

三、js中的数组使用

针对这种类型的字符串的处理

{"nodes":{"demo_node_3":{"name":"Start","left":217,"top":25,"type":"start","width":24,"height":24},"demo_node_4":{"name":"Add","left":74,"top":152,"type":"chat","width":86,"height":24},"demo_node_5":{"name":"branch","left":181,"top":88,"type":"fork","width":86,"height":24},"demo_node_8":{"name":"Sub","left":269,"top":152,"type":"chat","width":86,"height":24},"demo_node_11":{"name":"Combine","left":188,"top":230,"type":"join","width":86,"height":24},"demo_node_14":{"name":"end","left":230,"top":298,"type":"end","width":24,"height":24}}

var jsonStr = eval("("+json+")");
var nodes = jsonStr.nodes;
var nodearr = new Array();
for(var n  in nodes)
{
alert(nodes[n].name+n);
nodearr.push([n,nodes[n].name]);
}
var lines = jsonStr.lines;
var linesarr = new Array();
for(var l in lines)
{
linesarr.push([l,lines[l].name,lines[l].from,lines[l].to]);
}