Ajax与$.ajax的使用方法-js教程-PHP中文网

首页

web前端

js教程

Ajax与$.ajax的使用方法

php中世界最好的语言

Apr 02, 2018 pm 03:46 PM

ajax 使用方法

这次给大家带来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;
  };

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

Java教程

1655

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1252

C# 教程

1226

显示更多

Related knowledge

DirectX修复工具怎么用？DirectX修复工具详细使用方法 Mar 15, 2024 am 08:31 AM

　　DirectX修复工具是专业的系统工具，主要功能是检测当前系统的DirectX状态，如果发现异常就可以直接修复。可能还有很多用户不清楚DirectX修复工具怎么用吧，下面就来看看详细教程。　　1、使用修复工具软件进行修复检测。　　2、如果修复完成后提示C++组件存在异常的问题，请点击取消按钮，然后点击工具菜单栏。　　3、点击选项按钮，选择扩展，点击开始扩展按钮。　　4、扩展完成后再重新进行检测修复即可。　　5、如果修复工具操作完成后仍未解决问题，可以尝试卸载重新安装报错的程序。

HTTP 525状态码介绍：探究其定义和应用 Feb 18, 2024 pm 10:12 PM

HTTP525状态码简介：了解其定义和使用方法HTTP（HypertextTransferProtocol）525状态码是指服务器在SSL握手过程中发生错误，导致无法建立安全连接。在传输层安全性（TLS）握手期间发生错误时，服务器将返回此状态码。该状态码属于服务器错误类别，通常表示服务器配置或设置问题。当客户端尝试通过HTTPS连接到服务器时，服务器无

PHP 与 Ajax：构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。

解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资

百度网盘怎么用-百度网盘的使用方法 Mar 04, 2024 pm 09:28 PM

有很多朋友还不知道百度网盘怎么用，所以下面小编就讲解了百度网盘的使用方法，有需要的小伙伴赶紧来看一下吧，相信对大家一定会有所帮助哦。第一步：安装好百度网盘后直接登录(如图所示);第二步：然后可根据页面提示选择“我的分享”和“传输列表”(如图所示);第三步：在“好友分享”里可以把图片和文件直接分享给好友(如图所示);第四步：接着选择“分享”后可勾选电脑文件或者网盘文件(如图所示);第五步：然后就可以寻找好友(如图所示);第六步：还可以在“功能宝箱”中寻找自己需要的功能(如图所示)。上面就是小编为大

KMS激活工具是什么？KMS激活工具怎么用？KMS激活工具使用方法？ Mar 18, 2024 am 11:07 AM

KMS激活工具是一种用于激活微软Windows和Office产品的软件工具。KMS是KeyManagementService的缩写，即密钥管理服务。KMS激活工具通过模拟KMS服务器的功能，使得计算机可以连接到这个虚拟的KMS服务器，从而实现对Windows和Office产品的激活。KMS激活工具体积小巧，功能强大，可以一键永久激活，无需联网状态就可以激活任何版本的window系统和任何版本的Office软件，是目前最成功的且经常更新的Windows激活工具，今天小编就给大家介绍一下kms激活工

快速学会复制和粘贴操作 Feb 18, 2024 pm 03:25 PM

复制粘贴快捷键使用方法复制粘贴是我们在日常使用电脑时经常会遇到的操作。为了提高工作效率，熟练掌握复制粘贴快捷键是非常重要的。本文将介绍一些常用的复制粘贴快捷键使用方法，帮助读者更加方便地进行复制粘贴操作。复制快捷键：Ctrl+CCtrl+C是复制的快捷键，通过按住Ctrl键然后再按C键，即可将选中的文字、文件、图片等内容复制到剪贴板。要使用该快捷键，

解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误

See all articles

Ajax与$.ajax的使用方法

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题