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小時內與您取得聯系。

整合營銷服務商