Ajax简介与实例

  Ajax(Asunchronous JavaScript + XML)是有HTML、JavaScript技术、DHTML和DOM技术组成，使用它可以构建更为动态和响应更灵敏的Web应用程序。Ajax技术的关键在于浏览器端和响应更灵敏的Web应用程序。Ajax技术的关键在于对浏览气端和响应更灵敏的Web应用程序。Ajax技术的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。这一技术可以将笨拙的Web界面转化成交互性的Ajax应用程序。

  Ajax的核心是JavaScript对象XmlHttpRequest。该对象在IE5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest可以使用JavaScript想服务器提出请求并处理响应，而不阻塞用户在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。

 

Ajax应用程序用到的基本技术有：

1、HTML用于建立Web表单并确定应用程序其他部分使用的字段。

2、JavaScript代码是运行Ajax应用程序的核心代码，帮组改进与服务器应用程序的通信。

3、DHTML用于动态更新表单，若使用div、span和其他动态HTML元素来标记HTML。

4、文档对象模型DOM用于通过JavaScript处理HTML结构和服务器返回的XML或其他数据。

 

使用Ajax可以完成的功能有：

1、动态更新当前页面的显示信息，如购物车的物品总数，无需用户单击更新并等待服务器重新发送整个页面。

2、提升网站的性能，通过减少从服务器下载的数据量而实现提高网络性能。

3、避免每次用户输入时页面刷新，直接编辑表格数据而不是要求用户导航到新的页面来编辑数据。

 Ajax基本思想就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给特定JavaScript代码而不直接发送给服务器，相反，JavaScript代码捕获表单数据并向JavaScript代码在幕后发送情切，用户甚至不知道请求的发出，而且请求是一步发送，就是说，JavaScript代码不用等待服务器的响应，因此用户可以继续输入数据、滚动屏幕和使用应用程序。 服务器将数据返回Java代码，JavaScript代码决定如何处理这些数据。它可以迅速更新表单数据。让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了数据，JavaScript代码甚至全可以对收到的数据执行某种计算，在发送另一个请求，完全不需要用户干预，这个就是XMLHttpRequest的强大之处。

 

 

获取XMLHttpRequest对象：

使用Microsoft浏览器IE，Microsoft浏览器IE使用MSXML解析处理XML，因此如果编写的Ajax应用程序要和Internet Explorer打交道，那么必须用一种特殊的方式创建对象，但并不是这么简单，根据Internet Explorer中安装的版本，因此必须对这两种情况分别编写代码。下面就是创建XMLHttpRequest对象的通用代码：

<mce:script language="javascript"><!--var xmlHttp = false;if(window.ActiveXObject){ try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e1){ } }}else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest();}else{ alert("不能创建XMLHttpRequest实例");}// --></mce:script> 

 

Ajax的基本请求/响应模式:

1.当创建了一个XMLHttpRequest对象后，就可以应用来处理服务器请求。首先需要一个Web页面能够调用JavaScript方法。Ajax应用程序处理请求流程为：

  1.从Web表单中获取需要的数据。

  2.建立要连接的URL。

  3.打开连到服务器的连接

  4.设置服务器在完成后要运行的函数。

  5.发送请求。

具体代码开发代码如下：

  var xmlHttp = false; //创建XMLHttpRequest对象 function createXmlHttp(){if(window.ActiveXObject){ try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2){ xmlHttp = false; } } }else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function callServer(){ //1.获取页面表单数据 var id = document.getElementById("id").value; createXmlHttp(); if(id == null || id == ""){ return; } if(xmlHttp){ //2.创建要连接的URL对象 var url = "AjaxServlet?id=" + id; //3.打开服务器连接 true为一个异步链接 xmlHttp.open("GET", url, true); //4.如果服务器处理完了请求，一个名为refreshPage xmlHttp.onreadystatechange = refreshPage; //发送请求 xmlHttp.send(null); } } function refreshPage(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ var div1 = document.getElementById("div1"); div1.innerHTML += "用户名：" + xmlHttp.responseText +"<br/>"; } } }

    

处理响应：
1.发送请求后，进入等待服务器的响应，知道xmlHttp.readyState属性的值等于4.服务器将把响应填充到xmlHttp.requestText属性中，其中的第一点是就绪状态米之遥检查一个特定的值为4就表明服务器已处理完成请求的响应，第二点就是使用xmlHttp.responseTexts属性获得服务器的响应，XmlHttpRequest对象属性有：
1.onreadystatechange：每次状态改变所触发事件的事件处理程序。
2.readyState：对象状态值，状态值得含义如下:
  0 = 未初始化(uninitialized) 1 = 正在加载（loading）2 = 加载完毕（loaded） 3 = 交互（interactive） 4 = 完成（complete）
3.resposeText:从服务器进程返回的数据的字符串形式。
4.responseXML：从服务器进程返回的DMO兼容的文档数据对象。
5.status：从服务器返回的数字代码，比如404（未找到）或200(就绪)
6.statusText:伴随状态码得字符串信息。

下面就是处理服务器响应的例子，代码如下：
function refreshPage(){
 if(xmlHttp.readyState == 4){
   if(xmlHttp.status == 200){

   //处理代码  

}

 

}
}