Ajax服务器响应简单实例

最新推荐文章于 2021-06-25 14:49:33 发布
最新推荐文章于 2021-06-25 14:49:33 发布
阅读量152 收藏
点赞数
分类专栏： 前端 文章标签： ajax js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41358574/article/details/112987584
版权

html:代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function loadXMLDoc()
        {
            var xmlhttp;
            var txt,x,i,y,z,txt1,txt2,txt3;
            if (window.XMLHttpRequest)
            {
                // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    xmlDoc=xmlhttp.responseXML;
                    txt="";
                    txt1="";
                    txt2="";
                    txt3="";
                    x=xmlDoc.getElementsByTagName("PRICE");
                    y=xmlDoc.getElementsByTagName("TITLE");
                    z = xmlDoc.getElementsByTagName("ARTIST");
                    for (i=0;i<x.length;i++)
                    {
                        txt1= x[i].childNodes[0].nodeValue + "&nbsp&nbsp&nbsp&nbsp";
                        txt2 =  y[i].childNodes[0].nodeValue + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
                        txt3 =  z[i].childNodes[0].nodeValue+"";
                          txt=txt+txt1+txt2+txt3+"<br>";
                    }

                    document.getElementById("myDiv").innerHTML=txt;
                }
            }
            xmlhttp.open("GET","cd_catalog.xml",true);
            xmlhttp.send();
        }
    </script>
</head>

<body>

<h2>我收藏的 CD :</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获取我的 CD</button>

</body>
</html>

xml文件：


        <!--  Edited by XMLSpy®  -->
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>Still got the blues</TITLE>
        <ARTIST>Gary Moore</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Virgin records</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Eros</TITLE>
        <ARTIST>Eros Ramazzotti</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>BMG</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>One night only</TITLE>
        <ARTIST>Bee Gees</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1998</YEAR>
    </CD>
    <CD>
        <TITLE>Sylvias Mother</TITLE>
        <ARTIST>Dr.Hook</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS</COMPANY>
        <PRICE>8.10</PRICE>
        <YEAR>1973</YEAR>
    </CD>
    <CD>
        <TITLE>Maggie May</TITLE>
        <ARTIST>Rod Stewart</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Pickwick</COMPANY>
        <PRICE>8.50</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Romanza</TITLE>
        <ARTIST>Andrea Bocelli</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.80</PRICE>
        <YEAR>1996</YEAR>
    </CD>
    <CD>
        <TITLE>When a man loves a woman</TITLE>
        <ARTIST>Percy Sledge</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Black angel</TITLE>
        <ARTIST>Savage Rose</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Mega</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1995</YEAR>
    </CD>
    <CD>
        <TITLE>1999 Grammy Nominees</TITLE>
        <ARTIST>Many</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Grammy</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1999</YEAR>
    </CD>
    <CD>
        <TITLE>For the good times</TITLE>
        <ARTIST>Kenny Rogers</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Mucik Master</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1995</YEAR>
    </CD>
    <CD>
        <TITLE>Big Willie style</TITLE>
        <ARTIST>Will Smith</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>Tupelo Honey</TITLE>
        <ARTIST>Van Morrison</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>8.20</PRICE>
        <YEAR>1971</YEAR>
    </CD>
    <CD>
        <TITLE>Soulsville</TITLE>
        <ARTIST>Jorn Hoel</ARTIST>
        <COUNTRY>Norway</COUNTRY>
        <COMPANY>WEA</COMPANY>
        <PRICE>7.90</PRICE>
        <YEAR>1996</YEAR>
    </CD>
    <CD>
        <TITLE>The very best of</TITLE>
        <ARTIST>Cat Stevens</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Island</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Stop</TITLE>
        <ARTIST>Sam Brown</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>A and M</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Bridge of Spies</TITLE>
        <ARTIST>T'Pau</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Siren</COMPANY>
        <PRICE>7.90</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Private Dancer</TITLE>
        <ARTIST>Tina Turner</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Capitol</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1983</YEAR>
    </CD>
    <CD>
        <TITLE>Midt om natten</TITLE>
        <ARTIST>Kim Larsen</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Medley</COMPANY>
        <PRICE>7.80</PRICE>
        <YEAR>1983</YEAR>
    </CD>
    <CD>
        <TITLE>Pavarotti Gala Concert</TITLE>
        <ARTIST>Luciano Pavarotti</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>DECCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1991</YEAR>
    </CD>
    <CD>
        <TITLE>The dock of the bay</TITLE>
        <ARTIST>Otis Redding</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>7.90</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Picture book</TITLE>
        <ARTIST>Simply Red</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Elektra</COMPANY>
        <PRICE>7.20</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Red</TITLE>
        <ARTIST>The Communards</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>London</COMPANY>
        <PRICE>7.80</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Unchain my heart</TITLE>
        <ARTIST>Joe Cocker</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>EMI</COMPANY>
        <PRICE>8.20</PRICE>
        <YEAR>1987</YEAR>
    </CD>
</CATALOG>

结果：
在这里插入图片描述

march of Time
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java端 ajax简单入门例子
03-10
这个简单的例子虽然未完全实现，但它展示了Ajax的基本工作流程。实际应用中，还可能涉及到错误处理、安全性优化（如防止SQL注入）、异步加载状态的显示等复杂情况。随着对Ajax和相关技术的深入理解，开发者可以构建...
xml学习笔记（二）
zyz0728的博客
12-19 222
其实上个星期看了我的博客的同学肯能会说，都是些基础知识，这不是我们所想知道的。正是如此，当我学习知识的时候我也不喜欢看到的是一大堆理论知识，但从来不教我们如何使用它，如何依靠他来实现我们所需要的功能。上次无意中听到别人的谈话，大致意思是我知道java的基本语法，但我不知道他们如何组成成一个程序。我也经常困惑于此，在我看来，基础知识必然要知道，但是实例是不可或缺的。上一星期我一直在说xml的优势。今
AJAX中服务器响应请求的两种方式
lishundi的博客
08-18 1863
先来说一下几种常见的状态码： （１）readyState状态码： 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 （２）HTTP状态码： 200：服务器成功返回网页 404：请求的网页不存在 503：服务器暂时不可用 两种方式： （１）onreadystatechange方式： &lt;!DOCTYPE html&...
ajax调用简单实例
12-09
这个实例将讲解如何使用原生JavaScript进行简单的Ajax调用来获取远程数据并将其显示在指定的HTML元素中。 首先，我们来看客户端的代码，主要在`test.html`文件中。这里定义了两个关键函数：`createXMLHttp`和`...
Ajax简单实例 XMLHttpRequest
01-30
本实例将通过XMLHttpRequest对象来展示Ajax的基础用法，非常适合初学者学习。 首先，要理解XMLHttpRequest对象是Ajax的核心，它负责在后台与服务器进行通信。在JavaScript中，我们可以通过以下方式创建一个...
Ajax---简单实例
07-19
初学者在接触Ajax时，通常会通过一些简单实例来理解其基本原理和用法。 首先，我们来看看**HTML**（HyperText Markup Language）文件`new_file.html`。HTML是网页的基础，它定义了网页的结构和内容。在使用Ajax时，...
简单ASP+AJAX实例
10-30
"简单ASP+AJAX实例"是一个教学资源，旨在帮助新手了解如何结合ASP和AJAX来构建无刷新请求功能。在这样的实例中，通常会包含以下几个部分： 1. **ASP后端处理**：使用ASP接收来自客户端的AJAX请求，处理数据（例如...
vue响应的res.data和res.data.data
热门推荐
qq_41358574的博客
02-27 2万+
今天因为搜索功能一直接收到了后台数据但是前端页面没有渲染出来很奇怪，详细调试了好久，试验: 后端的数据： @GetMapping("/exam/{examCode}") public ApiResult findById(@PathVariable("examCode") Integer examCode){ System.out.println("根据ID查找"+examCode); ExamManage res = examManageService.findB
vue3.x案例 购物车
qq_41358574的博客
02-20 2673
购物车： <template> <div> <table> <caption><h1>购物车</h1></caption> <tr> <th></th> <th>编号</th> <th>商品名称</th> <th>商品价格&lt
【笔记】css卡片式地展示人物信息和一些展示信息的相关美化记录
qq_41358574的博客
04-05 2018
还是美观了很多的，从某网站复制弄了好久 由于主要的兴趣方向不在前端，所以对我来说我只要知道怎么用现成的就好，自己去写一个是不存在的。 效果： <div data-log-id="liveCardList" data-log-data="{&quot;logType&quot;:&quot;liveUnit&quot;,&quot;sceneLog&quot;:&quot;直播&quot;}" class="live-module_
VUE基本语法1-插值 属性绑定
qq_41358574的博客
01-22 1633
.1 插值绑定 插值绑定是Vue中最常见、最基本的语法，绑定的内容主要有文本插值和HTML插值两种 文本插值 文本插值的方式十分简单，只要用双大括号（Mustache语法）将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来。 下面一段代码演示了文本插值的基本用法： <style> .profile { display: inline-block; width: 300px; }
【项目实战】vue+springboot项目使用富文本编辑器实现长文章发表和展示
qq_41358574的博客
05-21 1585
本人前端烂，文章展示部分现在还弄的不好。 效果： 很想实现点击查看详情然后进入查看具体的文章内容，但还不知道怎么弄，有知道的兄弟可以教我一下。 首先npm下载： cnpm install vue-quill-editor 发表日志模块： <template> <div class="nn"> <p id="p2" style="background-color:red;"><Icon type="md-paw" />发表长日志</p&g
Document.visibilityState 页面监听 vue中实现离开页面时计时停止： 停止计时后从上一次开始计时
qq_41358574的博客
04-02 1371
概述 Document.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下： ‘visible’ : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化. ‘hidden’ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ . ‘prerender’ : 页面此时正在渲染
vue-springboot项目 mybatis条件查询结果为null时解决方案 @Param @RequestParam 的参数传递
qq_41358574的博客
04-04 1274
先附上查到的一点资料： MyBatis真正强大之处就在于SQL映射语句，也就是它的魅力所在。 @Param 接口： public List getUserListByParam(@Param(“userName”)String username,@Param(“userRole”)Integer roleId); Mapper映射文件： <select id="getUserListByParam" resultType="User" > select * from smbms_user wh
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throw
qq_41358574的博客
06-25 1063
今天vue项目本来跑的很正常突然莫名其妙就出现了错误（我根本没有改动代码？？），慌得一批，又整了半小时终于复原了 依赖项真的莫名其妙的bug令人心力交瘁 删除了node_modules 尝试了的命令： npm install npm@latest -g npm cache clean -f npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install 再次npm run dev又说有依赖没找到： npm i ele
JavaScript 和读取服务器cookie
qq_41358574的博客
01-16 1057
Web 术语中，cookie 是一小段信息，当用户第一次访问Web 服务器时，服务器将这些信息发送给浏览器。这个用户以后每次访问这个Web 站点时，Web 服务器可以通过cookie 识别这个用户。浏览器将cookie（其中包含关于访问者的信息）作为纯文本文件保存在计算机硬盘上。 如果你的站点要求注册，那么可以用cookie 将访问者的用户名和密码保存在他们的硬盘上，这样他们就不需要在每次访问时都输入用户名和密码。可以跟踪用户已经访问过站点的哪些部分，以及统计用户的访问次数。 关于cookie 有许多常见的
MVVM和vue.js（简单实例，数据链）
qq_41358574的博客
01-22 841
MVVM简介 模型—视图—视图模型（Model-View-ViewModel, MVVM），本质上是MVC（模型—视图—控制器）的改进版，其最重要的特性即是数据绑定（data binding），此外还包括依赖注入、路由配置、数据模板等一些特性。 从MVC到MVVM 模型—视图—控制器（Model-View-Controller, MVC）模式，在Web 1.0时代曾被广泛应用于Web架构中，然而其诞生的时间却比Web早几年。最初，MVC被应用于桌面程序中，在PHP、JSP等脚本语言诞生之后，也逐渐成为Web
VUE双向数据绑定
qq_41358574的博客
01-28 767
v-model 我们可以使用v-model为可输入元素（input & textarea）创建双向数据绑定，它会根据元素类型自动选取正确的方法来更新元素。先演示单行文本框、多行文本框、单选框和复选框的绑定方法，代码如下： 单行文本框 {{ singleText }} 多行文本框 {{ multiText }} 单选框 A.杨玉环 B.赵飞燕 {{ radioValue }} 单个复选框 天生丽质 {{ toggleValue }} 多个复选框 A.回眸一笑百媚生 B.体轻能为掌
使用Ajax与PHP交互：简单教程与实例
4. 注册回调函数：在发送请求前，需定义一个处理服务器响应的回调函数。 ```javascript xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且状态码为200 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值