Ajax笔记

发布时间：2020-12-15 21:50:03 所属栏目：百科来源：网络整理

导读：1.Ajax涉及到的7项目技术中，个人认为Javascript,DOM,XML,XMLHttpRequest 比较有用。 -Javascript一直被定位为客户端的脚本语言，应用最多的地方是表单数据校验。可用通过Javascript操作XMLHttpRequest，来跟数据库打交道。 -DOM(Document Object Model)是

1.Ajax涉及到的7项目技术中，个人认为Javascript,DOM,XML,XMLHttpRequest 比较有用。
-Javascript一直被定位为客户端的脚本语言，应用最多的地方是表单数据校验。
可用通过Javascript操作XMLHttpRequest，来跟数据库打交道。
-DOM(Document Object Model)是提供给HTML和XML使用的一组API，
提供了文件的表述结构，并可用利用它改变其中的内容和可见物。
脚本语言通过DOM才可以跟页面进行交互。
开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。
-XML(Extensible Markup Language)可以规范地定义结构化数据，使网上传输的数据和文档符合统一的标准。
用XML表述的数据和文档，可以很容易地让所有程序共享。
-XMLHttpRequest是XMLHTTP组件的对象。
通过这个对象，Ajax可以像桌面应用程序一样，只同服务器进行数据层面的交换，而不用每次都刷新界面，
也不用每次将数据处理的工作都交给服务器来做。
这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
·XMLHttpRequest对象初始化：
<script language="javascript">
var http_request=false;
if(window.XMLHttpRequest) { // Mozilla,Safari,...
http_request = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
</script>
·XMLHttpRequest对象的方法：
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返回完整的headers
getResponseHeader("headerLable") 作为字符串返回单个的header标签
setRequestHeader("lable","value") 设置header并和请求一起发送
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) 设置未决的请求目标URL，方法，和其他参数
send(content) 发送请求
·XMLHttpRequest对象的属性：
onreadystatechange 状态改变的事件触发器
readyState 对象状态（integer） 0＝未初始化，1＝读取中，2＝已读取，3＝交互中，4＝完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码，如404＝文件未找到，200＝成功
statusText 服务器返回的状态文本信息

2.初步的开发框架：
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发起请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { //IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { //异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
//确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET",url,true);
http_request.send(null);
}
//处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { //判断对象状态
if (http_request.status == 200) { //信息已经成功返回，开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>

3.DOM树的根结点是个Document对象。
·常用Document方法:
createAttribute(),createComment(),createElement(),createTextNode(),getElementById(),getElementsByTagName()
·Element常用属性：
getAttribute(),getAttributeNote(),getElementByTabName(),hasAttribute(),removeAttribute(),removeAttributeNode(),
setAttribute(),setAttributeNode()
·Node对象常用属性：
attributes,childNodes,firstChild,lastChild,nextSibling,nodeName,nodeType,parentNode,previousSibling,
appendChild(),cloneNode(),hasChildNodes(),insertBefore(),removeChild(),replaceChild()

4.例子
·数据校验 test.htm,sample1_2.htm,
·级联菜单 test.htm,sample2_2.htm
·历遍文档的节点 sample3_1.htm
·修改文档的内容 sample4_1.htm,sample4_2.htm,sample4_3.htm
·往文档添加新内容 sample5_1.htm
·使用DOM操作XML文档 sample6_1.htm,employees.xml
·处理返回的XML sample7_1.htm

5.XML作为一种数据保存、呈现、交互的文档，其数据往往是动态生成的，通常由JavaBean转换过来。
由JavaBean转换成XML文档的方式有多种，常用两种：
1）类自行序列化成XML：
public Element toXml(){
Element employee = new Element("employee");
element.setAttribute("name",name);
Element jobE = new Element("job").addContent(job);
employee.setContent(jobE);
Element salaryE = new Element("salary").addContent(salary);
employee.setContent(salaryE);
return employee;
}

2）页面模板生成XML方式： 【sample8_2.htm】

5.Ajax实际使用例子：
***************************************
var xh = this.getXMLHTTP();
xh.onreadystatechange = function(){
if(xh.readyState==4 && xh.responseText){
opts.load(null,xh.responseText,null);
try{
_ajaxCallback();
}catch(e){};
}
}
xh.open(isPost ? "POST" : "GET",true);
xh.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
xh.send(isPost ? qs : null);

***************************************

××××××××××××××××××××××××××××××××××【例子如下】×××××××××××××××××××××××××××××××××××××××××

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Citibank ICC,A - Systems</TITLE>
<META name="GENERATOR" content="IBM WebSphere Studio">

<TITLE>Citibank ICC - Change Password</TITLE>

<SCRIPT language="javascript">
	var http_request = false;
	function send_request(url) {//初始化、指定处理函数、发起请求的函数
		http_request = false;
		//开始初始化XMLHttpRequest对象
		if(window.XMLHttpRequest) { //Mozilla浏览器
			http_request = new XMLHttpRequest();
			if (http_request.overrideMimeType) {//设置MiME类别
				http_request.overrideMimeType("text/xml");
			}
		}
		else if (window.ActiveXObject) { //IE浏览器
			try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
		if (!http_request) { //异常，创建对象实例失败
			window.alert("不能创建XMLHttpRequest对象实例.");
			return false;
		}
		http_request.onreadystatechange = processRequest;
		//确定发送请求的方式和URL以及是否同步执行下段代码
		http_request.open("GET",true);
		http_request.send(null);
	}
	//处理返回信息的函数
	function processRequest() {
		if (http_request.readyState == 4) { //判断对象状态
			if (http_request.status == 200) { //信息已经成功返回，开始处理信息
				document.getElementById(currentPos).innerHTML = http_request.responseText;
			} else { //页面不正常
				alert("您所请求的页面有异常。");
			}
		}
	}
	
	function userCheck(){
		var f=document.form1;
		var username=f.username.value;
		if(username==""){
			alert("User Name can not be empty!");
			f.username.focus();
			return false;
		}else{
			send_request('C:/Users/FH37580/Desktop/Ajax/sample1_2.jsp?username='+username);
		}
	}
	
	function showRoles(obj) {
		document.getElementById(obj).parentNode.style.display = "";
		document.getElementById(obj).innerHTML = "正在读取数据..."
		currentPos = obj;
		send_request("sample2_2.jsp?playPos="+obj);
	}
</SCRIPT>    
</HEAD>

<BODY>
<CENTER>
<TABLE WIDTH="450" border="0" cellspacing="0" cellpadding="0">
	<form name="form1" action="" method="post">
		UserName<input type="text" name="username" value="">&nbsp;
		<input type="button" name="check" value="UniquenessChecking" onClick="userCheck()">
		<input type="submit" name="submit" value="submit">
	</form>
</TABLE>
<table width="200" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td height="20">
		<a href="javascript:void(0)" onClick="showRoles('pos_1')">经理室</a>
		</td>
	</tr>
	<tr style="display:none">
		<td height="20" id="pos_1"> </td>
	</tr>
	<tr>
		<td height="20">
		<a href="javascript:void(0)" onClick="showRoles('pos_2')">开发部</a>
	</td>
	</tr>
	<tr style="display:none ">
		<td id="pos_2" height="20"> </td>
	</tr>
</table>
</CENTER>
</FORM>
</BODY>
</HTML>

sample1_2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Citibank ICC,A - Systems</TITLE>
<META name="GENERATOR" content="IBM WebSphere Studio">

<TITLE>Citibank ICC - Change Password</TITLE>
</HEAD>

<BODY>
<FORM method="post" action="<%=genericServletName%>" name="changePassword" id="changePassword" >
<CENTER>
<TABLE WIDTH="450" border="0" cellspacing="0" cellpadding="0">
<%@ page contentType="text/html;charset=utf-8" errorPage="" %>
<%
	String username = request.getParameter("username");
	if("huangfei".equals(username)){
		out.print("用户名已经被注册，请更换一个用户名。");
	}else{
		out.print("用户名尚未被使用，您可以继续。");
	}
%>
</TABLE>
</CENTER>

</FORM>
</BODY>
</HTML>

sample2_2.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM method="post" action="<%=genericServletName%>" name="changePassword" id="changePassword" >
<CENTER>
<TABLE WIDTH="450" border="0" cellspacing="0" cellpadding="0">
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print("&nbsp;&nbsp;总经理<br>&nbsp;&nbsp;副总经理");
else if("pos_2".equals(playPos))
out.println("&nbsp;&nbsp;总工程师<br>&nbsp;&nbsp;软件工程师");
%>
</TABLE>
</CENTER>

</FORM>
</BODY>
</HTML>

sample3_1.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题</title>
<script language="javascript">
	var elementName = ""; //全局变量，保存Element标记名，使用完毕要清空
	function countTotalElement(node) { //参数node是一个Node对象
		
		var total = 0;
		if(node.nodeType == 1) { //检查node是否为Element对象
			alert(node.tagName);
			total++; //如果是，计数器加1
			elementName = elementName + node.tagName + "rn"; //保存标记名
		}
		var childrens = node.childNodes; //获取node的全部子节点
		for(var i=0;i<childrens.length;i++) {
			total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作
		}
		return total;
	}
</script>
</head>
<body>
<a href="javascript:void(0)"
onClick="alert('标记总数：'+countTotalElement(document) + 'rn' + '全部标记如下：' + 'rn' + elementName)">开始统计</a>
<JMK><CBA></CBA></JMK>
</body>
</html>

sample4_1.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Not Title</title>
<script language="javascript">
function reverseNode(node) { //颠倒节点node的顺序
	var children = node.childNodes; //获取子节点列表
	var childrenNum = children.length;
	for(var i=childrenNum-1;i>=0;i--) { //逆向历遍子节点列表
		var c = node.removeChild(children[i]); //删除指定子节点，保存在c中
		node.appendChild(c); //将c放在新位置上
	}
}
</script>
</head>
<body>
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p><input type="button" name="reverseGo" value="颠倒" onClick="reverseNode(document.body)"></p>
</body>
</html>

sample4_2.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题</title>
<script language="javascript">
function reverseTable() {
	var node = document.getElementsByTagName("table")[0]; //第一个表格
	var child = node.getElementsByTagName("tr"); //取得表格内的所有行
	var newChild = new Array(); //定义缓存数组，保存行内容
	for(var i=0;i<child.length;i++) {
		newChild[i] = child[i].firstChild.innerHTML;
	}
	node.removeChild(node.childNodes[0]); //删除全部单元
	var header = node.createTHead(); //新建表格行头
	for(var i=0;i<newChild.length;i++) {
		var headerrow = header.insertRow(i); //插入一个单元行
		var cell = headerrow.insertCell(0); //在单元行中插入一个单元格
		//在单元格中创建TextNode节点
		cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));
	}
}
</script>
</head>
<body>
<table width="200" border="1" cellpadding="4" cellspacing="0">
	<tr>
		<td height="25">第一行</td>
	</tr>
	<tr>
		<td height="25">第二行</td>
	</tr>
	<tr>
		<td height="25">第三行</td>
	</tr>
	<tr>
		<td height="25">第四行</td>
	</tr>
</table>
<br>
<input type="button" name="reverse" value="开始颠倒" onClick="reverseTable()">
</body>
</html>

sample4_3.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Title</title>
<script language="javascript">
function replaceContent() {
	
	document.getElementById("replaceNode").setAttribute("disabled",true);
	var table1 = document.getElementsByTagName("table")[0];
	var table2 = document.getElementsByTagName("table")[1];
	var child1 = table1.firstChild.firstChild.firstChild; //定位到<td>节点	table->tbody->tr->td
	var child2 = table2.firstChild.firstChild.firstChild; //定位到<td>节点	table->tbody->tr->td
	var tempChild = child2.firstChild; //定位到表格二<td>内含的TextNode节点
	try {
		//用表格二的单元格内容替换表格一的单元格内容， 表格二变成没有单元格
		child1.replaceChild(tempChild,child1.firstChild);  //替换的内容在前，被替换的内容在后
		//执行后,table2的子节点已经被转移到table1了，table2已经没有子节点，不能再调用table2的子节点。
	}catch(e){
		alert(e);
	}
}
</script>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td>表格一</td>
		</tr>
	</tbody>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
		<td>表格二</td>
		</tr>									
	</tbody>
</table>
<br>
<input id="replaceNode" type="button" name="replaceNode" value="替换"  onClick="replaceContent()">
</body>
</html>

sample5_1.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>No Title</title>
<script language="javascript">
function insertStr() {
	var f = document.form1;
	var value = f.str.value;
	if(value!="") {
		//从最终的TextNode节点开始，慢慢形成<tbody>结构
		var text = document.createTextNode(value); //新建一个TextNode节点
		var td = document.createElement("td"); //新建一个td类型的Element节点
		var tr = document.createElement("tr"); //新建一个tr类型的Element节点
		var tbody = document.createElement("tbody"); //新建一个tbody类型的Element节点
		td.appendChild(text); //将节点text加入tr中
		tr.appendChild(td); //将节点td加入tr中
		tbody.appendChild(tr); //将节点加入tbody中
		var parNode = document.getElementById("table1"); //定位到table上
		parNode.insertBefore(tbody,parNode.firstChild); //将节点tbody插入到节点顶部
		//parNode.appendChild(tbody); //将节点tbody加入节点尾部
	}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
	<input name="str" type="text" id="str" value="">
	<input name="insert" type="button" id="insert" value="留言" onClick="insertStr()">
</form>
<table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
	<tbody>
		<tr>
			<td height="25">网友留言列表</td>
		</tr>
	</tbody>
</table>
</body>
</html>

sample6_1.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Title</title>
<script language="javascript">
function loadXML(handler) {
	var url = "employees.xml";
	if(document.implementation&&document.implementation.createDocument) {
		var xmldoc = document.implementation.createDocument("","",null);
		xmldoc.onload = handler(xmldoc,url);
		xmldoc.load(url);
	}
	else if(window.ActiveXObject) {
		var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
		xmldoc.onreadystatechange = function() {
			if(xmldoc.readyState == 4) 
				handler(xmldoc,url);
		}
		xmldoc.load(url);
	}
}
function makeTable(xmldoc,url) {
	var table = document.createElement("table");
	table.setAttribute("border","1");
	table.setAttribute("width","600");
	table.setAttribute("class","tab-content");
	document.body.appendChild(table);
	var caption = "Employee Data from " + url;
	table.createCaption().appendChild(document.createTextNode(caption));
	var header = table.createTHead();
	var headerrow = header.insertRow(0);
	headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
	headerrow.insertCell(1).appendChild(document.createTextNode("职业"));
	headerrow.insertCell(2).appendChild(document.createTextNode("工资"));
	var employees = xmldoc.getElementsByTagName("employee");
	for(var i=0;i<employees.length;i++) {
		var e = employees[i];
		var name = e.getAttribute("name");
		var job = e.getElementsByTagName("job")[0].firstChild.data;
		var salary = e.getElementsByTagName("salary")[0].firstChild.data;
		var row = table.insertRow(i+1);
		row.insertCell(0).appendChild(document.createTextNode(name));
		row.insertCell(1).appendChild(document.createTextNode(job));
		row.insertCell(2).appendChild(document.createTextNode(salary));
	}
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="loadXML(makeTable)">
</body>
</html>

employees.xml

<?xml version="1.0" encoding="utf-8"?>
<employees>
	<employee name="J.Doe">
		<job>Programmer</job>
		<salary>32768</salary>
	</employee>
	<employee name="A.Baker">
		<job>Sales</job>
		<salary>70000</salary>
	</employee>
	<employee name="Big Cheese">
		<job>CEO</job>
		<salary>100000</salary>
	</employee>
</employees>

sample7_1.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Title</title>
<SCRIPT language="javascript">
	var http_request = false;
	function send_request(url) {//初始化、指定处理函数、发起请求的函数
		http_request = false;
		//开始初始化XMLHttpRequest对象
		if(window.XMLHttpRequest) { //Mozilla浏览器
			http_request = new XMLHttpRequest();
			if (http_request.overrideMimeType) {//设置MiME类别
				http_request.overrideMimeType("text/xml");
			}
		}
		else if (window.ActiveXObject) { //IE浏览器
			try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
		if (!http_request) { //异常，创建对象实例失败
			window.alert("不能创建XMLHttpRequest对象实例.");
			return false;
		}
		http_request.onreadystatechange = processRequest;
		//确定发送请求的方式和URL以及是否同步执行下段代码
		http_request.open("GET",true);
		http_request.send(null);
	}
	//处理返回信息的函数
	function processRequest() {
		if (http_request.readyState == 4) { //判断对象状态
			if (http_request.status == 200) { //信息已经成功返回，开始处理信息
				var returnObj = http_request.responseXML;
				var xmlobj = http_request.responseXML;
				var employees = xmlobj.getElementsByTagName("employee");
				var feedbackStr = "";
				for(var i=0;i<employees.length;i++) { //循环读取employees.xml的内容
					var employee = employees[i];
					feedbackStr += "员工：" + employee.getAttribute("name");
					feedbackStr +=
					"职位：" + employee.getElementsByTagName("job")[0].firstChild.data;
					feedbackStr +=
					"工资：" + employee.getElementsByTagName("salary")[0].firstChild.data;
					feedbackStr += "rn";
				}
				alert(feedbackStr);
			} else { //页面不正常
			alert("您所请求的页面有异常。");
			}
		}
	}
</SCRIPT>    
</head>
<body>
<input type="button" name="read"
value="读取XML" onClick="send_request('C:/Users/FH37580/Desktop/Ajax/employees.xml')">
</body>
</html>

sample8_2.htm

<html>
<head>
</head>
<body>
<%@ page contentType="application/xml; charset=gb2312" import="Employee"%>
<%@ page import="java.util.Collection,java.util.ArrayList"%>
<?xml version="1.0"?>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%
Employee em1 = new Employee();
em1.setName("J.Doe");
em1.setJob("Programmer");
em1.setSalary("32768");
Employee em2 = new Employee();
em2.setName("A.Baker");
em2.setJob("Sales");
em2.setSalary("70000");
Employee em3 = new Employee();
em3.setName("Big Cheese");
em3.setJob("CEO");
em3.setSalary("100000");
Collection employees = new ArrayList();
employees.add(em1);
employees.add(em2);
employees.add(em3);
pageContext.setAttribute("employees",employees);
%>
<employees>
<logic:iterate name="employees" id="employee">
<employee name="<bean:write name='employee' property='name'/>">
<job><bean:write name="employee" property="job"/></job>
<salary><bean:write name="employee" property="salary"/></salary>
</employee>
</logic:iterate>
</employees>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!