AJAX简介
Ajax概念
Ajax 是Web开发一个流行的词汇，全称Asynchronous JavaScript and XML，异步的JavaScript和XML。是几种技术的强强联合。
Ajax如何工作
Ajax（即异步 JavaScript和XML）是一种Web应用程序开发的手段，它采用客户端脚本与Web服务器交换数据。
为什么要学习Ajax
使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
XMLHttpRequest对象简介
XMLHttpRequest对象是整个Ajax开发的基础
提供客户端和服务器异步通信的能力
能够向服务器发出请求
能够接收服务器的返回页面
最早出现在IE，随着应用的广泛，渐渐推广到其他浏览器中
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject
发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和send()方法：
Jsp代码的编写：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> //定义一个获取dom对象的方法 function $(id){ return document.getElementById(id); } //查询事件 function query(){ //获取查询的关键字 var ename=$("qename").value; //声明一个XMLHttpRequest变量并用兼容性的方法创建对象 var xhr; if(window.XMLHttpRequest){ //code for IE7+, Firefox, Chrome, Opera, Safari等等浏览器 xhr=new XMLHttpRequest(); }else{ //code for IE6, IE6 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } /* xmlhttp.open() 参数1：请求的方式 参数2：请求的路径 参数3：true异步 false同步 */ xhr.open("POST","${pageContext.request.contextPath}/ajax",true); // ajax会调用后台action回调该方法多次 // readyState 属性存有 XMLHttpRequest 的状态信息。 // 0：请求未初始化 // 1：服务器连接已建立 // 2：请求收接收 // 3：请求处理中 // 4：请求已完成，且响应已就绪 // 所以这里需要判断readyState等于4的时候再去获取json // 设置响应的回调函数 当后台的json返回后 自动调用xhr.onreadystatechange指定的函数 xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200/*判断响应的状态码:200为响应正常*/){ //获取到jsonS 当前的json是一个字符串 var sJson=xhr.responseText; //console.log(sJson); var oJson = JSON.parse(sJson); //首先获取取table的dom对象 var oTbody = $("tbody"); oTbody.innerHTML=""; for(var i=0; i<oJson.length; i++){ var oTr = document.createElement("tr"); var oTb1 = document.createElement("td"); oTb1.innerHTML=oJson[i].ENO; var oTb2 = document.createElement("td"); oTb2.innerHTML=oJson[i].ENAME; var oTb3 = document.createElement("td"); oTb3.innerHTML=oJson[i].SAL; oTr.appendChild(oTb1); oTr.appendChild(oTb2); oTr.appendChild(oTb3); oTbody.appendChild(oTr); } } } //send()需要传递参数的时候必须加上 // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") // 这句代码，不然send()的参数是无法传递的， open里的method也要改为"POST" xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("ename="+ename); } </script> </head> <body> <form> <input type="text" name="ename" /> <input type="button" value="查询" οnclick="query()" /> </form> <table border="1" cellpadding="10" cellspacing="0"> <thead> <tr> <td>编号</td> <td>姓名</td> <td>薪水</td> </tr> </thead> <tbody id="tbody"> </tbody> </table> </body> </html>
Java代码：
package cn.et.springmvc.lesson05.emp.controller; import java.io.UnsupportedEncodingException; import java.util.List; import net.sf.json.JSONArray; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import cn.et.springmvc.lesson05.emp.service.EmpService; @Controller public class AjaxAction { @Autowired private EmpService service; /** * ajax请求跳转是没有用的，所以返回字节数组 * 表示将json转换为字节输出给响应流 * * @ResponseBody 这里修改了返回值，所以必须要加上这句代码 * @return * @throws UnsupportedEncodingException */ @ResponseBody @RequestMapping(value="/ajax") public byte[] ajax(String ename) throws UnsupportedEncodingException{ List list = service.query(ename); //将数组、对象或者集合转换成字符串的json 再传给xhr对象 //把list集合转换成json字符串 String json = JSONArray.fromObject(list).toString(); return json.getBytes("UTF-8"); } }
