首先说一下什么是Ajax
Ajax的全称是Asynchronous JavaScript and XML（是异步的 javascript 和 XML），
通过后台少量的数据交换实现不刷新网页从而进行网页动态的技术，ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax能传输的数据格式一共有三种，HTML格式，XML格式，JSON格式
一，HTML格式
使用HTML传输格式，最大特点是要使用DOM方法，获取结点，通过结点进行操作使用innerHTML进行对DOM标签的值写入，从而实现异步更新
首先放HTML代码，下面的文件是从这一段代码来获取数据的
1 <h2><a >Andy</a></h2> 2 <a>aaaaaa</a>
然后放JSP代码，
首先要获取到对象的onlick方法，并且retuen fales这样做的目的是为了废除让a标签的跳转方法
然后按一下几个步骤执行
1.创建一个XMLHttpRequest对象
2.准备发送的数据，一般准备两个一个URL一个Method
3.调用XMLHttpRequest对象的Open方法，和Send方法，为了方便记忆，这里为了方便理解我所认为就是Open就是准备阶段，send就是发送。
4.调用XMLHttpRequest对象的onreadystatechange()方法，这个方法会和数据或者服务器进行交互，并且这个过程会有4部，只有当XMLHttpRequest对象的readyState为4的时候表示交互完成
5.调用XMLHttpRequest对象的status方法，这个对象代表的网页状态比如404（找不到网页） ，500（服务器内部错误），200（成功），
6操作DOM对标签的值进行写入XMLHttpRequest对象的responseText就是返回的文本
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%
3 String path = request.getContextPath();
4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5 %>
6
7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
8 <html>
9 <head>
10 <base href="<%=basePath%>">
11 <title>Ajax HTML格式传输</title>
12 <script type="text/javascript">
13 window.onload = function(){
14 //1.获取a结点，并为其添加相应的onclick函数
15 document.getElementsByTagName("a")[0].onclick = function(){
16 //3.创建一个XMLHttpRequest对象
17 var request = null;
18 request = new XMLHttpRequest();
19 //4.准备发送的数据:url
20 var url =this.href ;
21 var method = "GET";
22 //5.调用XMLHttpRequest的 Open 方法
23 request.open(method, url);
24 //6.调用XMLHttpRequest的 send 方法
25 request.send(null);
26 //7.为XMLHttpRequset 对象添加onreadystatechange相应函数
27 request.onreadystatechange = function(){
28 //8.用requset对象的readyState方法判断是否进行到了第四步
29 if(request.readyState == 4){
30 //9.用requset对象的status判断页面请求是否成功
31 if(request.status == 200 || request == 304){
32 //2.获取到输入信息结点并放入返回的值
33 document.getElementById("andy").innerHTML = request.responseText;
34 }
35 }
36 }
37 return false;
38 }
39 }
40 </script>
41 </head>
42
43 <body>
44 <a href="files/Ajax_HTML.html">andy</a>
45 <div id="andy"></div>
46 </body>
47 </html>
二，XML格式
我认为，XML操作比HTML操作更为复杂，比上面就多了一个XML解析而已。
同上首先先放XML代码
1 <?xml version="1.0" encoding="UTF-8"?> 2 <detalis> 3 <name>Andy</name> 4 <text>hahahahahaah</text> 5 </detalis>
然后放JSP代码
过程基本相同，只不过HTML传输格式传输使用responseText,而这里通过responseXML来获取XML文档，然后解析或者子节点的值在对DOM进行操作。
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%
3 String path = request.getContextPath();
4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5 %>
6
7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
8 <html>
9 <head>
10 <base href="<%=basePath%>">
11 <title>Ajax XML格式传输</title>
12 <script type="text/javascript">
13 window.onload = function(){
14 //1.获取a结点，并为其添加相应的onclick函数
15 document.getElementsByTagName("a")[0].onclick = function(){
16 //3.创建一个XMLHttpRequest对象
17 var request = new XMLHttpRequest();
18 //4.准备发送的数据:url
19 var url =this.href ;
20 var method = "GET";
21 //5.调用XMLHttpRequest的 Open 方法
22 request.open(method, url);
23 //6.调用XMLHttpRequest的 send 方法
24 request.send(null);
25 //7.为XMLHttpRequset 对象添加onreadystatechange相应函数
26 request.onreadystatechange = function(){
27 //8.用requset对象的readyState方法判断是否进行到了第四步
28 if(request.readyState == 4){
29 //9.用requset对象的status判断页面请求是否成功
30 if(request.status == 200 || request == 304){
31 //结果是XML格式，所以需要使用respinseXML来获取
32 var result =request.responseXML;
33 //结果不能使用来先创建对应的结点再将结果加入到#Andy中
34 /*
35 目标格式为
36 <h2><a >Andy</a></h2>
37 <a>aaaaaa</a>
38 */
39 var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
40 var text = result.getElementsByTagName("text")[0].firstChild.nodeValue;
41 //alter(name);
42 //alter(text);
43 var nodea = document.createElement("a");
44 nodea.appendChild(document.createTextNode(name));
45 var nodeaa = document.createElement("a");
46 nodeaa.appendChild(document.createTextNode(text));
47 var andy = document.getElementById("andy");
48 andy.appendChild(nodea);
49 andy.appendChild(nodeaa);
50 }
51 }
52 }
53 return false;
54 }
55 }
56 </script>
57 </head>
58
59 <body>
60 <a href="files/Ajax_XML.xml">andy</a>
61 <div id="andy"></div>
62 </body>
63 </html>
三，json格式
先说什么是JSON，json是javascript原生的，一种轻量级用户数据交换的一个东西，
json中只能通过键值对的方式来存储数据，在js中使用的试用直接.键值就可以获得队形的VALUE
值也可以再是一个json对象
比如，这就是一会要用的js文件
1 {"person":{ 2 "name":"andy", 3 "text":"hahahaha" 4 } 5 }
下面上js代码
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%
3 String path = request.getContextPath();
4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5 %>
6
7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
8 <html>
9 <head>
10 <base href="<%=basePath%>">
11 <title>Ajax XML格式传输</title>
12 <script type="text/javascript">
13 window.onload = function(){
14 //1.获取a结点，并为其添加相应的onclick函数
15 document.getElementsByTagName("a")[0].onclick = function(){
16 //3.创建一个XMLHttpRequest对象
17 var request = new XMLHttpRequest();
18 //4.准备发送的数据:url
19 var url =this.href ;
20 var method = "GET";
21 //5.调用XMLHttpRequest的 Open 方法
22 request.open(method, url);
23 //6.调用XMLHttpRequest的 send 方法
24 request.send(null);
25 //7.为XMLHttpRequset 对象添加onreadystatechange相应函数
26 request.onreadystatechange = function(){
27 //8.用requset对象的readyState方法判断是否进行到了第四步
28 if(request.readyState == 4){
29 //9.用requset对象的status判断页面请求是否成功
30 if(request.status == 200 || request == 304){
31
32 var result =request.responseText;
33 var object = eval( "(" + result + ")" );
34 //结果不能使用来先创建对应的结点再将结果加入到#Andy中
35 /*
36 目标格式为
37 <h2><a >Andy</a></h2>
38 <a>aaaaaa</a>
39 */
40 var name = object.person.name;
41 var text = object.person.text;
42 //alter(name);
43 //alter(text);
44 var nodea = document.createElement("a");
45 nodea.appendChild(document.createTextNode(name));
46 var nodeaa = document.createElement("a");
47 nodeaa.appendChild(document.createTextNode(text));
48 var andy = document.getElementById("andy");
49 andy.appendChild(nodea);
50 andy.appendChild(nodeaa);
51 }
52 }
53 }
54 return false;
55 }
56 }
57 </script>
58 </head>
59
60 <body>
61 <a href="files/Ajax_json.js">andy</a>
62 <div id="andy"></div>
63 </body>
64 </html>
初学者，这些只是个人理解。
时间： 2024-12-20 04:55:17