Ajax技术是javaScript、xml、css、dom等多种技术的组合，可以实现客户端的异步请求操作。 优点： 1、 减轻服务器负担。Ajax的原则是“按需求获取数据”，这可以最大程度的减少冗余请求和响应对应服务器造成的负担。 2、 可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源经行处理，减轻服务器和带宽的负担，节约成本和空间。 3、 无刷新更新页面，从而使用户不用在像以前那样在服务器处理数据时，只能在死板的白屏等待。Ajax使用xmlHttpRequest对象发送请求并得到服务器响应，在不需要重新载入整个页面的情况下，就可以通过dom及时的将更新的内容显示到页面上。 4、 可以调用XML等外部数据，进一步促进页面显示和数据的分离。 初始化XMLHttpRequest对象。 var http_request=false; if(window.XMLHttpRequest){ //非IE浏览器创建XMLHttpRequest对象 http_request=new XMLHttpRequest(); }else if(window.ActiveXObject){ //IE浏览器创建XMLHttpRequest对象 try{ http_request=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } if(!http_request){ alert("XMLHttpRequest对象创建失败"); } XMLHttpRequest对象常用方法 Open(“method”,”URL”,[asyncflag,”username”,”password”]); 参数 说明 method 用于指定请求的类型，一般为get或post url 用于指定请求地址，可以使用绝对地址或相对地址，并且可以传递查询字符串 asyncflag 可选，指定请求方式，异步true，同步false，默认true Username，password 可选，请求的用户和密码。 Send(content)方法：发送数据的方法，content可以是dom、输入流、字符串。无救发送null。 setRequestHeader()方法：设置HTTP头信息。 abort方法：停止或放弃异步请求。 getResponseHeader(String)方法：以字符串的方式获取HTTP的头信息。 getAllResponseHeader()方法：获取所有的HTTP头信息。 XMLHttpRequest对象常用属性 onreadystatechange属性：请求状态改变时触发的事件。 readyState属性：请求的状态。 值 含义 0 未初始化 1 正在加载 2 已加载 3 交互中 4 完成 responseText属性：服务器响应为字符串。 responseXML属性：服务器响应为XML。 status属性：HTTP响应状态。 值 含义 200 表示成功 202 请求被接受，但为成功 400 错误请求 404 文件未找到 505 服务器内部错误 statusText属性：HTTP状态码对应的文本。 文本请求实例 var http_request; function fn_httprequest(){ http_request=false; if(window.XMLHttpRequest){ //非IE浏览器创建XMLHttpRequest对象 http_request=new XMLHttpRequest(); }else if(window.ActiveXObject){ //IE浏览器创建XMLHttpRequest对象 try{ http_request=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("不能创建对象"); } } } if(!http_request){ alert("XMLHttpRequest对象创建失败"); return false; } //调用返回结果处理函数 http_request.onreadystatechange=getResult; //创建服务器链接 http_request.open("GET","Deal.jsp",true); //http_request.setRequestHeader("contentType","text/html; charset=UTF-8"); //发送一个空请求。 http_request.send(null); } //响应请求处理函数 function getResult(){ if(http_request.readyState==4){ if(http_request.status==200){ alert(http_request.responseText); }else{ alert("请求失败"); } } } JQuery技术 在 参数中使用标记名 $(“标签名”) 在参数中使用标签名的ID $(“#id”) 在参数中使用Css类名 $(“.classname”) Jquery使用方法 <script type="text/javascript" src="js/jquery.js"></script> 或 <script language="javascript" src=" js/jquery.js "></script> 引用函数 建议：使用jquery的版本最好使用稳定的版本，新出的版本会有一些更改或者不兼容的问题。 <script type="text/javascript"> $(function(){ $("a").click(function(){ alert("OK"); }); }); </script> 或 <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ alert("OK"); }); }); </script> 以上两种方法的使用起来是一样的。 另一种使用方法为： <script type="text/javascript"> window.onload=function(){ $("a").click(function(){ alert("OK"); }); } </script> 两种方法是有区别的： Window.onload()方法是在页面所有的东西都加载完毕后才会执行；在一个页面中只可以存在一个。 $(document).ready()方法则是在dom元素载入就绪后执行；在一个页面中可以存在多个。 两种方法也可以同时出现在同一个页面。 Load()方法，通过ajax请求技术从服务器加载数据，并把返回的数据放置到指定元素中。 语法：$(“”).load(url,data,function(responseText,textStatus,XMLHttpRequest)); url:访问的地址。 Data：可选，根据请求一同发送给服务器的数据。 function(responseText,textStatus,XMLHttpRequest)：得到服务器响应执行的函数，responseText请求到的内容，textStatus请求的状态，XMLHttpRequest对象。 例子： <div id="time">点击请求时间。。。</div> <script type="text/javascript"> window.onload=function(){ window.setInterval("$('#time').load('requesttime.jsp');",1000); } </script> 请求页面数据代码： <%@page import="java.text.SimpleDateFormat"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.Date,java.text.*"%> <% out.println(new SimpleDateFormat("YYYY-MM-dd HH:mm:ss").format(new Date())); %> 如果是请求页面内一部分标签的信息，可以写成下面的形式 $('#time').load('requesttime.jsp #webtxt'); 请求页面内容： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div id="webtxt">HHHKKK</div> </body> </html> Get()和Post()请求 Get()方法： 语法： $.get(url,data,function(data,textStatus,XMLHTTPRequest),dataType); url:访问的路径。 data:可选，访问传递的参数，以{Key/Value, Key/Value …}的方式发送。 function(data,textStatus,XMLHTTPRequest):可选，请求载入成功后调用的函数，data返回的数据信息，textStatus请求的状态，XMLHTTPRequest对象。 dataType:可选，指定返回的数据类型。可以为：XML,JSON,Script,Html。默认Html。 例子： 请求页面信息： <button id="time">dian</button> <div id="txtshow"></div> window.onload=function(){ $("#time").click(function(){ $.get("requesttime.jsp",function(data){ $("#txtshow").text(data); $("#txtshow").show(); })} ); } 响应页面信息： <%@page import="java.text.SimpleDateFormat"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.Date,java.text.*"%> <% out.println(new SimpleDateFormat("YYYY-MM-dd HH:mm:ss").format(new Date())); %> Post()方法使用起来跟get方法是一模一样的都是异步请求，参数也都相同，这里就不在重复介绍。 下面介绍一下使用get或post方法请求到的数据如何处理。 Html数据类型。 如果是html数据类型，使用回调函数直接让其显示到对应的标记内就可以。关键就是html封装函数的作用。 window.onload=function(){ $("#time").click(function(){ $.get("requesttime.jsp",function(data){ $("#txtshow").html(data); })} ); } XML数据类型处理： window.onload=function(){ $("#time").click(function(){ $.get("requesttime.jsp",function(data){ //创建接受数据变量msg var msg=""; //使用jquery的find函数和each函数变量XML数据里的message标签里的内容信息并添加到msg变量里 $(data).find("message").each( function(){ msg+="<br>"+$(this).text(); } ); //将内容显示出来 $("#txtshow").html(msg); },"XML")} ); } XML的数据内容： <Root> <message>你好</message> <message>哦</message> <message>恩</message> </Root> JSON数据类型处理： window.onload=function(){ $("#time").click(function(){ $.get("MyServlet?action=doPost",function(data){ //创建接受数据变量msg var msg=""; //使用全局eval函数出来json格式的数据给chars变量 var chars=eval(data); //使用jquery的each函数将chars变量接受到的josn数据根据Key值获取内容信息并添加到msg变量里 $.each(chars, function(i){ msg+="<br>"+chars[i].name; } ); //将内容显示出来 $("#txtshow").html(msg); },"JSON")} ); } 请求的内容Servlet内容 //设置响应类型为json格式数据 response.setContentType("application/json;charset=UTF-8"); //创建输出流 PrintWriter out=response.getWriter(); out.println("[{"name":"xx"},{"name":"yy"}]"); out.flush(); out.close(); json格式： 对象格式： {“key”:”value”,“key”:”value”,….} 数组格式： {group:[ {“key”:”value”,“key”:”value”},{“key”:”value”,“key”:”value”},….]} $.ajax()方法的使用 语法： $.ajax(url,[seting参数]); Seting参数列表： 参数 说明 type 指定请求方式：get或post，默认get Data 指定发送到服务器的数据，以key:value的方式传送。发送get请求时，可以同设置processData参数为false，禁止将发送的数据自动转换，一般不用。 DataType 用于指定服务器返回的数据类型。值有：text，xml，html，script，json。 async 设置发送请求的方式。默认true，为异步请求，false为同步请求。 BeforeSend(XMLHTTPRequest,setting) 发送请求前可以修改XMLHttpRequest对象的函数，例如添加请求HTTP头。 Complete(XMLHTTPRequest,textStatus) 请求完成后调用的函数，无论请求成功或失败都会调用。 Error(XMLHTTPRequest,textStatus,errorThrown) 请求失败是调用。 Success(data, textStatus, XMLHTTPRequest) 请求成功是调用的函数。 Global 设置是否全局触发ajax事件，boolean类型。 Timeout 设置请求超时时间，单位为毫秒，覆盖全局。 Cache 设置是否从浏览器缓存中加载请求信息，boolean类型。当dataType值为script和jsonp是值为false。 DataFilter(data,type) 对返回的数据类型进行预处理的函数， ContentType 设置发送信息数据到服务器是内容编码类型。默认application/x-www-form-urlencoded。 ifModified 用于设置是否仅在服务器数据改变时获取新数据。Boolean类型。默认false。