语源科技BlogJava-welkin的技术薄

使用JSON做Ajax通讯载体

welkin — Sat, 16 Feb 2008 14:01:00 GMT

您可能已经习惯使用XML作为Ajax的通讯载体，XML这种标签的格式看起来也很舒服，但是当您用responseXML接收到服务器端大量的XML数据时，您可能还要再打开一个预先写好xml通讯数据的记事本，一边看着文本一边对应着格式来解析xml数据，这样的工作让你感到厌烦？厌倦了文本解析工作的您一定会这样想，如果后台能返回给我一个对象，同时这个对象已将我需要的数据封装在里面，那该有多好啊！是啊，JSON就是为此而诞生的！当您前台通过Ajax和后台交互得到了JSON格式的文本之后，您只需eval一次这个文本就能得到这样的对象了！
我们直接看代码好了，我认为代码会比语言讲述的更加直观明了:)
一个用户登陆的例子：
我们先为项目添加一个myjs.js文件,内容如下：

myjs.js这个文件已经为我们完成了建立Ajax通讯的基本工作。
我们再新建一个登陆页面

<html>
<head>
<script type="text/javascript" src="myjs.js">script>
<script type="text/javascript" src="login.js">script>
head>
<body>
<form>
用户名：<input type="text" name="username" /><br>
密码：<input type="text" name="userpass" /><br>
<input type="button" name="submit" value="登陆" onclick="login()" />
form>
body>
html>

在页面引入的login.js是一会要创建的，用来处理用户登陆的细节

为项目添加login.js

当用户填写完登陆表单后，按下[登陆]按钮将触发login()方法，login()方法对用户的登陆数据进行校验后发送请求，后台接收并做处理后返回相关信息（稍候讲解后台如何处理），这时XMLHttpReq的onreadystatechange发生改变，调用我们指向的processResponse函数，函数确定数据请求成功后调用loginCallback回调函数。loginCallback中，通过responseText接收将信息数据的文本，这里注意：由于我们后台返回来的数据是JSON格式的，我们在前台希望得到的是一个JSON格式的对象，所以我们还需要执行一次eval函数将文本转化为对象，如果直接把reponseText赋值给变量json,json将会是一个string。
下面我们要引入后台部分了，我们给项目来个jsp吧（我只会jsp - -|| ）
添加login.jsp

<%
request.setCharacterEncoding("utf-8");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
String username=request.getParameter("username");
String userpass=request.getParameter("userpass");

String message="";
if(username=="tom"&&userpass=="123"){ message="{msg:'success',username:'"+username+"',userpass:'"+userpass+"'}" ;
}else{
message="{msg:'failed',username:'"+username+"',userpass:'"+userpass+"'}" ;
}
out.print(message);
out.close();
%>

没啥好说的，注意一下JSON格式的写法就可以了，以"{"开头，"}"结尾，中间可以定义一些属性和方法,格式为"名称:值/方法体"。

恩，我认为大功告成了:)

welkin 2008-02-16 22:01 发表评论

JavaScript中的继承(二)

welkin — Fri, 15 Feb 2008 18:08:00 GMT

借鉴于Prototype框架中的继承机制的实现，我们可以更加有条理的改写我们的代码，让它看起来更加符合面向对象的风格。在prototype中的继承是使用extend方法，所以需要先要定义extend函数(为了方便理解，变量名称有改动)：

//为Object添加一个extend静态类方法
Object.extend=function(destination,source){
  for(property in source){
    destination[property]=source[property];
  }
  return destination;
}

//为Object添加extend方法
Object.prototype.extend=function(o){
  return Object.extend.apply(this,[this,o]);
}

在prototype中定义extend方法分两步走。
第一步，先为Object添加一个extend静态类方法，这个方法的作用是将原类(source)的所有属性和方法通过反射机制(for(... in ...))来传给目的类(destination)，最后返回目的类。
第二步，为Object类的原形添加extend方法，在这个方法中调用了第一步中定义的Object类静态方法extend，apply方法中的第一个this是要绑定到的当前对象，第二个参数是个数组，数组中的this是对象本身，o是传进来的参数。这个extend方法的作用是将对象o的所有属性和方法赋值给对象自身，再将自身返回，得到的就是一个继承了调用extend方法的函数的所有属性和方法的类，你可以在调用extend方法时在其参数中用JSON格式来为其添加新方法/属性或是重写旧方法。

下面我们就可以用这个extend方法了，我们还是举Person和Teacher的例子：

//定义基类Person
function Person(name,age){
   this.name=name;
   this.age=age;
}
Person.prototype={
   shout:function(){
     alert("I'm a person.");
   }
}

//定义Person子类Teacher
function Teacher(name,age){
   this.name=name;
   this.age=age;
}
Teacher.prototype=(new Person()).extend({
   shout:function(){
     alert("I'm a teacher.");
   }
});

这里与先前的例子不同的是在定义Person和Teacher时，将构造函数和方法的定义分开，定义方法时使用JSON格式，这样看起来就更符合面向对象的风格了，注意Teacher继承Person的时候，在调用extend方法时又重写了Person的shout方法，这里也是使用JSON格式。
好！我们来测试一下吧！

var p=new Person("tom","18"); //定义Person对象
var t=new Teacher("Green","33") //定义Teacher对象
p.shout();
t.shout();

我们将看到结果：
第一个对话框："I'm a person."
第二个对话框："I'm a teacher."

welkin 2008-02-16 02:08 发表评论

JavaScript中的继承(一)

welkin — Fri, 15 Feb 2008 17:22:00 GMT

在javascript中不存在面向对象中的继承关系，我们可以通过很多种手段来实现继承机制，先看一个简单的例子：

//基类Person
function Person(name,age){
  this.name=name;
  this.age=age;
  this.shout=function(){
    alert("I'm a person.");
  }
}

//Person子类Teacher
function Teacher(name,age){
  this.temp=Person;
  this.temp(name,age);
  delete temp;
}

我们先定义了一个Person类（我习惯站在面向对象的角度来称呼它，当然，你可以称它为函数），含有两个属性name,age和一个方法shout，让Teacher类继承Person类的办法是为Teacher添加一个临时函数temp，先让temp指向Person这个构造函数，然后调用temp(name,age)时实际则是调用了Person(name,age)这个构造函数，这样就Teacher就继承了Person的所有属性和方法，最后只需删除temp这个临时函数即可。当然，如果你需要为Teacher添加新的方法或是重写Person的方法时，你可以在delete temp之后添加。

上面的例子也可以用call函数或apply函数实现，这样用起来更加简单：

//基类Person
function Person(name,age){
  this.name=name;
  this.age=age;
  this.shout=function(){
    alert("I'm a person.");
  }
}

//Person子类Teacher
function Teacher(name,age){
  //this.temp=Person;
  //this.temp(name,age);
  //delete temp;
  Person.call(this,name,age);
}

用apply实现只需将Teacher中Person.call(this,name,age);换为Person.apply(this,[name,age]);

welkin 2008-02-16 01:22 发表评论