使用JSON做Ajax通讯载体

    您可能已经习惯使用XML作为Ajax的通讯载体，XML这种标签的格式看起来也很舒服，但是当您用responseXML接收到服务器端大量的XML数据时，您可能还要再打开一个预先写好xml通讯数据的记事本，一边看着文本一边对应着格式来解析xml数据，这样的工作让你感到厌烦？厌倦了文本解析工作的您一定会这样想，如果后台能返回给我一个对象，同时这个对象已将我需要的数据封装在里面，那该有多好啊！是啊，JSON就是为此而诞生的！当您前台通过Ajax和后台交互得到了JSON格式的文本之后，您只需eval一次这个文本就能得到这样的对象了！
    我们直接看代码好了，我认为代码会比语言讲述的更加直观明了:)
一个用户登陆的例子：
我们先为项目添加一个myjs.js文件,内容如下：
var XMLHttpReq = false;
     //创建XMLHttpRequest对象       
function createXMLHttpRequest(){
        if(window.XMLHttpRequest) { //检测是否为Mozilla浏览器
                           try{
              XMLHttpReq = new XMLHttpRequest();
                        }catch(e){}
        }
        else if (window.ActiveXObject) { //检测是否为IE浏览器
            try {
                XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
    }
    //发送请求方法
    function sendRequest(url) {
        createXMLHttpRequest();
        XMLHttpReq.open("GET", url, true);
        XMLHttpReq.onreadystatechange = processResponse;//指定响应处理函数
        XMLHttpReq.send(null);  // 发送请求
    }
    // 处理返回信息函数
    function processResponse() {
        if (XMLHttpReq.readyState == 4) { // 判断XMLHttpRequest对象是否已成功接收数据
            if (XMLHttpReq.status == 200) { // 请求成功
                    loginCallback();     //调用处理函数          
            } else { //页面异常
                window.alert("页面有错误");
            }
        }
}
    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
function login(){      //对用户登陆数据进行校验并发出Ajax请求
  var username=document.forms[0].username.value;
  var userpass=document.forms[0].userpass.value;
  if(username==""||userpass==""){
    alert("用户名或密码不得为空！");
  }else{
    sendRequest("login.jsp?username="+username+"&userpass="+userpass);
  }
}

function loginCallback(){  //处理回调函数
  var json=eval('('+XMLHttpReq.responseText+')');
  alert(json.msg+"\n"+json.username+"\n"+json.userpass);
}
当用户填写完登陆表单后，按下[登陆]按钮将触发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格式的写法就可以了，以"{"开头，"}"结尾，中间可以定义一些属性和方法,格式为"名称:值/方法体"。

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

posted on 2008-02-16 22:01 welkin 阅读(287) 评论(0)  编辑  收藏 所属分类: Ajax


只有注册用户登录后才能发表评论。
网站导航:
 
<2025年7月>
日一二三四五六
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

公告

 

留言簿

文章分类(3)

文章档案(3)

搜索

最新评论