XMLHTTP的简单讲解

分享成果，随喜正能量】行走于尘世，繁忙的工作节奏，沉重的生活压力，似乎想让生活过得行云流水，真的不是一件容易的事情，那么何不让它变得简单一些？或许我们不够时尚，至少我们可以简约，或许我们不够精致，至少我们可以简洁。把每一段旅途，都当做最好的修行；把每一段旅途遇到的困难，都当做自己的助力；把每一段旅途中遇到的人，都当做今生的因缘。

《VBA信息获取与处理》教程是我推出第六套教程，目前已经是第一版修订了。这套教程定位于最高级，是学完初级，中级后的教程。这部教程给大家讲解的内容有：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪贴板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。程序文件通过32位和64位两种OFFICE系统测试。是非常抽象的，更具研究的价值。

教程共两册，八十四讲。今日的内容是专题六“VBA中利用XMLHTTP完成网抓数据”的第1讲：XMLHTTP的简单讲解

第一节 XMLHTTP的简单讲解及相关概念的介绍

现在的社会是网络的社会，离开了网络，很多工作会变得不通畅。我们日常的生活也是和网络紧密联系一起的，那么网络是如何搭建的呢？我们可以通过本讲的讲解了解到HTTP 超文本传输协议，TCP/IP的介绍，XMLHTTP的介绍，等等。

1 什么是XMLHTTP,它是用来做什么的？

1） XML的介绍 XML指可扩展标记语言（EXtensible Markup Language），设计宗旨是传输数据，是W3C （万维网联盟World Wide Web Consortium）的推荐标准。XML 是各种应用程序之间进行数据传输的最常用的工具，并且在信息存储和描述领域变得越来越流行。

2） HTTP的介绍 HTTP 超文本传输协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。

3) TCP/IP的介绍 TCP/IP是供已连接因特网的计算机进行通信的通信协议(Transmission Control Protocol / Internet Protocol)。定义了电子设备（比如计算机）如何连入因特网，以及数据如何在它们之间传输的标准。

TCP 用于应用程序之间的通信。当应用程序希望通过 TCP 与另一个应用程序通信时，它会发送一个通信请求。这个请求必须被送到一个确切的地址。在双方“握手”之后，TCP 将在两个应用程序之间建立一个全双工 (full-duplex) 的通信。这个全双工的通信将占用两个计算机之间的通信线路，直到它被一方或双方关闭为止。

IP 用于计算机之间的通信。IP 是无连接的通信协议。它不会占用两个正在通信的计算机之间的通信线路。这样，IP 就降低了对网络线路的需求。每条线可以同时满足许多不同的计算机之间的通信需要。通过 IP，消息（或者其他数据）被分割为小的独立的包，并通过因特网在计算机之间传送。IP 负责将每个包路由至它的目的地。

TCP/IP协议意味着 TCP 和 IP 在一起协同工作。TCP 负责应用软件（比如你的浏览器）和网络软件之间的通信。IP 负责计算机之间的通信。TCP 负责将数据分割并装入 IP 包，然后在它们到达的时候重新组合它们。IP 负责将包发送至接受者。

4) XMLHTTP的介绍 XMLHTTP是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象.

2 应用XMLHTTP抓取数据的步骤

1）创建XMLHTTP对象　//需MSXML4.0支持

2）打开与服务端的连接，同时定义指令发送方式，服务网页(URL)和请求权限等。客户端通过Open命令打开与服务端的服务网页的连接。与普通HTTP指令传送一样，可以用"GET"方法或"POST"方法指向服务端的服务网页。　

3）发送指令。　

4）等待并接收服务端返回的处理结果。　

5）释放XMLHTTP对象

3 XMLHTTP的属性及方法

1) XMLHTTP的常见属性：　

onreadystatechange：在同步执行方式下获得返回结果的事件句柄。只能在DOM中调用。　

responseBody：　　　结果返回为无符号整数数组。　

responseStream：　　结果返回为IStream流。　

responseText：　　　结果返回为字符串。　

responseXML：　　　结果返回为XML格式数据。

2） XMLHTTP的常用方法：　

① Open（bstrMethod,　bstrUrl,　varAsync,　bstrUser,　bstrPassword）创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)打开指定网址

bstrMethod：　　数据传送方式，即GET或POST。　

bstrUrl：　　　　服务网页的URL。　

varAsync：　　　是否同步执行。缺省为True，即同步执行，但只能在DOM中实施同步执行。用中一般将其置为False，即异步执行。　

bstrUser：　　　　用户名，可省略。　

bstrPassword：用户口令，可省略。　

setRequestHeader（bstrHeader,　bstrvalue）

bstrHeader：HTTP　头(header)　

bstrvalue：　HTTP　头(header)的值　

如果Open方法定义为POST，可以定义表单方式上传：　

xmlhttp.setRequestHeader（"Content-Type",　"application/x-www-form-urlencoded"）　

② Send（varBody）发送请求到http服务器并接收回应

varBody：指令集。可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。也可以省略，让指令通过Open方法的URL参数代入。

③ abort 取消当前请求

④ getAllResponseHeaders 获取响应的所有http头

⑤ getResponseHeader 从响应信息中获取指定的http头

以上我给出了一些常用的属性和方法，其他的大家可以参考相关的资料，或许我在今后的课程中会用到时讲解。同时我们还要主要下面的注意点：

1、ResponseBody是二进制的数据，是服务器传来的没有经过任何加工的数据。

2 ResponseText是按照utf-8编码把ResponseBody转换而成，也就是：ResponseText=ByteToStr(ResponseBody,"UTF-8")

本节知识点回向：了解一些概念，HTTP，TCP/IP，XMLHTTP，以及XMLHTTP的常用属性和方法。

我20多年的VBA实践经验，全部浓缩在下面的各个教程中，教程学习顺序：

HTML 页面中显示 XML 数据

在下面的实例中，我们打开一个 XML 文件（"cd_catalog.xml"），然后遍历每个 CD 元素，并显示HTML 表格中的 ARTIST 元素和 TITLE 元素的值：

实例

<html>

<body>

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET","cd_catalog.xml",false);

xmlhttp.send();

xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");

var x=xmlDoc.getElementsByTagName("CD");

for (i=0;i<x.length;i++)

{

document.write("<tr><td>");

document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);

document.write("</td><td>");

document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);

document.write("</td></tr>");

}

document.write("</table>");

</script>

</body>

</html>

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

eact定义的一种类似于XML的JS扩展语法，用来简化创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jsx</title>
        <style>
            .title{
                background-color: orange:
                width: 200px;
            }
        </style><!--定义个样式，也可以写在CSS文件里，引入进来-->
    </head>

    <body>
        <div id="test"></div>
        <script type="text/javascript" src="../js/react.development.js"></script>
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <script type="text/javascript" src="../js/babel.min.js"></script>
    </body>
    <script type="text/babel">
        const myid= "lOVE you"
        const mydata= "hellO jsx"
        const VDOM = ( // <!--h2标签引入样式，用className,span标签引入内联样式的时候，不是用双引号，而是双花括号，-->
        <div>
            <h2 className="title" id={myid.toLowerCase()}> 
                <span style={{color:'red',fontSize:'29px'}}>{mydata.toLowerCase()}</span>
            </h2>)// <!--标签中混入JS表达式时要用花括号{},如这里mydata取值 -->
            //jsx中只能有一个根标签，比如这里的h2，可以在h2的外面包一层div，就可以写两个h2
            <h2 className="title" id={myid.toUpperCase()}> 
                <span style={{color:'red',fontSize:'29px'}}>{mydata.toLowerCase()}</span>
            </h2>)
            //标签首字母若是小写字母，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
            //标签首字母若是大写字母，react就去渲染对应的组件，若组件没有定义，则报错
        </div>

        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</html>

一个jsx的小练习

 <script type="text/babel">
        const data=['A','B','C']
        const VDOM = (
            <div>   //js表达式会产生一个值。js语句（代码）,有if，for，switch判断，
                <h1>jsx框架</h1>
                <ul>
                  {
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    }) //item拿到data里面对应的值，map遍历的第二个值是索引值，
                  }
                </ul>
            </div>
        )
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

对应的网页如下：

模块是向外提供特定功能的js程序，一般就是一个js文件。

组件比模块更高一级，比如实现一个网页的头部的html，字体，css，js，图像这些元素组合在一起，就形成了头部这个组件。

组件分为函数式组件和类式组件：

函数式组件：

<script type="text/babel">
function MyComponent(){
return <h2>show the function component</h2>
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
//<MyComponent/>要写上标签，函数定义首字母需要大写
</script>

执行了ReactDOM.render(<MyComponent/>。。之后，React解析组件标签，找到MyComponent组件，发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真是DOM，随后呈现在页面中。

类式组件：

在线咨询

上一篇：推荐！用html制作ppt的Webslides
下一篇：HTML 属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商