XMLHttpRequest学习笔记

最新推荐文章于 2024-09-10 06:15:30 发布
最新推荐文章于 2024-09-10 06:15:30 发布
阅读量60 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000002651532
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
    <button id="btn">请求数据</button>
    <div id="myDiv">
        <table class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <th>number</th>
                    <th>title</th>
                    <th>author</th>
                    <th>year</th>
                    <th>price</th>
                </tr>
            </thead>
            <tbody id="mytbody"></tbody>
        </table>
        <p>getAllResponseHeaders()</p>
        <p id="pp"></p>
        <p>getResponseHeader("Last-Modified")</p>
        <p id="ppp"></p>
    </div>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function loadXHR() {
            var XHR;
            if (window.XMLHttpRequest) {
                XHR = new XMLHttpRequest();
            } else {
                XHR = new ActiveXObject("Microsoft.XMLHTTP");
            }
            XHR.open("GET", "./text/books.xml", true);
            //通过 XML HTTP 加载 XML 文件
            XHR.send();
            XHR.onreadystatechange = function() {
                if (XHR.readyState == 4 && XHR.status == 200) {
                // 4 = "loaded" 200 = “OK”
                    var xmlDoc = XHR.responseXML;
                    var txt = "<tr>";
                    var x = xmlDoc.getElementsByTagName("book");
                    for (var i = 0; i < x.length; i++) {
                    //把 XML 文件显示为 HTML 表格
                        txt += "<td>" + i + "</td>";
                        xx = x[i].getElementsByTagName("title");
                        txt += "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
                        xx = x[i].getElementsByTagName("author");
                        txt += "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
                        xx = x[i].getElementsByTagName("year");
                        txt += "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
                        xx = x[i].getElementsByTagName("price");
                        txt += "<td>" + xx[0].childNodes[0].nodeValue
                                + "</td></tr>";
                    }
                    document.getElementById("mytbody").innerHTML = txt;
                    //通过 XML HTTP 进行一次 HEAD 请求
                    document.getElementById("pp").innerHTML = XHR.getAllResponseHeaders();
                    //通过 XML HTTP 进行一次指定的 HEAD 请求
                    document.getElementById("ppp").innerHTML = XHR.getResponseHeader("Last-Modified");
                }
            }
        }
        document.getElementById("btn").onclick = function() {
            loadXHR();
        }
    </script>
</body>
</html>
//books.xml
    <?xml version="1.0" encoding="UTF-8"?>
<bookstore>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
    <book category="web">
        <title lang="en">XQuery Kick Start</title>
        <author>James McGovern</author>
        <author>Per Bothner</author>
        <author>Kurt Cagle</author>
        <author>James Linn</author>
        <author>Vaidyanathan Nagarajan</author>
        <year>2003</year>
        <price>49.99</price>
    </book>
</bookstore>
weixin_34294649
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XMLHttpRequest五步学习法
学习这东西需要持久
01-22 1926
XMLHttpRequest五部曲   在上一篇博客中主要讲了一下AJAX的基础知识，对AJAX进行了一下简单的讲解。既然XMLHttpRequest对象是AJAX的核心技术，那么这篇博客将学习如何使用XMLHttpRequest对象，实现异步操作。下面以验证表单为例说一下。 第一部 建立XMLHttpRequest对象 由于不同的浏览器支持XMLHttpRequest对象的建立方式不同
XMLHttpRequest 详解
热门推荐
m0_48982503的博客
12-03 1万+
XMLHTTPRequest对象，顾名思义：是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后，ajax操作就此诞生
学习笔记—XMLHttpRequest
doiido的专栏
12-13 1214
​ XMLHttpRequest（XHR）对象用于与服务器交互，是基于XML的HTTP请求。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。 ​
JS XMLHttpRequest入门教程（非常详细）
Webbei的博客
09-21 2001
接着遍历工厂内所有函数并尝试执行它们，为了避免发生异常，把所有调用函数放在 try 中执行，如果发生错误，则在 catch 中捕获异常并执行 continue 命令，返回继续执行，避免抛出异常。在 open() 方法中，设置第一个参数为 POST，然后使用 setRequestHeader() 方法设置请求消息的内容类型为“application/x-www-form-urlencoded”，它表示传递的是表单值，一般使用 POST 发送请求时都必须设置该选项，否则服务器无法识别传递过来的数据。
XMLHttpRequest—必知必会
冷晨四点的太阳
07-28 5351
前言 做web开发,我们都知道浏览器通过XMLHttpRequest对象进行http通信 在实际开发中我们使用的是各种框架封装了的XMLHttpRequest对象,对具体实现往往一知半解.所以为了换框架好上手,请求有异常好调试,有必要深入学习一下XMLHttpRequest 本文从基础XMLHttpRequest开始,一步步把它封装为更实用的框架级别 实例 一个最简单的http请求 let xhr = new XMLHttpRequest(); xhr.open('GET', '/url'
XMLHttpRequest 学习笔记
Yanfengting的博客
12-05 100
https://www.cnblogs.com/jackzhoumine/p/6562890.html XMLHttpRequest是一个API,用于客户端和服务器之间传输数据，通 过URL获取数据简单，且不会刷新整个页面，用户发起请求后可做其他事情，不用一直等到服务器响应，具有很好的用户体验而被广泛应用。 function() { var xhr=new XMLHttpRequest(); ...
XMLHttpRequest学习笔记一
yl_zxy_ccssddnn_net的专栏
10-07 392
通过XMLHttpRequest从服务端获取数据，并以表格方式进行展现，代码如下： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.g
jQuery学习笔记
weixin_64436232的博客
03-16 568
jQuery 是一个流行的轻量级 JavaScript 库，由 John Resig 创建并开源，旨在简化 Web 开发中常见的 HTML 文档遍历、事件处理、动画以及 Ajax 交互等任务。它封装了大量常用的 JavaScript 功能，提供了一致的跨浏览器兼容性，并且通过其简洁而强大的选择器引擎以及链式语法，极大地提高了开发者的工作效率。当使用 $() 函数包裹一个 CSS 选择器或者 DOM 元素时，会返回一个 jQuery 对象。
AJax 学习笔记一(XMLHTTPRequest对象)
12-10
XMLHttpRequest对象是AJAX（Asynchronous JavaScript and XML）技术的核心组成部分，它允许JavaScript与服务器进行异步通信，无需刷新整个页面就能更新网页内容，从而极大地提升了用户体验。在本文中，我们将深入...
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
01-21
摘要：本节补充ajax学习笔记1中 第二种方式：使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍，本节主要介绍需要修改的...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 1733
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 602
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 244
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 559
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
jEasyUI 创建带复选框的树形菜单
最新发布
wjs2024的博客
09-10 282
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 1352
hiprint
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 1010
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
jQuery-1.2学习笔记：基础用法与Ajax交互
"这篇资源是一份关于jQuery的学习笔记，主要涵盖了jQuery 1.2版本的基础用法和与Java的异步交互，以及Ajax的基础概念。" 在深入学习jQuery之前，首先要理解它是一个JavaScript库，旨在简化HTML文档遍历、事件处理、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值