zoukankan      html  css  js  c++  java

  • 简易的AJAX工具[转]

    关键字: 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;
    }

    放到创建对象的页面

    <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    ="正在连接服务器"
         }
            elseif(xmlHttp.readystate==2|| xmlHttp.readystate==3)
         {

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

                 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

    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.         +" readyState: "+this.req.readyState   
    66.         +" status: "+this.req.status   
    67.         +" headers: "+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
    不掉到水里，也永不知道自己有多大潜力！
  • 相关阅读:
    2019-2020-1 20199314 《Linux内核原理与分析》 第六周作业
    编译内核及系统调用的坑之make menuconfig
    20199314 Linux内核原理与分析 第五周作业
    20199314 Linux内核原理与分析 第四周作业
    2019-2020-1 20199314 <Linux内核原理与分析>第三周作业
    2019-2020-1 20199314 <Linux内核原理与分析>第二周作业
    2019-2020-1 20199314 <Linux内核原理与分析>第一周作业
    简单单层前馈神经网络
    wait,waitpid学习测试
    2019-2020-1 20199307《Linux内核原理与分析》第八周作业
  • 原文地址：https://www.cnblogs.com/guolanzhu/p/3460071.html
Copyright © 2011-2022 走看看