首页 > 代码库 > Ajax
Ajax
ajax全称:Asynchronous JavaScript and XML
ajax是一门老技术
大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。
ajax原理和XmlHttpRequest对象
ajax原理图
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。
var XMLHttpReq;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
XMLHttpReq=new XMLHttpRequest();
}
}
function processResponse()
{
if( XMLHttpReq.readyState==4 && XMLHttpReq.status==200)
{
clearSuggest();
var tips= XMLHttpReq.responseXML.getElementsByTagName("res");
//servlet中response.setContentType("text/xml;charser=UTF-8");
//如果是普通的html中的值则为text/html
if(tips.length!=0)
{
for( i=0;i<tips.length;i++)
{
title=tips[i].firstChild.nodeValue;//参考DOM解析XML
//解析返回的res节点数组，取得<res></res>之间存入title的变量值
createSuggest();
}
displaySuggest();
}
else
{
clearSuggest();
hiddenSuggest();
}
}
else
{
window.alert("您所请求的页面有异常");
}
}
function sendRequest()
{
var info=document.getElementById("title").value;
var url="./search?info="+info;//注意这是servlet的映射路径
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}
如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。
对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：
a、向服务器提交数据的类型，即post还是get。
b、请求的url地址和传递的参数。
c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。
Send方法用来发送请求。
实例：用户名验证
register.html<script type="text/javascript" language="javascript">
var XMLHttpReq;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
XMLHttpReq=new XMLHttpRequest();
}
}
function processResponse()
{
if( XMLHttpReq.readyState==4 && XMLHttpReq.status==200)
{
var tip= XMLHttpReq.responseText;
document.getElementById("tip").innerHTML="<font color=‘blue‘>"+tip+"<font>";
}
else
{
alert("您所请求的页面有异常");
}
}
function sendRequest()
{
var username=document.getElementById("username").value.toString();
var url="user?username="+username;
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);//get方式所以servlet中用的是doget方法
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}
</script>
</head>
<body>
<form action="./user" method="post" name="form1">
<table>
<tr>
<td width="82">用户名：</td>
<td width="156">
<input type="text" name="username" id="username" onblur="sendRequest()">
</td>
<td width="285" id="tip"></td>
</tr>
<tr>
<td width="82">密  码：</td>
<td width="156">
<input type="text" name="password" id="password" >
</td>
</tr>
<tr><td> <input type="submit" name="submit" value=http://www.mamicode.com/"登陆" />
</table>
</form>
servlet//这里获得是html中的属性
response.setContentType("text/html;charset=UTF-8");
String user=request.getParameter("username");
PrintWriter out = response.getWriter();
Connection con=null;
try{
String sql="select * from user where username=?";
DbConnection db=new DbConnection();
con=db.getConnection();
PreparedStatement pstmt=con.prepareStatement(sql);
pstmt.setString(1, user);
ResultSet rs=pstmt.executeQuery();
if(rs.next())
{
out.write("对不起，您所注册的用户名已存在");
}
else
{
out.write("恭喜您，该用户可以使用");
}
return;
}
实例2
智能匹配
<script type="text/javascript">
var XMLHttpReq;
var title;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
XMLHttpReq=new XMLHttpRequest();
}
}
function processResponse()
{
if( XMLHttpReq.readyState==4 && XMLHttpReq.status==200)
{
clearSuggest();
var tips= XMLHttpReq.responseXML.getElementsByTagName("res");
if(tips.length!=0)
{
for( i=0;i<tips.length;i++)
{
title=tips[i].firstChild.nodeValue;
//解析返回的res节点数组，取得<res></res>之间存入title的变量值
createSuggest();
}
displaySuggest();
}
else
{
clearSuggest();
hiddenSuggest();
}
}
else
{
window.alert("您所请求的页面有异常");
}
}
function createSuggest()
{
var sDiv="<div class=‘out‘ onm ouseover=‘move(this);‘ onm ouseout=‘mout(this);‘onclick=‘setSuggest(this)‘>"+title+"</div>";
document.getElementById("suggest").innerHTML+=sDiv;
}
function setSuggest(para)
{
document.getElementById("title").value=http://www.mamicode.com/para.firstChild.nodeValue;
hiddenSuggest();
}
function hiddenSuggest()
{
document.getElementById("suggest").style.display="none";
}
function move(para)
{
para.className="over";
}
function mout(para)
{
para.className="out";
}
function displaySuggest()
{
document.getElementById("suggest").style.display="block";
//设置层可见；
document.getElementById("suggest").style.width=document.getElementById("title").clientWidth+4;
//设置层的宽度；
document.getElementById("suggest").style.left=document.getElementById("title").offsetLeft+73;
document.getElementById("suggest").style.top=document.getElementById("title").style.top+79;
}
function clearSuggest()
{
document.getElementById("suggest").innerHTML="";
}
function sendRequest()
{
var info=document.getElementById("title").value;
var url="./search?info="+info;
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}
</script>
</head>
<body>
<table width="410" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="63" height="37">标题</td>
<td><input name="title" type="text" id="title" size="50" onKeyUp="sendRequest()"></td>
</tr>
</table>
<div id="suggest" style="display:none"></div>
</body>
sevlet//xml方式
String info=request.getParameter("info");
System.out.println(info);
response.setContentType("text/xml;charser=UTF-8");
PrintWriter out = response.getWriter();
out.println("<response>");
String sql="select * from infolist where infotitle like?";
DbConnection db=new DbConnection();
Connection conn=null;
conn=db.getConnection();
try {
PreparedStatement ps=conn.prepareStatement(sql);
ps.setString(1, info+"%");
ResultSet rs=ps.executeQuery();
while(rs.next())
{
//out.println("<res>"+rs.getString("infotitle")+"</res>");
out.println("<res title=‘"+rs.getString("infotitle")+"‘>"+rs.getString("infotitle")+"</res>");
//System.out.println("<res>"+rs.getString("infotitle")+"</res>");
System.out.println("<res title=‘"+rs.getString("infotitle")+"‘>"+rs.getString("infotitle")+"</res>");
}
rs.close();
ps.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println(e.getMessage());
}
out.println("</response>");
out.close();
}
//这里构造了xml键值对<response><res>值</res></response>
Ajax优点：
1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。