什么是Ajax
AJAX实际上并不是新技术，而是几个技术的融合。AJAX包含以下5个部分：
1、异步数据获取技术，使用XMLHttpRequest；
2、基于标准的表示技术，使用XHTML和CSS；
3、动态显示和交互技术，使用Document Object Model（文档对象模型）；
4、数据互换和操作技术，使用XML和XSLT；
5、JavaScript，将以上技术融合在一起。其中，异步数据获取技术是所有技术的基础。
Ajax开发案例
开发环境：myeclipse+Tomcat+jdk
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'welcome1.jsp' starting page</title> <script type="text/javascript"> function showInfo(){ //在IE浏览器之下实例化Msxml2.XMLHTTP对象 //var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //非IE浏览器 var xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET","info.jsp",true); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4){ infoDiv.innerHTML = xmlHttp.responseText; } } xmlHttp.send(); } </script> </head> <body> 欢迎使用ajax<br> <input type="button" value="点击获取其他信息" onClick="showInfo()"> <div id="infoDiv"></div> </body> </html> //info.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'info.jsp' starting page</title> </head> <body> 成功调用了AJAX </body> </html>
Ajax开发步骤
1、实例化HTTP对象：
var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
或者var xmlHttp = new XMLHttpRequest();
2、指定异步提交的目标和提交方式，调用了xmlHttp的open方法：
xmlHttp.open("GET","info.jsp",true);
3、指定当xmlHttp状态改变时，需要进行的处理。处理一般是以响应函数的形式进行：
xmlHttp.onreadystatechange = function(){
//处理代码
}
4、编写处理代码：
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4){
infoDiv.innerHTML = xmlHttp.responseText;
}
}
5、发出请求：
xmlHttp.send()
常见的readyState（交互）状态码
0：未初始化状态，对象已经创建，尚未调用open().
1：已初始化状态，调用open（）方法以后。
2：发送数据状态，调用send（）方法以后。
3：数据传送中状态，已经接到部分数据，但接收尚未完成。
4：完成状态，数据全部接收完成。
常见的status（HTTP）状态码
2xx：表示成功处理请求，如200；
3xx：需要重定向浏览器直接跳转；
4xx：客户端请求错误，如404；
5xx：服务器端错误
利用Ajax处理XML文档
将xml文件中的学生姓名载入页面中的下拉菜单。其中，该XML文件是模拟了数据库查询的结果，只不过结果以XML形式输出。
<?xml version="1.0" encoding="UTF-8"?> <students> <student id="1"> <stuno>001</stuno> <stuname>小明</stuname> </student> <student id="2"> <stuno>002</stuno> <stuname>小红</stuname> </student> <student id="3"> <stuno>003</stuno> <stuname>小王</stuname> </student> </students> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'showStudent1.jsp' starting page</title> <script type="text/javascript"> //在IE浏览器之下实例化Msxml2.XMLHTTP对象 //var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //非IE浏览器 var xmlHttp = new XMLHttpRequest(); function loadInfo(){ xmlHttp.open("GET", "students.xml", true); xmlHttp.onreadystatechange=handle; xmlHttp.send(); } function handle(){ if(xmlHttp.readyState==4){ var xmlDom = xmlHttp.responseXML; var names = xmlDom.getElementsByTagName("stuname"); loadForm.stunames.options.length = 0; for(i=0;i<names.length;i++){ var content = names[i].text; loadForm.stunames.options.add(new Option(content,content)); } } } </script> </head> <body> <h4>欢迎来到管理系统</h4> <form name="loadForm"> <select name="stunames"> </select> <input type="button" value="载入学生信息" onClick="loadInfo()"> </form> </body> </html>
使用XML作为传输格式的优势：
1、格式统一，符合标准；
2、容易与其他系统进行远程交互，数据共享比较方便。
使用XML作为传输格式的缺点：
1、 XML文件格式文件庞大, 格式复杂, 传输占用带宽
2、服务器端和客户端都需要花费大量代码来解析XML, 不论服务器端和客户端代码变的异常复杂和不容易维护
3、客户端不同浏览器之间解析XML的方式不一致, 需要重复编写很多代码
4、 服务器端和客户端解析XML花费资源和时间
jQuery中Ajax应用小案例
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'welcome1.jsp' starting page</title> <script src="jquery.min.js"></script> <script type="text/javascript"> function showInfo(){ $("#infoDiv").load("info.jsp",function(){ }) } </script> </head> <body> 欢迎使用ajax<br> <input type="button" value="点击获取其他信息" onClick="showInfo()"> <div id="infoDiv"></div> </body> </html>