jQuery与Ajax

什么是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>