Java之Ajax技术

ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(如今常把xml换成json):

ajax是2005年提出的，在2006，2007年迅速的发展，目前不少网站都使用了ajax技术，在招聘软件工程师时，ajax技术是必需要求掌握的。ajax技术包含了几种技术:javascript、xml、css、xstl、dom、xhtml和XMLHttpRequest七种技术，因此ajax就像是粘合剂把七种技术整合到一块儿，从而发挥各个技术的优点，威力惊人。[新瓶装旧酒,组合拳]ajax是一个与服务端语言无关的技术. 便可以使用在(php/java ee/.net网站/ asp)ajax能够给客户端返回三种格式数据(文本格式 ，xml , json格式)

为何ajax会如此流行，必然有它的道理。ajax技术解决了不少其它技术解决不了的问题，好比:

(1)页面无刷新的动态数据交换

(2)局部刷新页面【验证用户名惟一】

(3)界面的美观  【加强用户体验】

(4)对数据库的操做

(5)能够返回简单的文本格式，也能够返回 xml文件格式, json数据格式

ajax技术的意义：

互联网的链接是不稳定，谁也不肯意看着本身的电脑从服务器一点一滴的下载数据，那么，ajax是否是解决了这个问题呢，说实话，与其说ajax解决了这个问题，倒不如它只是掩盖了这个问题，它只是在服务器和客户端之间充当了一个缓冲器，让用户误觉得服务没有中断。精确的说，ajax并不能提升从服务器端下载数据的速度，而只是使这个等待不那么使人沮丧。可是正是这一点就足以产生巨大的影响和震动，它实际上也对桌面软件产生了巨大的冲击。

ajax在什么地方用的多

1 动态加载数据，按需取得数据。【树形菜单、联动菜单…/省市联动】

2 改善用户体验。【输入内容前提示、带进度条文件上传…】

3 电子商务应用。 【购物车、邮件订阅…】

4 访问第三方服务。 【访问搜索服务、rss阅读器】

ajax 的运行原理分析：

PS:最重要的就是要弄透这四道线,其中4号线须要一个回调函数来实现。

Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。要清楚这个过程和原理，咱们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

  　  咱们先来看看XMLHttpRequest这个对象的属性。

它的属性有：

onreadystatechange  每次状态改变所触发事件的事件处理程序。

responseText     从服务器进程返回数据的字符串形式。

responseXML    从服务器进程返回的DOM兼容的文档数据对象（document）。

status           从服务器返回的数字代码，好比常见的404（未找到）和200（已就绪）

status Text       伴随状态码的字符串信息

　readyState       对象状态值

0 (未初始化) 对象已创建，可是还没有初始化（还没有调用open方法）

1 (初始化) 对象已创建，还没有调用send方法

2 (发送数据) send方法已调用，可是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，由于响应及http头不全，这时经过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时能够经过经过responseXml和responseText获取完整的回应数据

5. 数据的布局刷新

使用ajax与服务器通讯的的步骤

建立一个XMLHttpRequest对象（第一道线）

不一样的浏览器建立 XMLHttpRequest 对象的方法是有差别的.咱们使用js 的try..catch..

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function getXmlHttp()   {       var xmlHttp;         try{     // Firefox, Opera 8.0+, Safari      xmlHttp=new XMLHttpRequest();}      catch (e){      // Internet Explorer     try{        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}     catch (e){        try{               xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}        catch (e){           alert("您的浏览器不支持AJAX！");           return false;}}      }}

建立url,data,经过 send()，发送请求。（第二道线）

服务器端接收 ajax的请求,作相应处理(操做数据库)，而后返回结果。（第三道线）

客户端经过xmlHttpRequest的属性 reponseText , responseXML 取的数据，而后就完成局部刷新当前页面任务。（第四道线）

经典案例：

■ ajax经典案例—无刷新验证用户名

在用户注册时：

1 传统的方法是把用户填写的全部信息都提交到服务器，若是用户名重复，就会出异常。

2 若是使用ajax咱们能够只提交用户名，确认用户名是否存在，再让用户点击注册。

 

配置文件（仅使用了servlet):

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xmlns="http://xmlns.jcp.org/xml/ns/javaee"  xsi :schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID"  version="3.1">   <servlet>      <servlet-name>ZMC</servlet-name>      <servlet-class>com.Register</servlet-class>   </servlet>   <servlet-mapping>      <servlet-name>ZMC</servlet-name>      <url-pattern>/register</url-pattern>   </servlet-mapping> </web-app>

服务端：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

package com; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;   public class Register extends HttpServlet {   private static final long serialVersionUID = 1L;        public Register() {          super();          // TODO Auto-generated constructor stub      }   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { }   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); response.setCharacterEncoding("utf-8");      if(!request.getParameter("user").equals("zmc")){      response.getWriter().println("这个名字能够注册");//三号线      }      else{      response.getWriter().println("这个名字不能够注册");//三号线      } } }

客户端请求页面：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91

<%@ page language="java" contentType="text/html; charset=UTF-8"      pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无刷新验证用户名</title> <script type="text/javascript"> //建立ajax引擎 //原理图中的一号线 function getXmlHttpObject(){ var xmlHttpRequest; //不一样的浏览器获取对象XmlHttpRequest 对象方法不同 if(window.ActiveXObject){ xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttpRequest=new XMLHttpRequest(); } return xmlHttpRequest; }   var myXmlHttpRequest=null;//设置全局变量 //验证用户名是否存在 function checkName(){ myXmlHttpRequest=getXmlHttpObject(); //判断XMLHttpRequest对象是否建立成功 if(myXmlHttpRequest){ //经过myXmlHttpRequest对象发送请求到服务器的某个页面 //第一个参数表示请求的方式, "get" / "post" //第二个参数指定url,对哪一个页面发出ajax请求(本质仍然是http请求) //第三个参数表示 true表示使用异步机制,若是false表示不使用异步 var data="user="+$('username').value; var url="/AjaxDemo/register"; //打开请求. myXmlHttpRequest.open("post",url,true); myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); myXmlHttpRequest.setRequestHeader("RequestType","ajax");   //指定回调函数.chuli是函数名 //注意在Ajax中函数是调用，函数()是引用函数地址 //状态改变的事件触发器，共四种状态 myXmlHttpRequest.onreadystatechange=chuli; //真的发送请求,若是是get请求则填入 null便可 //若是是post请求，则填入实际的数据 //这就是原理图中的二号线 //若是是get方法，参数写null myXmlHttpRequest.send(data);  } }   //回调函数 //一次请求回调函数会被调用四次，分为四种状态，咱们关心的是第四种状态即:完成 //原理图中的四号线 function chuli(){ //window.alert("处理函数被调回"+myXmlHttpRequest.readyState); //我要取出从registerPro.php页面返回的数据 if(myXmlHttpRequest.readyState==4){//最好把响应状态码为200也加入判断 //取出值,根据返回信息的格式定.text //window.alert("服务器返回"+myXmlHttpRequest.responseText); $('myRes').value=myXmlHttpRequest.responseText; } }   //这里咱们写一个函数，通常根据id取元素函数名都写为$ function $(id){ return document.getElementById(id); }   </script> </head> <body> <!-- onkeyup：键入一个字符便会触发它，在这个例子中即是调用checkName()函数。 --> <form action="???" method="post">     用户名字 :<input type="text"  onkeyup="checkName();"  name="username1" id="username">      <input type="button" onclick="checkName();"  value="验证用户名">      <input style="border-width: 0;color: red" type="text" id="myRes">      <br/>     用户密码 :<input type="password" name="password"><br>     电子邮件 :<input type="text" name="email"><br/>      <input type="submit" value="用户注册">      </form>       <form action="???" method="post">     用户名字 :<input type="text" name="username2" >      <br/>     用户密码 :<input type="password" name="password"><br>     电子邮件 :<input type="text" name="email"><br/>      <input type="submit" value="用户注册">      </form> </body> </html>

响应结果图：

PS:使用get方式发出请求，若是提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据., url解决方法 

1. url 后带一个老是变化的参数,好比当前时间

 

 

1	var url="/ajax/registerProcess.php?mytime="+new  Date()+"&username="+$("username").value;

 

2. 在服务器回送结果时，禁用缓存.

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

header(“Content-Type: text/xml;charset=utf-8”);

//告诉浏览器不要缓存数据

header(“Cache-Control: no-cache”);

AJAX 能够在php项目,java ee项目,.net项目使用。在服务器端的业务逻辑层使用何种服务器端语言均可以。

从服务器端接收数据的时候，那些数据必须以浏览器可以理解的格式来发送。服务器端的编程语言通常以以下 3 种格式返回数据：Text(又称Html格式)、XML、JSON。

返回Html格式

HTML 由一些普通文本组成。若是服务器经过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中。

没必要从 responseText 属性中读取数据。它已是但愿的格式，能够直接将它插入到页面中。

插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。

innerHTML 并不是 DOM 标准。

 

■ 返回xml格式优势：

XML 是一种通用的数据格式。没必要把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。利用 DOM 能够彻底掌控文档。

缺点：若是文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂

PS:不论是返回的何种类型，影响的只是三四号线

上面的那个例子即是返回了text格式，如今仍是拿上面那个例子返回xml 格式:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function chuli(){ if(myXmlHttpRequest.readyState==4){   //看看若是取出 xml格式数据，返回的是document对象，xml //dom //获取mes节点 var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes"); //取出mes节点值 //mes[0]->表示取出第一个mes节点 //mes[0].childNodes[0]->表示第一个mes节点的第一个子节点 var mes_val=mes[0].childNodes[0].nodeValue; $('myres').value=mes_val; } } //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式 header("Content-Type: text/xml;charset=utf-8"); //告诉浏览器不要缓存数据 header("Cache-Control: no-cache"); response.setContentType("text/html"); response.setCharacterEncoding("utf-8");      if(!request.getParameter("user").equals("zmc")){      response.getWriter().println("<res><mes>用户名不能够用,对不起</mes></res>");//三号线      }

返回JSON格式：（推荐）

JSON 只是一种文本字符串。它被存储在 responseText 属性中。为了读取存储在 responseText 属性中的 JSON 数据，须要根据 JavaScript 的 eval 语句。函数 eval 会把一个字符串看成它的参数。而后这个字符串会被看成 JavaScript 代码来执行。由于 JSON 的字符串就是由 JavaScript 代码构成的，因此它自己是可执行的

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); String str="{'ceshi':'这个名字能够注册'}"; String str2="{'ceshi':'这个名字不能够注册'}";      if(!request.getParameter("user").equals("zmc")){      response.getWriter().println(str);//三号线      }      else{      response.getWriter().println(str2);//三号线      } } } function chuli(){ if(myXmlHttpRequest.readyState==4){ //取出值,根据返回信息的格式json字符串 //window.alert("服务器返回"+myXmlHttpRequest.responseText); var str = myXmlHttpRequest.responseText; var json = eval("("+str+")"); $('myRes').value=json.ceshi; }

小结:

当一个ajax请求到服务器，服务器能够根据需求返回 三种格式的数据,那么咱们应当选择哪个?

1. 若是你的项目经理没有特殊的要求，建议使用json
2. 若应用程序不须要与其余应用程序共享数据的时候, 使用 HTML 片断来返回数据时最简单的
3. 若是数据须要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优点
4. 当远程应用程序未知时, XML 文档是首选, 由于 XML 是 web 服务领域的 “世界语”

■ ajax经典案例—省市联动

ajax一个最重要的用途就是，动态的从服务器取须要的数据，并在页面无刷新的显示，咱们来看一个经典的用法:省市联动菜单:

1 传统的b/s中，显示省市联动菜单是一次性把数据所有取出，并在客户端显示，这样作数据传输量大，不灵活。

2 使用ajax技术，能够根据用户需求从服务器取数据，当用户点击某个按钮时，才从服务器取数据并显示，灵活。让学生从数据库取出数据，县城级别联动作出.

ajax的省市联动案例(如何动态的从服务器取得数据)，这里只贴了一部分代码：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

function getCities(){ myXmlHttpRequest=getXmlHttpObject(); if(myXmlHttpRequest){ var url="/ajax/showCitiesPro.php";//post var data="province="+$('sheng').value; myXmlHttpRequest.open("post",url,true);//异步方式 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //指定回调函数 myXmlHttpRequest.onreadystatechange=chuli; //发送 myXmlHttpRequest.send(data); } } function chuli(){ if(myXmlHttpRequest.readyState==4){ if(myXmlHttpRequest.status==200){ //取出服务器回送的数据 var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city"); $('city').length=0; var myOption=document.createElement("option"); myOption.innerText="--城市--"; //添加到 $('city').appendChild(myOption); //遍历并取出城市 for(var i=0;i<cities.length;i++){ var city_name=cities[i].childNodes[0].nodeValue; //建立新的元素option var myOption=document.createElement("option"); myOption.value=city_name; myOption.innerText=city_name; //添加到 $('city').appendChild(myOption); } } } } //这里咱们写一个函数 function $(id){ return document.getElementById(id); } </script> </head> <body> <select id="sheng" onchange="getCities();">      <option value="">---省---</option>      <option value="zhejiang">浙江</option>      <option value="jiangsu" >江苏</option>      <option value="sichuan" >四川</option>      </select>      <select id="city">      <option value="">--城市--</option>      </select>       <select id="county">      <option value="">--县城--</option>      </select> </body> </html> **showCitiesProcess.php** <?php //服务器端 //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式 header("Content-Type: text/xml;charset=utf-8"); //告诉浏览器不要缓存数据 header("Cache-Control: no-cache"); //接收用户的选择的省的名字 $province=$_POST['province']; file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND); //如何在调试过程当中，看到接收到的数据 。 //到数据库去查询省有那些城市(如今先不到数据库) $info=""; if($province=="zhejiang"){ $info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>"; }else if($province=="jiangsu"){ $info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>"; } echo $info; ?>

PS:服务器不可能主动给客户端发消息，拿手机收到短信举例，实际上是手机上有一个发射器，它会在规定时间内如2秒定时去服务器上的数据库中查找是否有本身未接收的短信，若是有就接收到。