BlogJava-welkin的技术薄-文章分类-Ajaxhttp://www.blogjava.net/welkinwwl/category/29475.html做一个务实的人会让你学到的更多zh-cnMon, 18 Feb 2008 16:14:57 GMTMon, 18 Feb 2008 16:14:57 GMT60使用JSON做Ajax通讯载体http://www.blogjava.net/welkinwwl/articles/ajax.htmlwelkinwelkinSat, 16 Feb 2008 14:01:00 GMThttp://www.blogjava.net/welkinwwl/articles/ajax.htmlhttp://www.blogjava.net/welkinwwl/comments/180210.htmlhttp://www.blogjava.net/welkinwwl/articles/ajax.html#Feedback0http://www.blogjava.net/welkinwwl/comments/commentRss/180210.htmlhttp://www.blogjava.net/welkinwwl/services/trackbacks/180210.html     我们直接看代码好了，我认为代码会比语言讲述的更加直观明了:)
一个用户登陆的例子：
我们先为项目添加一个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格式的写法就可以了，以"{"开头，"}"结尾，中间可以定义一些属性和方法,格式为"名称:值/方法体"。

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


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