AJAX的小应用 JS的HASH 传到后台 java

 

本来关于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 处理一小段

 

 

  function  createRequest()  ... {

  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  对象

 

通过下面的代码可以发送异步请求

 

  

function  printSubmit( template , dataArr, url )

  ... {

         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下

 

 

/**/ /*  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]+" ";

return _str;

}

 

 

就是这个东西了  功能和JAVA 的差不多  看看就行  .我需要传递的是一个  hash的 数组给后台

然后变成一个 hash    如果重复的值  变成一个数组   (  就是 KEY  = ARRAY 这种感觉)

 

然后我做了一个

 

 

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;

}

 

这个就是把一个HASH变成 一个我需要的POST 格式  (学的标准HTTP 没有什么新意)

 

然后数组的处理 我用

 

function  toPostString( infoArr )    // 进来的是一个 hashMap  或者一个 HashMap 的数组

  ... {

         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  hash =   new  HashMap();

    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 调用了

 

HttpServletRequest request  如参可以直接把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