简易的AJAX工具
1.创建XMLHttpRequest对象的js文件
| Ajax.js
function
Ajax()
{ var xmlHttp = null ; if (window.XMLHttpRequest) { // 非IE内核浏览器 xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE内核浏览器 try { // IE6.0 xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " ); } catch (e1) { try { xmlHttp = new ActiveXObject( " MSXML2.XMLHTTP " ); } catch (e2) { try { xmlHttp = new ActiveXObject( " MSXML3.XMLHTTP " ); } catch (e3) { alert( " 创建Ajax失败： " + e3) } } } } else { // 未知浏览器 alert( " 未能识别的浏览器 " ); } return xmlHttp; } 放到创建对象的页面 
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
src
=
"
Ajax.js
"
></
script
>
用asp举个例子
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
src
=
"
Ajax.js
"
></
script
>
< script language = " javascript " type = " text/javascript " > var xmlHttp = new Ajax(); function checkName() { xmlHttp.onreadystatechange = getName; xmlHttp.open( " get " , " getName.asp " , true ); xmlHttp.send( null ) } function getName() { var dom = document.getElementById( " name " ) if (xmlHttp.readystate == 1 ) { dom.value = " 正在连接服务器 " } else if (xmlHttp.readystate == 2 || xmlHttp.readystate == 3 ) { dom.value = " 正在读取数据 " ; } else if (xmlHttp.readystate == 4 ) { if (xmlHttp.status == 200 ) { dom.value = xmlHttp.responseText } } } </ script > |
| 2.XML基础教程：解析 XML DOM 读取、更新、创建或者操作某个XML文档，则需要XML解析器。 实例解析一个XML文档如需操作某个XML文档，您需要XML解析器。解析器会将文档载入电脑的内存中。一旦文档被载入，可使用DOM对其数据进行操作。DOM把XML作为一颗树来处理。 微软的XML解析器与Mozilla浏览器中使用的解析器是有差异的。在本教程中，我们会为您展示如何创建可工作于IE和Mozilla浏览器中的跨浏览器脚本。 微软的XML解析器微软的XML解析器是存在于IE 5.0或更高版本中的COM组件。一旦你安装了IE，就可使用脚本来利用解析器了。 微软的XML解析器支持所有必要的功能，来遍历节点树，访问节点以及它们的属性值，插入并删除节点，并将节点数转换回XML。 如需创建微软XML解析器的一个实例，请使用下面的代码： JavaScript:var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
VBScript:set xmlDoc=CreateObject("Microsoft.XMLDOM")
ASP:set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
下面的代码段可向微软的XML解析器载入一个已有的XML文档("note.xml")： var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");
上面的脚本的第一行创建了XML解析器的一个实例。第二行关闭了同步载入，这样可以确保在文档被完全载入前解析器不会继续执行。第三行会告知解析器载入名为"note.xml"的XML的文档。 Mozilla、Firefox以及Opera中的XML解析器Mozilla浏览器的XML解析器支持所有必要的功能，来遍历节点树，访问节点以及它们的属性值，插入并删除节点，并将节点树转换回XML。 如需创建Mozilla浏览器的XML解析器的一个实例，请使用下面的代码： JavaScript:var xmlDoc=document.implementation.createDocument("ns","root",null);
第一个参数，ns，定义用于XML文档的命名空间（namespace）。第二个参数，root，是XML文件中的XML根元素。第三个参数，null，一般总是null，这是由于目前还没有用到这个参数。 下面的代码段可向Mozilla浏览器的XML解析器载入一个已有的XML文档("note.xml")： var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
上面的脚本的第一行创建了XML解析器的一个实例。第二行会告知解析器载入名为"note.xml"的XML的文档。 解析某个XML文件 - 跨浏览器的实例下面的例子是一个跨浏览器的实例，向XML解析器载入了某个已有的XML文档("note.xml")： < html>
< head>
< script type="text/javascript">
var xmlDoc;
function loadXML()
{
// 用于 IE 的代码：
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("note.xml");
getmessage();
}
// 用于 Mozilla, Firefox, Opera, 等浏览器的代码：
else if (document.implementation &&
document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
xmlDoc.onload=getmessage;
}
else
{
alert('Your browser cannot handle this script');
}
}
function getmessage()
{
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
< /script>
< /head>
< body onload="loadXML()">
< h1>W3Schools Internal Note< /h1>
< p>< b>To:< /b> < span id="to">< /span>< br />
< b>From:< /b> < span id="from">< /span>< br />
< b>Message:< /b> < span id="message">< /span>
< /p>
< /body>
< /html>
输出：W3Schools Internal Note To: Tove From: Jani Message: Don't forget me this weekend! 重要的注释如需从某个XML元素（比如< from>Jani< /from>）中提取文本（比如Jani），请使用下面的语法： getElementsByTagName("from")[0].childNodes[0].nodeValue
重要事项：getElementsByTagName会返回一个节点数组。此数组含有XML文档中拥有指定名称的所有元素。在这例子中，只有一个"from"元素，但是仍然需要设定数组的下标( [0] )。 解析一个XML字符串 - 跨浏览器的实例下面的代码是一个跨浏览器的实例，向我们展示了如何加载和解析某个XML字符串： < html>
< body>
< script type="text/javascript">
var text="< note>";
text=text+"< to>Tove< /to>";
text=text+"< from>Jani< /from>";
text=text+"< heading>Reminder< /heading>";
text=text+"< body>Don't forget me this weekend!< /body>";
text=text+"< /note>";
// 用于 IE 的代码：
if (window.ActiveXObject)
{
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(text);
}
// 用于 Mozilla, Firefox, Opera, 等浏览器的代码：
else
{
var parser=new DOMParser();
var doc=parser.parseFromString(text,"text/xml");
}
// documentElement 提交根元素：
var x=doc.documentElement;
document.write("Text of first child element: ");
document.write(x.childNodes[0].childNodes[0].nodeValue);
document.write("< br />");
document.write("Text of second child element: ");
document.write(x.childNodes[1].childNodes[0].nodeValue);
< /script>
< /body>
< /html>
输出：Text of first child element: Tove Text of second child element: Jani 注释：Internet Explorer使用loadXML()方法解析XML字符串，而Mozilla浏览器使用DOMParser对象。
根据以上两个说明，整理了如下的ajax工具 |
Ajax.js
var net = new Object();
net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;
net.ContentLoader=function(url,onload,onerror){
//this.url = encodeURI(url);
this.url = url;
this.req = null;
this.onload = (onload) ? onload : this.defaultLoad;
this.onerror = (onerror) ? onerror : this.defaulterror;
this.loadXMLDoc(url);
this.getText = this.defaultGetText;
this.getXml = this.defaultGetXml;
}
net.ContentLoader.prototype={
loadXMLDoc:function(url){
if( window.XMLHttpRequest ){
//Mozilla, Firefox, Opera
this.req = new XMLHttpRequest();
}else if( window.ActiveXObject ){
try{
//IE6.0
this.req = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e1){
try{
xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
}catch(e2){
try{
xmlHttp=new ActiveXObject("MSXML3.XMLHTTP");
}catch(e3){
}
}
}
}
if( this.req ){
try{
var loader = this;
this.req.onreadystatechange = function(){
loader.onReadyState.call(loader);
}
this.req.open('post',url,true);
this.req.setRequestHeader("Content-Type", "text/html;charset=UTF-8");
this.req.send(null);
}catch(err){
this.onerror.call(this);
}
}
},
onReadyState:function(){
var req = this.req;
var ready = req.readyState;
if( ready == net.READY_STATE_COMPLETE ){
var httpStatus = req.status;
if( httpStatus == 200 || httpStatus == 0 ){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
},
defaultError:function(){
alert("error fetching date!"
+"\n\nreadyState: "+this.req.readyState
+"\nstatus: "+this.req.status
+"\nheaders: "+this.req.getAllResponseHeaders()
);
},
defaultLoad:function(){
//do nothing
},
defaultGetXml:function(){
var retXml = this.req.responseText;
var xmlDoc = null;
if( window.ActiveXObject ){
//IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(retXml);
}else{
//Mozilla, Firefox, Opera
var parser=new DOMParser();
xmlDoc = parser.parseFromString(retXml,"text/xml");
}
return xmlDoc;
},
defaultGetText:function(){
return this.req.responseText;
}
}