ajax引擎demo和ajax运作过程浅析

  AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），这不是一种新的编程语言，是指一种创建交互式网页应用的网页开发技术，是几种技术的集合应用。这是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
  而在ajax技术中，最关键的核心就是XMLHTTPRequest对象。通过这个对象，可以实现异步发送利用JS发送请求和服务器交换数据。用户可以在此同时进行其他操作，不会受影响，用户体验度更好。大概的流程如下：当用户点击到某些动态模块时 -> 调用JS，通过AJAX引擎(其实就是自己写的一个JS)创建XMLHTTPRequest对象，并发送到WEB服务器 ->  服务器接收请求和传过来的参数，根据事先定义好的回调函数，对请求做处理，和后台数据进行交换数据。->  服务器端得到处理好的数据，返回XML或者JSON形式的语句和静态语句  ->  通过AJAX引擎进行解释—>客户端得到返回的HTML和CSS，呈现给用户。
  以下，我们来看以下所谓的ajax引擎的一个demo代码：
var xmlHttp;
//获取xmlHttp对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
xmlHttp = new XMLHttpRequest(); // Mozilla、Firefox、Safari 
} else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
}


//发送请求
function startRequest(urlString,handleStateChange) {
createXMLHttpRequest(); // 建立非同步請求物件
xmlHttp.onreadystatechange = handleStateChange; // 設定callback函式
xmlHttp.open("GET", urlString); // 開啟連結
xmlHttp.send(null); // 傳送請求
}


//Post方式
function startRequestByPost(url,queruString,handleStateChange) {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("POST", url);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.send(queruString);


}


  如上文所述。每次进行JS异步请求时，都要先创建一个XMLHttpRequest对象，xmlHttp.onreadystatechange是设定回调函数， xmlHttp.open("GET", urlString);（或者是xmlHttp.open("POST", url);）是设定发送请求的方法和打开请求，send是发送参数。（get和post的区别在于前者是明文发送，后者不是明文发送）


  接下来看一个整个发送请求到接受HTML的完整流程。


header.jsp代码:


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<script type="text/javascript" src="js/header.js"></script>
<script type="text/javascript" src="js/common.js"></script>




<DIV>
<IMG src="image/logo.gif">
</DIV>
<!--      用户信息、登录、注册        -->


<DIV class="h" id="logindiv">
您尚未　<a href="login.jsp">登录</a>
&nbsp;| &nbsp; <A href="reg.jsp">注册</A> |
</DIV>




header.js代码：






function handleStateChange() {
  if (xmlHttp.readyState == 4) { // 測試狀態是否請求完成
    if (xmlHttp.status == 200) { // 如果伺服端回應OK
        //alert("请求返回的是"+xmlHttp.responseText);
    var s=xmlHttp.responseText
        var jm=eval('(' + s + ')'); //通过eval函数将json字符串变成一个对象
        if(jm.code==1){
        $("logindiv").innerHTML="欢迎您："+jm.obj.uname+"&nbsp;&nbsp;<a href='javascript:logout()'>退出</a>";
        }else if(jm.code==0){
        $("logindiv").innerHTML="您尚未　<a href='login.jsp'>登录</a>&nbsp;| &nbsp; <A href='reg.jsp'>注册</A>|";
        }else if(jm.code==2){
        $("logindiv").innerHTML="您尚未　<a href='login.jsp'>登录</a>&nbsp;| &nbsp; <A href='reg.jsp'>注册</A>|";
        }
    }
  }
}  

function logout(){
startRequest("logout.jsp?jsp="+new Date(),handleStateChange);
//alert("已经发出请求");
}


window.οnlοad=function(){
startRequest("checkUserSession.jsp?jsp="+new Date(),handleStateChange);
//alert("已经发出请求");
}




  上述header.jsp是一个BBS的包含脚本，而调用的header.js就是一个ajax引擎，当JSP完成加载时，自动发送请求到checkUserSession.jsp  这个页面是对用户的状态进行判别看是否有用户已经登录。并返回一个JSON数据包（一种类似于XML的数据格式，更省流量）。handleStateChange就是回调函数，对发送回来的JSON进行反解码生成HTML+CSS代码，从而完成了异步调用JS，局部刷新页面。


  对于ajax的应用还会非常广泛，以上就是本篇的一个小的概括。