Ajax实现异步请求后台XML数据(初学Ajax整理笔记)

最新推荐文章于 2022-09-24 11:01:56 发布
最新推荐文章于 2022-09-24 11:01:56 发布
阅读量812 收藏
点赞数
分类专栏： 网页前端 文章标签： ajax xml xmlhttprequest 服务器 function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zixiao_YING/article/details/6929833
版权

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>异步请求</title>
  <script type="text/javascript" language="javascript">
       var xmlHttp;
       //创建XMLHttpRequest对象
       function createXmlHttpRequest()
       {
            if(window.ActiveXObject)//判断浏览器是否是IE并且支持XMLHttpRequest
            {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
             }
           else if(window.XMLHttpRequest)//判断浏览器是否支持XMLHttpRequest对象
           {
                 xmlHttp = new XMLHttpRequest();
            }
        }
       function startRequest()
       {
            createXmlHttpRequest();
            xmlHttp.onreadyStatechange = readyStatechangeHandle;//实现读取服务器状态函数
            xmlHttp.open("POST","Hello World.xml",true);//设置如何读取服务器
            xmlHttp.send(null);//向服务器发送请求
        }
       function readyStateChangeHandle()
       {
             //判断读取服务器状态
             if(xmlHttp.readyState==4)
             {
                  if(xmlHttp.status==200)
                   {
                         //得到页面中的Div
                          var div = document.getElementById("divHelloWorld");
                          //接收服务器响应的XML文档
                          var xmlDoc = xmlHttp.responseXML;
                         //解析服务器性赢得XML文档
                         var date = xmlDoc.getElementsByTagName("data"[0].firstChild.nodeValue);
                         div.innerHTML="<b>"+data+"</b>";//将服务器数据填入Div中
                     }
                }
            }
  </script>
</head>
<body>
       <div align="center" id="divHelloWorld" style="width:100%"></div>
       <div align="center" style="width:100%">
              <input type="button"  value="Hello World" id="btnRequest" οnclick="startRequest()"/>
    </div>
</body>
</html>

xml文件

<?xml version="1.0" encoding="utf-8"?>
<HelloWorld>
     <data>
          Hello World
     </data>
</HelloWorld>

单线程的娃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
spring mvc+ajax 导出导入xml文件功能实现和整理
09-02
ajax导出xml调用浏览器下载功能； ajax导入文件说明及注意事项
前台通过JS请求后台的几种方法
热门推荐
u012682006的博客
02-23 3万+
前台js请求后台的几种方法的汇总
javaScript实现XML字符串转换JSON格式数据
特困生Kuel的博客
12-22 617
/** * xml字符串转换xml对象数据 * @param {Object} xmlStr */ function xmlStr2XmlObj(xmlStr) { var xmlObj = {}; if (document.all) { var xmlDom = new ActiveXObject("Microsoft.XMLDOM"); xmlDom.loadXML(xmlStr); xmlObj = xmlDom; } else { xmlObj = new DOMParser().parseFrom
使用原生JS发送AJAX请求（XML，JSON解析）
weixin_33691817的博客
06-16 565
mybutton.addEventListener('click', (e) => { let request = new XMLHttpRequest() request.onreadystatechange = () => { if(request.readyState === 4) { console.log('...
揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页
10-29
通过在后台与服务器进行少量数据交换，AJAX可以让网页实现异步更新，即无需重新加载整个网页就能更新部分网页内容。这种技术极大地提升了用户体验，因为它允许用户在不打断交互流程的情况下获取和展示新数据。 AJAX...
Ajax学习笔记个人总结
09-12
**XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 XMLHttpRequest，首先要检测浏览器是否支持此对象。对于支持的现代浏览器（如...
ajax学习经典笔记，适合初学者或者巩固知识用
02-10
### AJAX学习经典笔记知识点梳理 #### 一、运行环境配置 **1.1 JDK安装与配置** - **下载源:** 官方网站提供最新版本的JDK下载：[http://www.oracle.com/technetwork/java/javase/downloads/index.html]...
Ajax 自学 初学笔记 对入门非常有帮助
03-14
Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术在Web开发中被广泛应用，因为它极大地提升了用户体验，允许用户在交互...
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
ajax请求数据（xml和json格式）的方法 整理
weixin_34132768的博客
07-22 161
1、xml格式的数据 数据模型 <?xml version="1.0" encoding="UTF-8" ?> <root> <item> <strNowEngineer>dypro001</strNowEngineer> <completeNum>3</completeNum> <InTreat...
ajax的异步请求（javascript和xml）实现方式
AerfaGo的博客
09-27 2429
一、ajax：(asynchronous javascript and xml)异步的javascript和xml1.使用到js和xml 2.实现异步ajax就是使用js实现异步请求和局部刷新的,而xml是ajax和服务器交互的 一种数据格式(还有字符串文件 json)。异步交互和同步交互:1.同步交互:1>浏览器向服务器发起一个请求,就要等待服务器给浏览器响应结束后, 然后
Web学习笔记9-【Ajax：异步的 JavaScript 和 XML（局部刷新）、介绍、优点，基于 jQuery 的 AJAX示例，AJAX 原理，基于 jQuery 的 AJAX 语法，JSON】
爱吃凉拌辣芒果的博客
03-19 789
Ajax：异步的 JavaScript 和 XML（局部刷新）、介绍、优点，基于 jQuery 的 AJAX示例，AJAX 原理，基于 jQuery 的 AJAX 语法，JSON
Ajax中使用XML传输数据
terran_li2005的博客
06-01 641
postingXML.html : &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt
Ajax与XML
一个程序员的复习笔记
08-20 2984
Ajax请求后台返回数据时，都是简单的字符串或数字； 如果后台有大量数据要返回，我们应该怎么办？ 目前有两种技术方案： 1：将数据打包成 XML 的格式进行传输 2：将数据打包成 json 的格式进行传输 XML基本语法规则 XML 文档必须有根元素，根元素是所有其他元素的父元素 &lt;root&gt; &lt;child&gt; &lt;subchild&gt...
6.1Javascript(ajax的get请求，xml和json两种数据格式）
最新发布
weixin_48623310的博客
09-24 535
ajax的get请求；两种数据格式xml和json；h5新特性WebStorage前端存储技术
菜鸟教程：AJAX基础与邮箱验证实现
这需要用到AJAX异步通信。当用户输入邮箱并满足基本格式后，可以通过AJAX发送一个GET请求到服务器，请求中携带邮箱地址作为参数。 在服务器端，这里使用了.NET的ASHX（HTTP Handler）文件来处理AJAX请求。ASHX文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值