AJAX学习笔记

来源：互联网发布：php视频管理系统编辑：程序博客网时间：2024/06/16 02:37

与服务器沟通：发送请求和处理回应
XMLHttpRequest 提供两各存取服务器回应的属性：
1. responseText 将回应产生为字符串
2. responseXML 将回应产生为一个 XML 对象
如果后台返回的XML里包含有标签，可以先在后台把标签的"<"换成"<"；而">"换成">"。这样就

可以当成子元素接收。

处理 XML 文件的 DOM 元素属性：
<element>.childNodes 返回目前元素所有子元素的数组
<element>.firstChild 返回目前元素的第一个子元素
<element>.lastChild 返回目前元素的最后一个子元素
<element>.nodeValue 指定表示元素值的读/写属性
<element>.parentNode 返回元素的父节点
<element>.previousSibling 返回紧邻目前元素之前的元素
<element>.nextSibling 返回目前元素的后面的元素
<element>.tagName 返回目前元素的标签名

沿 XML 文件来回移动的 DOM 元素方法：
document.getElementById(id) 取得有指定唯一ID属性值文件中的元素
document.getElementsByTagName(name) 返回目前元素中有指定标签名的子元素的数组
<element>.hasChildNodes() 返回布尔值，表示元素是否有子元素
<element>.getAttribute(name) 返回元素的属性值，属性由name指定

动态建立内容时所用的 W3C DOM 属性和方法：
document.createElement(tagName) 建立由tagName指定的元素。比如以"div"作为参数，则

生成一个div元素。
document.createTextNode(text) 建立一个包含静态文字的节点。
<element>.appendChild(childNode) 将指定节点增加到目前元素的子节点中。例如：select中

增加option子节点
<element>.getAttribute(name) 取得元素中的name属性的值
<element>.setAttribute(name,value) 设定元素中的name属性的值
<element>.insertBefore(Node1,Node2) 将节点Node1作为目前元素的子节点插到Node2元素前

面。
<element>.removeAttribute(name) 从元素中删除属性name
<element>.removeChild(childNode) 从元素中删除子元素childNode
<element>.replaceChild(newN,oldN) 将节点oldN替换为节点newN
<element>.hasChildnodes() 返回布尔值，表示元素是否有子元素

注意：文字实际上是父元素的一个子节点，所以可以使用firstChild属性来存取元素的文字节点。
有了文字节点后，可以参考文字节点的nodeValue属性来得到文字。
读取XML时，须考虑它的空格和换行符也作为子节点。

跨浏览器技巧：
1. IE不能用setAttribute设定class属性。
解决方法：同时使用 setAttribute("class","newClassName") 和 setAttribute

("className","newClassName")
只使用 <element>.className = "newClassName" 也可行
2. IE中不能使用setAttribute设定style属性。即 <element>.setAttribute("style","fontweight:bold;")

不相容。
解决方法：使用 <element>.style.cssText = "fontweight:bold;"
3. 使用appendChild将<tr>元素直接增加到<table>中，则在IE中这一行并不出现，但其它浏览器却会

出现。
解决方法：在<table>下增加<tbody>元素，再添加<tr>
4. IE不能直接添加按钮处理事件。如：addButton.setAttribute("onclick","addEmployee('unid');");不

适用。
解决方法：addButton.onclick = function() { addEmployee('unid'); };//用匿名函数调用

addEmployee()函数。
此外,onmouseover,onmouseout 等事件也要使用此方法。

Ajax概述：
Ajax是由Jesse James Garrett创造的，是"Asynchronous JavaScript+XML"的缩写
Adaptive Path公司的Jesse James Garrett如是说：
Ajax不是一种新技术，它把几种成熟的技术以新的方式组合而成，形成强大的功能，包含：
基于XHTML和CSS标准的表示；
使用document Object Model进行动态显示和交互；
使用XMLHttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
传统的Web应用是一个同步的交互过程。Ajax是异步的。
AJAX是一个客户端动态网页思想；综合整合使用HTML，CSS，JavaScript，XML等页面技术完成客户

端显示功能，同时以XMLHttpRequest为核心的异步对象与服务端后台通信。

Ajax的优势：
1、减轻服务器的负担
2、AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
3、带来更好的用户体验
4、无刷新更新页面，减少用户心理和实际的等待时间。
5、利用客户端的处理能力
6、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽

的负担
7、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
8、进一步促进页面呈现和数据的分离。

XMLHttpRequest对象(AJAX引擎的核心)
1)作用：实现AJAX的体验
像桌面应用与server进行数据交换
异步
局部刷新
2)目的：减轻server的压力，提高交互的速度
局部刷新页面某个部份，不影响整个页面
3)对象创建(XMLHttpRequest)：
根据不同的浏览器，对XMLHttpRequest对象的初始化有所不同：
<script language="javascript">
var xmlreq = false;
//IE浏览器
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
//旧版本的IE
xmlreq = new ActiveXObject ("Microsoft.XMLHTTP");
} else if ( window.XMLHttpRrquest ) {
xmlreq = new XMLHttpRequest(); //Mozilla浏览器
</script>

4)XMLHttpRequest对象是运行在browser的(Ajax引擎的核心)
状态：
0=未初始化
1=读取中
2=已读取
3=交互中
4=完成

Ajax工具：
1.Html Validator: 火狐插件，代码验证用。本地验证
2.Checky: 火狐插件，代码验证用。第三方验证
3.JsLint: 代码验证用。网站 www.jslint.com 上验证。非常严格

用 iframe 实现 Ajex ( 在 XMLHttpRequest 问世前 )

// ******* iframe.html 的内容 *******
<html>
<head>
<title>remote script in an IFRAME</title>
<script type="text/javascript">

</script>
</head>
<body>
<h1> Remote Scripting with an IFRAME </h1>
<iframe id="beforexhr" name="beforexhr" src="blank.html"
style="width:0px; height:0px; border:0px"> </iframe>
<a href="server.html" target="beforexhr">call the server</a>
</body>
</html>

// ******* server.html 的内容 *******
<html>
<head>
<title>the erver</title>
</head>
<script type="text/javascript">

</script>
<body>
</body>
</html>

使用 responseText 和 innerHTML ：

// ******* innerHTML.html 的内容 *******
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using responseText with innerHTML</title>
<script type="text/javascript">

</script>
</head>
<body>
<form action="#" >
<input type="button" value="Activities" onclick="startRequest();" />
</form>
<div id="results" ></div>
</body>
</html>

// ******* innerHTML.xml 的内容 ********
<table border="1">
<tbody>
<tr>
<th>Activity Name</th>
<th>Location</th>
<th>Time</th>
</tr>
<tr>
<td>Hiking</td>
<td>Trail 3</td>
<td>3:30 PM</td>
</tr>
<tr>
<td>Idede</td>
<td>Trail 5</td>
<td>5:00 PM</td>
</tr>
</tbody>
</table>

发送请求参数：(比较 GET 和 POST )
//此方法仅为举例而写，下面的 GET 和 POST 都用到。
function createQueryString() {
var firstName = document.getElementById("firstName").value;
var middleName = document.getElementById("middleName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName=" + firstName + "&middleName=" + middleName;
queryString += "&birthday=" + birthday;
return queryString;
}

// GET 形式
function doRequestUsingGET() {
createXMLHttpRequest(); //此通用方法，省略。具体写法见使用 responseText 和 innerHTML 例

子。
var queryString = "GetAndPostExample?";
queryString += createQueryString() + "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange; // handleStateChange方法同样省略。不

是本节重点。
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}

// POST 形式
function doRequestUsingPOST() {
createXMLHttpRequest(); //此通用方法，省略。
var url = "GetAndPostExample?&timeStamp=" + new Date().getTime(); //此句不同。
var queryString = createQueryString();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange; // handleStateChange方法省略。
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); //此句

不同。
xmlHttp.send(queryString); //此句不同。
}

说明：这例子为什么把时间戳记加到URL中？
有些浏览器会把多个XMLHttpRequest请求的结果快取到同一个URL。附加时间戳记，确保URL的唯

一性。
使用 POST 还可以把请求参数作为XML发送。写法一样，POST的最后一行：xmlHttp.send(xmlName);

建立XML如：
function createXML() {
var xmlName = "<pets>";
var options = document.getElementById("petTypes").childNodes;
var option = null;
for ( var i = 0; i < options.length; i++ ) {
option = options[i];
if ( option.selected ) {
xmlName += "<type>" + option.value + "<\/type>";
}
}
xmlName += "<\/pets>";
return xmlName;
}

说明：上述方法为什么结束标签的斜线前有一个反斜线？如："<\/pets>"
SGML规约(HTML就是SGML发展来的)。使用反斜线可以避免把字符串解析为标签，大多数浏览器上不

使用也可以，但严格上应该用。

事例1：表单验证(验证日期格式)

(1)validation.html 的内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script type="text/javascript">

</script>
</head>

<body>
Birth Date:<input type="text" size="10" id="birthDate" onchange="validate();" />
<div id="dateMessage"></div>
</body>
</html>

(2)ValidationServlet.java 的内容(在servlet目录下)：
package servlet;
import java.io.*;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import javax.servlet.ServletException;
import javax.servlet.http.*;
public class ValidationServlet extends HttpServlet{
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
PrintWriter out = response.getWriter();
boolean passed = validateDate(request.getParameter("birthDate"));
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String message = "You have entered an invalid date.";
if (passed){ message = "You have entered a valid date."; }
out.println("<response>");
out.println("<passed>" + Boolean.toString(passed) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
// out.flush();
out.close();
}
private boolean validateDate(String date) {
boolean isValid = true;
if ( date != null ){
SimpleDateFormat formatter = new SimpleDateFormat("MM/dd/yyyy");
try {
formatter.parse(date);
System.out.println("验证成功！");
}catch(ParseException pe){
System.out.println("输入不合法!");
isValid = false;
}
} else {
isValid = false;
}
return isValid;
}
}

(3)web.xml 里添加的内容：
<servlet>
<servlet-name>ValidationServlet</servlet-name>
<servlet-class>servlet.ValidationServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ValidationServlet</servlet-name>
<url-pattern>/ValidationServlet</url-pattern>
</servlet-mapping>

效果：在页面输入日期后，后台自动验证输入。
如果是符合“月份/日期/四位数年份”格式的，则输入框下面绿色提示。不符合则红色提示。

事例2：建立提示框
效果：鼠标移动到某栏目上，提示框提示相关信息。鼠标离开，提示框消失。

ToolTip.html 的内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax ToolTip.html</title>
<script type="text/javascript"></script>
</head>
<body>
<h3>Golf Courses</h3>
<table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr><td id="1" onmouseover="getCourseData(this);"
onmouseout="clearData();">Augusta National</td></tr>
<tr><td id="2" onmouseover="getCourseData(this);"
onmouseout="clearData();">Pinehurst No.2</td></tr>
<tr><td id="3" onmouseover="getCourseData(this);"
onmouseout="clearData();">St. Andrews Links</td></tr>
<tr><td id="4" onmouseover="getCourseData(this);"
onmouseout="clearData();">Baltusrol Golf Club</td></tr>
</tbody>
</table>
<div style="position:absolute;" id="popup">
<table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2" >
<tbody id="courseDataBody"></tbody>
</table>
</div>
</body>
</html>

ToolTipServlet.java (这是一个Servlet，web.xml配置不再写了)的内容：

package servlet;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class ToolTipServlet extends HttpServlet {
private Map courses = new HashMap();
public void init(ServletConfig config) throws ServletException {
//这里作简化处理，以内部类保存数据。实际中会去数据库查询资料
CourseData augusta = new CourseData(72, 7290);
CourseData pinehurst = new CourseData(70, 7214);
CourseData standrews = new CourseData(73, 6566);
CourseData baltusrol = new CourseData(69, 7392);
courses.put(new Integer(1), augusta);
courses.put(new Integer(2), pinehurst);
courses.put(new Integer(3), standrews);
courses.put(new Integer(4), baltusrol);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Integer key = Integer.valueOf(request.getParameter("key"));
CourseData data = (CourseData) courses.get(key);
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println("<par>" + data.getPar() + "</par>");
out.println("<length>" + data.getLength() + "</length>");
out.println("</response>");
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doGet(request,response); }
//内部类保存数据。
private class CourseData {
private int par;
private int length;
public CourseData(int par, int length){
this.par = par; this.length = length;
}
public int getPar(){ return par; }
public void setPar(int par) { this.par = par; }
public int getLength() { return length; }
public void setLength(int length){ this.length = length; }
}
}

// *************** 常用Ajax工具开始 ***************

/**
* 这是出错调试代码
* 当页面发生错误时，提示错误信息
* @param msg 出错信息
* @param url 出错文件的地址
* @param sLine 发生错误的行
* @return false
*/
window.onerror = function ( msg, url, sLine )
{
var errorMsg = "There was an error on this page.\n\n";
errorMsg += "Error: " + msg + "\n";
errorMsg += "URL: " + url + "\n";
errorMsg += "Line: " + sLine + "\n\n";
errorMsg += "Click OK to continue.\n\n";
// 判斷網址,測試時可以提示出錯訊息;正式發布時不提示
if ( url.indexOf("http://localhost") >= 0 || url.indexOf("http://127.0.0.1") >= 0 ||
url.indexOf("http://192.168.") >= 0 )
{
window.alert( errorMsg );
}
return false;
}

/**
* 給頁面上的 Enter 鍵賦以事件。
* @param event 使用firefox時，必須用參數接收 window.event。
* 而IE則需直接使用 window.event，參數接收不到任何內容
* @return 無
*/
window.document.onkeydown = function ( event )
{
// 為兼顧 IE 和 FireFox
event = event || window.event;
// 如果取不到頁面事件
if ( !event ) return;
// 取得頁面上的按鍵碼
var currentKey = event.charCode || event.keyCode;
// 取得事件源
var eventSource = event.target || event.srcElement;
// 多行輸入框,允許輸入換行符
if ( "TEXTAREA" === eventSource.tagName ) return true;
// 如果是 Enter 鍵, 執行指定程式
if ( 13 === currentKey )
{
try
{
// 執行指定程式
alert("Enter 事件");
}
catch (e)
{
}
event.returnValue = false;
return false;
}
}

/**
* Ajax类
*/
var Ajax = new Object();

/**
* XMLHttpRequest
* 注意：使用这个属性，得保证上次的请求已经传回，否则会影响上一次的请求
* 建议在回调函数里接收参数，保证短时间内多次发送请求而不受影响
*/
Ajax.xmlHttp = null;

/**
* 生成 XMLHttpRequest
* @return XMLHttpRequest
*/
Ajax.createXMLHttpRequest = function()
{
var request = false;
//如果是 firefox 等浏览器
if ( window.XMLHttpRequest )
{
// 引用XMLHttpRequest
request = new XMLHttpRequest();
if ( request.overrideMimeType )
{
//设置类型
request.overrideMimeType('text/xml');
}
}
//如果是 IE
else if ( window.ActiveXObject )
{
//IE 的各个版本
var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0',
'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
//由新至旧，尝试各版本
for ( var i = 0; i<versions.length; i++ )
{
try
{
//引用ActiveXObject
request = new ActiveXObject(versions[i]);
// 如果能取得值
if ( request )
return request;
}
//例外只捕获，不处理
catch ( e )
{
}
}
}
//设置 Ajax.xmlHttp
Ajax.xmlHttp = request;
return request;
}

/**
* 发送请求
* 注意：回调函数建议接收参数 xmlHttp；不接收可使用 Ajax.xmlHttp 属性
* @param url 需要发送的地址
* @param sendString 需要发送的传参语句
* @param callback 回调函数
* @param need_status 是否需要判断 status，需要则填 true，不需要写false
* @param 第5个及之后的参数都将按顺序传给回调函数
* 注意回调函数的第一个参数是 xmlHttp，然后是 Ajax.send() 方法的第5个及之后的参数
* @return 无
*
* 使用实例：
* <br/> //发送请求
* <br/> Ajax.send("submit.jsp", "a=1&b=2", callbackFun, false, args1, args2, ... );
* <br/> //回调函数
* <br/> function callbackFun(xmlHttp, args1, args2, ... ){ //code... }
*/
Ajax.send = function ( url, sendString, callback, need_status )
{
//产生 XMLHttpRequest
var xmlHttp = Ajax.createXMLHttpRequest();
//执行回调函数的动态函数
var dosomeMethod = null;
//参数列表，将传递给回调函数
var args = new Array();
//如果没有发送地址，则下面的都不用执行
if ( !url )
return;
//如果不支持 Ajax
if ( !xmlHttp )
{
alert("This browser was not support Ajax, some function cannot use!");
return;
}
//如果有回调函数
if ( callback )
{
//动态函数的函数体，执行回调函数，第一个参数是 xmlHttp
var funStr = "callback( xmlHttp";
//循环的增加参数
for ( var i = 4; i < arguments.length; i++ )
{
args[i - 4] = arguments[i];
funStr += ", args[" + (i - 4) + "]";
}
funStr += ");";
//动态函数，函数体是字符串。用这方法是为了传递可变长参数给回调函数
dosomeMethod = new Function("callback", "xmlHttp", "args", funStr);
}

//发送请求
url += "?&timeStamp=" + new Date().getTime();
xmlHttp.open("POST", url, true);
//这匿名函数，让回调函数省去重复的判断
xmlHttp.onreadystatechange = function()
{
// 让回调函数省去这一步的判断
if ( 4 !== xmlHttp.readyState )
return;
// 如果回调函数需要判断 xmlHttp.status != 200 的情况，则传给它判断
if ( "true" === ("" + need_status).toLowerCase() )
return dosomeMethod(callback, xmlHttp, args);
// 如果回调函数不需要判断 xmlHttp.status ，则帮它的判断
if ( 200 !== xmlHttp.status )
return;
// 执行回调函数
dosomeMethod(callback, xmlHttp, args);
};
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send(sendString);
}

/**
* 取得xmlHttp里相应的资料
* @param xmlHttp XMLHttpRequest
* @param tagName 资料的 TagName
* @param init 默认值
* @param index 第几个子元素
* @return 相应的数据的字符串
*/
Ajax.getValue = function ( xmlHttp, tagName, init, index )
{
var value = "";
var i = 0;
//如果指定默认值
if ( init )
value = init;
//如果指定第几个子元素
if ( index )
i = index;
//如果没有 xmlHttp，取属性的
if ( !xmlHttp )
xmlHttp = Ajax.xmlHttp;
//如果还是没有 xmlHttp，没法继续执行
if ( !xmlHttp )
return value;
//如果没有 tagName ，没法继续执行
if ( !tagName )
return value;

try
{
//取得xmlHttp里对应的值
var element1 = xmlHttp.responseXML.getElementsByTagName(tagName)[i].firstChild;
value = element1.nodeValue;
//如果能取得值
if ( value )
return value;
return element1.data;
}
catch ( e )
{
//发生异常时，如果有默认值，传回默认值
if ( init )
return init;
//如果没有默认值，且 value 为空，则传回""
if ( !value )
return "";
//如果 value 能取得值
return value;
}
}

// *************** 常用Ajax工具结束 ***************