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() dom.value="正在连接服务器" dom.value="正在读取数据"; 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"); 上面的脚本的第一行创建了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); 上面的脚本的第一行创建了XML解析器的一个实例。第二行会告知解析器载入名为"note.xml"的XML的文档。 解析某个XML文件 - 跨浏览器的实例下面的例子是一个跨浏览器的实例,向XML解析器载入了某个已有的XML文档("note.xml"): < html> 输出:W3Schools Internal Note 重要的注释如需从某个XML元素(比如< from>Jani< /from>)中提取文本(比如Jani),请使用下面的语法: getElementsByTagName("from")[0].childNodes[0].nodeValue 重要事项:getElementsByTagName会返回一个节点数组。此数组含有XML文档中拥有指定名称的所有元素。在这例子中,只有一个"from"元素,但是仍然需要设定数组的下标( [0] )。 解析一个XML字符串 - 跨浏览器的实例下面的代码是一个跨浏览器的实例,向我们展示了如何加载和解析某个XML字符串: < html> 输出:Text of first child element: Tove 注释: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;
- }
- }