Ajax与$.ajax实例详解

PHP中文网 • 2025年3月8日 12:04:22 • 编程技术 • 阅读 2

这次给大家带来Ajax与$.ajax实例详解，Ajax与$.ajax使用的注意事项有哪些，下面就是实战案例，一起来看一下。

实例一（Ajax请求基本创建格式）：

 Ajax练习（GET，不考虑浏览器兼容性）   function doRequest() {   //不考虑浏览器兼容性问题   var xmlHttp = new XMLHttpRequest();   //打开一个与Http服务器的连接   xmlHttp.open("GET", "Default.aspx", true);   //与服务器端交互   xmlHttp.send(null);   //监听服务器端响应状态的改变事件   xmlHttp.onreadystatechange = function () {    //客户端与服务器端交互完成    if (xmlHttp.readyState == 4) {     //服务器端返回Http状态码：200表示请求成功,404未找到,403错误     if (xmlHttp.status == 200) {      //获得服务器端资源      var result = xmlHttp.responseText;      alert(result);     }    }   }  }

登录后复制

 AjaxDemo实例    //使用Ajax读取浏览器的工作内容   function readRequest() {   //不考虑浏览器的兼容性问题   var xmlhttp = new XMLHttpRequest();   //打开一个与服务器相关的链接   //发送请求   //请求的方式（获取/发送），请求页面，是否异步   xmlhttp.open("GET", "AjaxDemo.aspx", true);   //发送数据   xmlhttp.send(null);   //接受服务器返回结果   xmlhttp.onreadystatechange = function() {    //请求完成    if (xmlhttp.readyState == 4) {     //链接成功     if (xmlhttp.status == 200) {      //输出浏览器的内容      var result = xmlhttp.responseText;      alert(result);      window.alert("读取浏览器的内容成功！");     }    }   };  };  function btn_Click() {   var http = new ActiveXObject("Microsoft.XMLHTTP");   //或者使用这一句创建 var xmlhttp = new XMLHttpRequest();   if (!http) {    alert("创建xmlhttp对象异常！");    return false;   }   http.open("POST", "AjaxDemo.ashx", false);   http.onreadystatechange = function() {    if (http.readyState == 4) {     //链接成功     if (http.status == 200) {      alert(http.responseText);      document.getElementById("Text1").value = http.responseText;     } else {      window.alert("Ajax服务器返回错误！");     }    }   };   http.send();  };

登录后复制

实例二（见附件）

考虑浏览器兼容性Ajax请求处理，获取后台xml文件内容。

实例三（见附件）

使用$.Ajax获取后台读取xml文件内容信息。

function readXML1() {   //创建XML对象   var xmldom = new ActiveXObject("Microsoft.XMLDOM");   //设置为异步   xmldom.async = "false";   //加载需要读取的XML文档   xmldom.load("XML1.xml");   info = "";   //需要读取的根节点   var node = xmldom.selectNodes("student");   //依次读取其中的内容   info = node[0].childNodes[0].nodeTypedValue + " 
" + node[0].childNodes[1].nodeTypedValue+ "
" + node[0].childNodes[2].nodeTypedValue;   document.getElementById("xmlmsg").innerHTML = info;  };

登录后复制

 function readXML2() {   //实例化xml对象   var xml = new ActiveXObject("Microsoft.XMLDOM");   //异步设置   xml.async = "false";   //加载需要读取的XML文档   xml.load("XML2.xml");   info = "";   //选择需要读取的对象名称   var fnode = xml.documentElement.selectNodes("people");   //循环输出文档的内容   for (var i = 0; i < fnode.length; i++) {    for (var j = 0; j < fnode[i].childNodes.length; j++) {     info += fnode[i].childNodes[j].text + "
";    }   }   document.getElementById("xmlmsg").innerHTML = info;  };

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！