本来关于AJAX的传递我是一直在用人家写好的东西.偶尔自己会使用下prototype处理下.结果这次因为一个特别的东西和我们平时用的东西不太一样,而整个重新修改原来的东西时间也是不允许的.
我需要的功能 十分的简单 就是把这个 JS的hash 异步传递到后台也变成一个HashMap.曾经尝试使用一些现成的框架,后来发现功能总体来说,对我太多.如果用了反而增加我的负担,就本着自给自足的想法写了下,在这里分享下自己的经验(东西不见得很好,只是很基础的赶工货,大家看着玩就是了)
还是惯例介绍下 AJAX 的一些基础东西了,其实很多东西可以用prototype做.我很喜欢这个库,顶一个先!
Ajax 的定义
顺便说一下,Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发明的,按照 Jesse 的解释,这不是 个首字母缩写词。
下面是 Ajax 应用程序所用到的基本技术:
- HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
- JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
- DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
- 文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。
接着 代码实际点,来个AJAX 处理一小段
try ...{
request = new XMLHttpRequest();
} catch (trymicrosoft) ...{
try ...{
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) ...{
try ...{
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) ...{
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
}
这里 是为了处理不同版本的浏览器对XMLHttpRequest的支持,争来争去(参考浏览器战争)苦了我们
然后我们就有了一个 request 对象
通过下面的代码可以发送异步请求
... {
request= createRequest();
if (!request)
...{
alert("Error initializing XMLHttpRequest!");
return;
}
request.open("post", url, true);
//新建一个请求 第一个参数是 提交方式 post get delete ….
//第二个是你的请求 URL
// 第三个是 同步 还是 异步 true 异步(所谓的AJAX)
//false 就和平常的点个提交刷页面一样了
request.onreadystatechange = callback;
//回调函数, 作为AJAX 异步请求以后要做的事情就在callback
// 可以把得到的文本直接替换页面一些地方 也可以 通过得到的数据执行一些
// js函数 操纵DOM 处理页面 达到C/S 的效果
// 至于怎么处理DOM 我不说了
sendStr= "haha!" //本人不用hello world 都用 哈哈
request.send(send);
//如果是 post 作为HTTP 请求的报文就是用send 发送
// 这里可以发很多东西了,不过到底还是个字符串 只不过格式不同
// 可以是JSon XML 或者干脆和我一样 自己写个随便的东西解析
}
现在就算把东西 发出去了 怎么解析成了JAVA 的东西
解析的时候是用servlet 处理的,这里先把我用的东西JS 版本的HashMap拿出来show下
/*
/*-----------------------------------*/
function HashMap(po) ... {
this._sz=0;
if(po instanceof Object)...{
for(var k in po)
if(k)this._sz += 1;
this._oh = po;
}else this._oh = new Object();
}
HashMap.prototype.get = function (k) ... {
return this._oh[k];
}
HashMap.prototype.put = function (k,v,isRes) ... {
if(!k)return;
if(!isRes||!this.containsKey(k))this._oh[k]=v;
this._sz += 1;
}
HashMap.prototype.remove = function (k) ... {
if(!k)return;
for(var i=0;i<arguments.length;i++)...{
delete this._oh[arguments[i]];
this._sz -= 1;}
}
HashMap.prototype.clear = function () ... {
for(var k in this._oh)this.remove(k);
}
HashMap.prototype.putAll = function (m,isRes) ... {
if(!m)return;
for(var k in m._oh)
if(!isRes||!this.containsKey(k))this._oh[k]=m._oh[k];
}
HashMap.prototype.size = function () ... {
return this._sz;
}
HashMap.prototype.isEmpty = function () ... {
return (this._sz<1)?true:false;
}
HashMap.prototype.containsKey = function (key) ... {
return typeof(this._oh[key])!="undefined";
}
HashMap.prototype.keys = function () ... {
var a=[];for(var k in this._oh)a.push(k);
return a;
}
HashMap.prototype.toString = function () ... {
var _str="";
for(var k in this._oh)
_str += k +" = "+this._oh[k]+" ";
return _str;
}
就是这个东西了 功能和JAVA 的差不多 看看就行 .我需要传递的是一个 hash的 数组给后台
然后变成一个 hash 如果重复的值 变成一个数组 ( 就是 KEY = ARRAY 这种感觉)
然后我做了一个
var _str="";
var i=0;
for(var k in this._oh)
...{
i++;
_str += k + "="+this._oh[k];
if(this._sz==i)
return _str;
else
_str += "&";
}
return _str;
}
这个就是把一个HASH变成 一个我需要的POST 格式 (学的标准HTTP 没有什么新意)
然后数组的处理 我用
... {
var buf="";
if(infoArr instanceof HashMap)
buf = infoArr.toPostString();
else...{
if(infoArr instanceof Array)
...{
for( var i =0 ;i<infoArr.length ; i++)
...{
if(infoArr[i]instanceof HashMap
buf += infoArr[i].toPostString();
if(!i == infoArr.length-1)
buf += "&";
}
}
else...{}
}
return buf;
}
一个小例子 就这个效果
// 已经有了一个 request 对象
var hash1 = new HashMap();
var array = new Array(hash,hash1);
hash1.put( " key1 " , " 1 " );
hash1.put( " key2 " , " 2 " );
hash1.put( " key3 " , " 3 " );
hash.put( " key1 " , " 11 " );
hash.put( " key2 " , " 22 " );
hash.put( " key3 " , " 33 " );
request.send(toPostString(array) + " &hahah=hahah " );
然后后台能 在servlet 调用了
protected HashMap getParam(HttpServletRequest request) throws ServletException,
IOException ... {
StringBuffer strBuffer = new StringBuffer();
String line = null;
BufferedReader reader = null;
reader = request.getReader();
// 取得流 用来读取post的东西
while ((line = reader.readLine()) != null) ...{
strBuffer.append(line);
}
reader.close();
// 一行一行来 全部搞定 当然这里除了我传递的东西那种格式
//完全还可以是 XML Json 怎么处理自己开心
//下面就是我怎么把自己定的东西再变成JAVA 的HashMap
HashMap hash = new HashMap();
ArrayList<String> list;
String[] temp = strBuffer.toString().split("&");
for (int i = 0; i < temp.length; i++) ...{
temp[i].split("=");
if (!hash.containsKey(temp[i].split("=")[0])) ...{
list = new ArrayList<String>();
list.add(temp[i].split("=")[1]);
hash.put(temp[i].split("=")[0], list);
} else ...{
list = (ArrayList<String>) hash.get(temp[i].split("=")[0]);
list.add(temp[i].split("=")[1]);
}
}
System.out.println(hash.toString());
return hash;
}
然后的到一个 HASH 返回出去了,这个函数在处理标准的东西的时候 和 JAVA 自己带的那个 get差不多的.
然后如果要使用很全面的JS 格式 和JAVA的对应 可以用 buffola 和 JSON 2个库
buffola 用的是XML 可以把页面东西 直接传递到后台的JAVA 类 比较爽
更爽的是 能 很简单的解决 AJAX 调用JAVA 类
中间的servlet 什么都不用自己搞定了 我很喜欢的
JSON 一个JAVA 的包 用来解析 JSON结构的 这个更符合js的程序感觉
至于AJAX 的学习 我强烈推荐的网址 <http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/>
看完如果还不会AJAX 可以去重新学习基础的东西不用先研究AJAX
要去DOTA了 其实很多功能我也知道是不足的,很多地方还是有很大余地和漏洞的.这里权当学校的习作拿来瞅瞅就好了哈哈!
首先介绍一下我们使用的JS中的HASH,为了使用方便我们在JS里面做了一个 功能和java的HashMap基本一样的东西. 用起来很爽,也正是这个东西带来我的问题(这里就不说了.不是功能的原因是因为自己的其他地方做的一些问题.这个JS还是不错的)
/* hashMap
/*
/*-----------------------------------*/
function HashMap(po){
this._sz=0;
if(po instanceof Object){
for(var k in po)
if(k)this._sz += 1;
this._oh = po;
}else this._oh = new Object();
}
HashMap.prototype.get = function(k){
return this._oh[k];
}
HashMap.prototype.put = function(k,v,isRes){
if(!k)return;
if(!isRes||!this.containsKey(k))this._oh[k]=v;
this._sz += 1;
}
HashMap.prototype.remove = function(k){
if(!k)return;
for(var i=0;i<arguments.length;i++){
delete this._oh[arguments[i]];
this._sz -= 1;}
}
HashMap.prototype.clear = function(){
for(var k in this._oh)this.remove(k);
}
HashMap.prototype.putAll = function(m,isRes){
if(!m)return;
for(var k in m._oh)
if(!isRes||!this.containsKey(k))this._oh[k]=m._oh[k];
}
HashMap.prototype.size = function(){
return this._sz;
}
HashMap.prototype.isEmpty = function(){
return (this._sz<1)?true:false;
}
HashMap.prototype.containsKey = function(key){
return typeof(this._oh[key])!="undefined";
}
HashMap.prototype.keys = function(){
var a=[];for(var k in this._oh)a.push(k);
return a;
}
HashMap.prototype.toString = function(){
var _str="";
for(var k in this._oh)
_str += k +" = "+this._oh[k]+"/n";
return _str;
}
HashMap.prototype.toPostString = function(){
var _str="";
var i=0;
for(var k in this._oh)
{
i++;
_str += k + "="+this._oh[k];
if(this._sz==i)
return _str;
else
_str += "&";
}
return _str;
}
我需要的功能 十分的简单 就是把这个 JS的hash 异步传递到后台也变成一个hash