首页 > 代码库 > Ajax

Ajax

2024-07-07 12:13:04   223人阅读

  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">密&nbsp&nbsp码：</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、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。


联系
我们