简易的AJAX工具[转]

时间:2022-06-12 15:21:26
关键字: ajax

1.创建XMLHttpRequest对象的js文件

Ajax.js
function Ajax()
{
    var xmlHttp=null;
    if(window.XMLHttpRequest)
     {//非IE内核浏览器
         xmlHttp=new XMLHttpRequest();
     }
    elseif(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;
}

放到创建对象的页面

简易的AJAX工具[转]<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==)
     {

dom.value="正在连接服务器"
     }
    elseif(xmlHttp.readystate==|| xmlHttp.readystate==)
     {

dom.value="正在读取数据";
     }
    elseif(xmlHttp.readystate==)
     {
        if (xmlHttp.status==)
          {

dom.value=xmlHttp.responseText
         }
     }

}

</script>

2.XML基础教程:解析 XML DOM

读取、更新、创建或者操作某个XML文档,则需要XML解析器。

实例

解析XML文件 - 跨浏览器的实例
本例是一个跨浏览器的实例,把某个XML文档("note.xml")载入XML解析器。
解析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

  1. var net = new Object();
  2. net.READY_STATE_UNINITIALIZED=0;
  3. net.READY_STATE_LOADING=1;
  4. net.READY_STATE_LOADED=2;
  5. net.READY_STATE_INTERACTIVE=3;
  6. net.READY_STATE_COMPLETE=4;
  7. net.ContentLoader=function(url,onload,onerror){
  8. //this.url = encodeURI(url);
  9. this.url = url;
  10. this.req = null;
  11. this.onload = (onload) ? onload : this.defaultLoad;
  12. this.onerror = (onerror) ? onerror : this.defaulterror;
  13. this.loadXMLDoc(url);
  14. this.getText = this.defaultGetText;
  15. this.getXml = this.defaultGetXml;
  16. }
  17. net.ContentLoader.prototype={
  18. loadXMLDoc:function(url){
  19. if( window.XMLHttpRequest ){
  20. //Mozilla, Firefox, Opera
  21. this.req = new XMLHttpRequest();
  22. }else if( window.ActiveXObject ){
  23. try{
  24. //IE6.0
  25. this.req = new ActiveXObject("Microsoft.XMLHTTP");
  26. }catch(e1){
  27. try{
  28. xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
  29. }catch(e2){
  30. try{
  31. xmlHttp=new ActiveXObject("MSXML3.XMLHTTP");
  32. }catch(e3){
  33. }
  34. }
  35. }
  36. }
  37. if( this.req ){
  38. try{
  39. var loader = this;
  40. this.req.onreadystatechange = function(){
  41. loader.onReadyState.call(loader);
  42. }
  43. this.req.open('post',url,true);
  44. this.req.setRequestHeader("Content-Type", "text/html;charset=UTF-8");
  45. this.req.send(null);
  46. }catch(err){
  47. this.onerror.call(this);
  48. }
  49. }
  50. },
  51. onReadyState:function(){
  52. var req = this.req;
  53. var ready = req.readyState;
  54. if( ready == net.READY_STATE_COMPLETE ){
  55. var httpStatus = req.status;
  56. if( httpStatus == 200 || httpStatus == 0 ){
  57. this.onload.call(this);
  58. }else{
  59. this.onerror.call(this);
  60. }
  61. }
  62. },
  63. defaultError:function(){
  64. alert("error fetching date!"
  65. +"\n\nreadyState: "+this.req.readyState
  66. +"\nstatus: "+this.req.status
  67. +"\nheaders: "+this.req.getAllResponseHeaders()
  68. );
  69. },
  70. defaultLoad:function(){
  71. //do nothing
  72. },
  73. defaultGetXml:function(){
  74. var retXml = this.req.responseText;
  75. var xmlDoc = null;
  76. if( window.ActiveXObject ){
  77. //IE
  78. xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  79. xmlDoc.async=false;
  80. xmlDoc.load(retXml);
  81. }else{
  82. //Mozilla, Firefox, Opera
  83. var parser=new DOMParser();
  84. xmlDoc = parser.parseFromString(retXml,"text/xml");
  85. }
  86. return xmlDoc;
  87. },
  88. defaultGetText:function(){
  89. return this.req.responseText;
  90. }
  91. }
标签: javascript, ajax