BlogJava-自知其无知-文章分类-Ajax

Ajax 请求结果返回了，那么请求后的结果在网页中的格式该如何处理？

CopyHoo — Mon, 15 Dec 2008 06:42:00 GMT

以前页面获取结果，然后再用 jstl 等标签直接在页面胡捣一翻，比如改变显示日期的格式：

但是现在用 Ajax 将结果返回了，页面的这些格式该如何处理呢？（是在页面处理数据格式呢？还是在 Controller 中直接格式化你要的字串，然后传递出来，那么页面仅仅负责 innerHTML 或者 Dom 的 append ?）
这个暂时不说（过一会儿讨论）。
现在项目本来就没有这个要求，所以自己的这一块得因为 ajax 而硬吞下去，原本页面的
在这里是不是可以用
innerHTML = ' ';
这样 innerHTML 到 jsp 页面后，浏览器会怎么解析这一段呢？是不是将当做文本字串呢？还是当做正常的标签？如果参照 innerHTML = 'hello world' 会使标签生效，也就是说会将 innerHTML 中的标签进行解析，那么 innerHTML = ' ' 也是可以被解析的？
于是就这么进行了尝试：

var div_comms = document.getElementById('comm');
                       var str = "";

                       for(var i=0;i<data_comms.length;i++){

                             /**//*




                              */
                             var time = '<div class="time"><fmt:formatDate pattern="yyyy-MM-dd" value="' + data_comms[i].comm_create_time + '" />div>';
                           /**//*

                                                                      text="${comm.comm_user }" append="" />
                                :


                            */
                            var user = '<h3 title="' + data_comms[i].comm_user + '"><y5k:substring length="12" text="' + data_comms[i].comm_user + '" append="" />:h3><br/>';
                            /**//*


                                                                     text="${comm.comm_content }" append="" />


                             */
                            var content = '<h2><y5k:substring length="18" text="' + data_comms[i].comm_user + '" append="" /> h2>';
                           /**//*

                            */
                           var hr = '<div class="hr_r">div>';
                           alert(time);
                            str = str + (time + user + content + hr);
                       }
                       div_comms.innerHTMl = str;
利用 FF 进行了查看，页面从 div 的id 为 comm 的位置开始，就一片空白了。。
为什么？
于是利用 FireBug 查看了 FF 的页面的源码，可以看到，我们 innerHTML 的东西其实都在页面中，但是很奇怪的是，没有显示出来？为什么？这就可能是 HTML 标签的错误的使用！！！就像你有的开始，但是没有结束标签一样，你的页面就会是空白。
于是看了我 inner 的几个标签。恍然大悟 (恍然大雾) :
var time = '<div class="time"><fmt:formatDate pattern="yyyy-MM-dd" value="' + data_comms[i].comm_create_time + '" />div>';
最后解释的结果为：
var time = '
';
也就是说 value= data_comms[i].comm_create_time 解释的结果为 1229321538000
我将

拷贝到 jsp 页面单独执行，结果就是这一句以及这一句下面的语句在页面上解释不出来。
于是我又试了

还是不行，只有查看 API 了。

=============================================================

标签用于格式化日期。它的属性和描述如表 9.23 所示：

表 9.23 　 formatDate> 标签属性和说明

属性

描述

value

格式化的日期，该属性的内容应该是 java.util.Date 类型的实例

type

格式化的类型

pattern

格式化模式

var

结果保存变量

scope

变量的作用范围

timeZone

指定格式化日期的时区

标签与、两组标签的关系密切。若没有指定 timeZone属性，也可以通过、两组标签设定的时区来格式化最后的结果。

=============================================================
这里有两个小细节：
1. 从 Contorller 传递过来的 Date 类型的值在 js 中进行获取的时候，会被自动进行 getTime() 而变为回去毫秒数。比如这里的 data_comms[i].comm_creat_time 就被解释为了类似 1229321538000 的结果。
2. fmt:formatDate 的 value 一定要是一个 java.util.Date 类型的参数。

CopyHoo 2008-12-15 14:42 发表评论

一个发送 Ajax 发送请求的例子

CopyHoo — Mon, 08 Dec 2008 14:25:00 GMT

function getXMLHTTPRequest(){
   var xRequest = null
   if (window.XMLHttpRequest){
     xRequest = new XMLHttpRequest() ;  // Mozilla / Safari
  }else if ( typeof ActiveXObject  != 'undefined'){
     xRequest = new ActiveObject("Microsoft.XMLHTTP");   // IE
  }
  return xRequest ;
}

同样的，我们使用对象检测来测试是否支持原生的 XMLHttpRequest 对象，如果不支持，再测试是否支持 Activex 对象。在两者都不支持的浏览器中，我们简单的放回 null 。

向服务器发送请求:(给它传递一个服务器页面的 URL,这个页面将生成数据)

function sendRequest(url,params,HttpMehtod){
  if( !HttpMethod ){
    HttpMethod = 'POST';
}
var req = getXMLHTTPRequest();
if(req){
   req.oepn(HttpMethod,url,true);
   req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   req.send(params);
}
}

XMLHttpRequest 支持大量的HTTP 调用语义，包括用来动态生成页面的可选查询字符串参数（你可能已经知道这些 CGI 参数、FORM 参数或者 ServletRequest参数，取决于服务器端的开发背景）。

sendRequest() 方法包含的第二个和第三个参数都是可选参数，大部分情况下都用不上。默认使用Post 方法来获取资源，在请求的主题部分不需要传递任何参数。

分配一个回调函数: 在未来某个不确定的时刻，当结果返回的时候，将会执行这段代码。
window.onload 函数就是一个回调函数。

使用回调函数:

var READY_STATE_UNIITIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE =3 ;
var READY_STATE_COMPLETE = 4;
var req;

function sednRequest(url,params,HttpMethod){
  if(!HttpMethodd){
   HttpMthod = 'GET';
}
req = getXMLHTTPRequest();
if(req){
   req.onreadystatechange = onReadyStateChange;
   req.open(HttpMethod,url,true);
  req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  req.send(params);
}
}

function onReadyStateChange(){
  var ready = req.readyState;;
  var data = null;
  if(ready == READY_STATE_COMPLETE){
     data = req.responseText;
  }else{
     data = 'loading  [' + ready + ']';
  }
//  do something with the data
}

这里将请求对象声明为一个全局对象，这样有利于保持事情的简单，那如何同时发送多个请求。。
待续。。。。

CopyHoo 2008-12-08 22:25 发表评论

获取 XMLDocument

CopyHoo — Mon, 08 Dec 2008 14:12:00 GMT
getXMLDocument() 函数

<script type="text/javascript">
  fucntion getXMLDocument(){
    var xDoc = null;
    if(document.implementation && document.implementation.createDocument){
    xDoc = document.implementaion.createDocument('','',null) ; // Mozilla / Safari
  }else if(typeof ActiveXObject != 'undefined'){
  var msXmlAx = null;
  try{
    msXmlAx = new ActiveXObject("Msxml2.DOMDocument"); // 较新版本的 IE 浏览器
  }catch(e){
    msXmlAx = new ActiveXObject("Msxml.DOMDocument"); // 较老版本的 IE 浏览器
  }
  xDoc = msXmlAx;
}
  if(xDoc == null || typeof xDoc.load == 'undefined'){
   xDoc = null;
}
  return xDoc;
  }
script>

在大多数浏览器中，这个函数都能返回一个具有相同 API 的 XmlDocument 对象，尽管在不同的浏览器中创建文档的方式有很大的不同。

这段代码检查文档对象是否支持创建一个原生的 XmlDocument 对象所需的 implementation 属性（在最近的 Mozilla 和 Safari 浏览器中都可以找到这个属性）。如果没有找到，它将测试浏览器是否支持 ActiveX 对象(只有微软的浏览器才能够支持)。

CopyHoo 2008-12-08 22:12 发表评论

属性	描述
value	格式化的日期，该属性的内容应该是 java.util.Date 类型的实例
type	格式化的类型
pattern	格式化模式
var	结果保存变量
scope	变量的作用范围
timeZone	指定格式化日期的时区