//声明一个ActiveX对象类 var ajax = function( opts ) { //设定参数缺省值 opts = { //Get或Post请求方式,不指明时设定默认post type: opts.type || "POST", //所请求的服务器网址,不指明时设定默认为空 url: opts.url || "", //如何处理数据,不指明时设定默认不处理 onSuccess: opts.onSuccess || function(){}, //要求返回的数据类型,不指明时设定默认为xml data: opts.data || "xml" }; //跨浏览器执行 if ( typeof XMLHttpRequest == "undefined" ) { XMLHttpRequest = function () { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} throw new Error("No XMLHttpRequest."); }; } //创建一个新的XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //打开到服务器的连接 xhr.open(opts.type, opts.url, true); //状态就绪(完成)时,执行这个函数 xhr.onreadystatechange = function(){ //如果返回的readyState的值是4,那么执行以下操作 if ( xhr.readyState == 4 ) { /* 做一些简单的数据处理 返回的对象——有两种类型 responseXML responseText。 根据所做的取其中一个 */ switch (opts.data){ case "json": //json方式是文本 opts.onSuccess(xhr.responseText); break; case "xml": //XML保留了DOM结构 opts.onSuccess(xhr.responseXML); break; default : //默认是文本 opts.onSuccess(xhr.responseText);; } } }; //关闭连接 xhr.send(null); } //这是简单处理函数 var ajaxSample = function(e){ //简单的回调,将一些文本添加到页面 var callback = function( data ) { document.getElementById("main").innerHTML += "<p>" +data.getElementsByTagName("data")[0].getAttribute("value") +"</p>"; } //这是具体的Ajax调用 ajax({ type: "GET",//get请求方式 url: "_assets/data/ajax-1.xml",//所请求的服务器页面地址 onSuccess: callback,//请求成功后执行的操作 data : "xml" //要求返回的数据类型 }) //阻止默认动作 e.preventDefault(); } //当页面内activate元素被点击时,执行ajax操作 document.getElementById("activate").addEventListener("click", ajaxSample, false);
|