10月20日Ajax与jsp培训日记

逆风的香1314

浏览: 1440547 次
性别:
来自: 北京

最近访客更多访客>>

hhybq

sichunli_030

wangyy

斐斐宝贝

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2008-12 ( 57)
2008-11 ( 117)
2008-10 ( 180)
更多存档...

Ajax JSP JavaScript 应用服务器 CSS

明后两天梁言兵老师来讲Ajax及其最近作过的一个真实的Ajax项目，所以，我今天讲解梁老师的课程所需要的一些前置知识。
因为大家对Javascript不是很熟悉，所以我首先讲解Javascript的DHTML功能。本来入学考试要求大家很好地掌握Javascript的，但是大家都不能理解我们的苦衷，并没有专心去对待Javascript。想想我前两年强调javascript和css的重要性时，一些培训中心的人居然对此不屑一顾，当他们咨询学员时，也以此来攻击我，学员们也对这些培训中心的蛊惑深信不疑！随着Ajax的流行，这些人又跟风觉得Javascript重要了，现在同学们应该能静下心来去好好学习Javascript了。
通过DHTML和Javascript可以实现网页显示的局部更新，先用一个动态生成表格内容的Javascript来讲解，两种方式：
表格专用的数据模型来实现：
<Script   language=javaScript>
function   LianJie()
{
//selValue=mainTab.rows[0].cells[0].childNodes[0].innerText;
//selValue=window.sel.innerText
selValue=window.sel.options[window.sel.selectedIndex].text
texValue=window.text1.value;
innValue=selValue+texValue;
newRow=window.mainTab[1].insertRow()
alert(newRow);
newCell=newRow.insertCell()
newCell.innerText=innValue;
}
</Script>
<Table   id="mainTab">
<TR>
<TD>
<select   style="width:200px;"   id="sel"   Name="sel">
<option>sdfsdfsdfdsfsdf</option>
<option>1111111111111</option>
<option>222222222222</option>
</select>
</TD>
<TD>
<input   type=text   Name="text1"   id="test1">
</TD>
<TR>
<input   type=button   value="连接"   onClick=LianJie()>
<Table>
<Table   border=1   id="mainTab">
</Table>
通过标准的DOM对象模型来实现：
<html>
<head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
<SCRIPT type="text/javascript">
function addRow()
{
  alert("hehe");
  var tbody = document.createElement("tbody");
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  var value = document.createTextNode("1111");
  td.appendChild(value);
  tr.appendChild(td);
  tbody.appendChild(tr);
  document.getElementById("t1").appendChild(tbody);
  //background="#FF0000";
  //.addChild(obj);
}

</SCRIPT>
</head>

<body>
    This is my HTML page. <br>
    <TABLE id="t1">
    <tr><td>2222</td></tr>
    </TABLE>
    <a href="#" onclick="addRow()">test</a>
</body>
</html>

有了动态生成表格的直观印象后，我再告诉大家动态需要的数据不是直接从网页的文本框中直接获取，而是从Web服务器上去获取。不能让浏览器直接去访问web服务器，因为这样将得到一个新的网页，而不是继续保持原来的网页。要保持原来的网页，让javascript在原来的网页中继续运行，应该使用网页中的一个对象去连接web服务器，例如applet，论坛发帖也是一个不错的ajax应用。
在javascript可以直接使用一个XMLHttpRequest对象，来向Web服务器发送请求和接受Web服务器返回的结果，HTML、CSS、JavaScript、XMLHttpRequest等基本知识的结合使用就是Ajax。
接着通过一个简单的例子讲解了XMLHttpRequest的应用。
什么时候用Ajax，在一个页面中提交请求后，服务器回复的页面还是原来的，只是数据不同，或者是对页面中的某些字段提前进行校验。

讲解了jsonrpc这种Ajax框架的作用和运行原理，它封装了底层通讯和Javascript对象的序列化和反序列化。

jsonrpc的客户端的构造方法先向服务器发请求，获得有哪些对象和方法，然后将这些对象和方法增加到客户端对象上，所以，客户端可以调用jsonrpcclient.hello.sayHello这样的方法。有时间的话，参照这个写一个能动态向对象增加方法的实验例子。

根据王涛的提问，详细讲解url编码(大家对这块实际很糊涂,出乎我的意料!),为了便于大家理解，我先从
base64编码开始讲起，接着再讲url编码。

http://www.baidu.com/s?wd=ajax+%BF%F2%BC%DC&cl=3
reqeust.getParameter("wd")得到的不是ajax+%BF%F2%BC%DC串,
getParameter返回的是一个字符串,java串是unicode码.怎样把ajax+%BF%F2%BC%DC串变成真正的串,是getParamter的内部问题了.但它内部实在是没有做得很好。因为HTTP协议中没有办法说明URL编码时的字符集编码，我预料在下一代的HTTP协议中应该增加这方面的功能。

想到一个学员面试时的考题:"a中b国"的GB2312编码是一个字节数组，从这个数组中识别出有几个字符?首先要明白英文字符的最高bit位为0，中文字符的最高bit位为1。示例代码：
byte buf[] = "a中b国".getBytes("GB2312");
int count = 0;
for(int i=0; i<buf.length; i++)
{
count++;
if((buf[i] & 0x80) != 0)
{
i++;
}
}

因为梁言兵老师的项目中要用到jsp，我参照《深入体验Java Web开发内幕》的书稿给大家先简单过了一下jsp和jsp中如何使用JavaBean。注重强调了JSP的视图作用，尽量将jsp放在WEB-INF或其子目录中，why?JSP只作为视图组件，不要在其中编写业务逻辑，例如，不要访问数据库。但JSP页面中可以有显示逻辑。注意区分视图model和业务model的区别，用TreeMode来理解，业务模型给TreeMode，TreeMode给视图。

分享到：