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> | <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+" <a href='javascript:
logout()'>
退出</a>"; }else if(jm.code==0){ $("logindiv").innerHTML="您尚未 <a href='login.jsp'>
登录</a> | <A href='reg.jsp'>
注册</A>|"; }else if(jm.code==2){ $("logindiv").innerHTML="您尚未 <a href='login.jsp'>
登录</a> | <A href='reg.jsp'>
注册</A>|"; } } } } function
logout(){ startRequest("
logout.jsp?jsp="+new Date(),handleStateChange); //alert("已经发出请求"); } window.onload=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的应用还会非常广泛，以上就是本篇的一个小的概括。
原文链接：/ajax/163542.html
