当前位置:Gxlcms > JavaScript > Ajax与$.ajax的使用方法

Ajax与$.ajax的使用方法

时间:2021-07-01 10:21:17 帮助过:13人阅读

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

实例一(Ajax请求基本创建格式):

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Ajax练习(GET,不考虑浏览器兼容性)</title>
 <script type="text/JavaScript">
  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);
     }
    }
   }
  }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <p>
  <input type="button" id="btn" value="异步请求" onclick="doRequest()" />
 </p>
 </form>
</body>
</html>
<head runat="server">
 <title>AjaxDemo实例</title>
 <script src="JS/jQuery-1.4.1-vsdoc.js" type="text/javascript"></script>
 <script type="text/javascript">
  //使用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(); }; </script> </head> <body> <form id="form1" runat="server"> <p> <input id="Button1" type="button" value="使用Ajax读取浏览器的内容" onclick="readRequest()" /> <br/> <input id="Text1" type="text" /> <input id="Button2" type="button" value="获取当前时间" onclick="btn_Click()"/> </p> </form> </body>

实例二(见附件)

考虑浏览器兼容性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 + " <br/>" + node[0].childNodes[1].nodeTypedValue+ "<br/>" + 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 + "<br/>"; } } document.getElementById("xmlmsg").innerHTML = info; };

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Ajax+mysql做出留言板的功能

ajax实现三级联动最基本的概念

以上就是Ajax与$.ajax的使用方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行