本文部分內容粘貼自：www.w3school.com.cn/js/index.asp，詳情可打開該網站查看，本人僅做簡化整理。

使用HTML+JavaScript語言來獲取網頁數(shù)據(jù)，代碼的執(zhí)行邏輯一般是：

請求/獲取數(shù)據(jù)

處理數(shù)據(jù)

保存數(shù)據(jù)到本地

本文將針對以上三個過程展開，提取一些關鍵點進行說明，具體的示例代碼出自本人編寫的公交線路數(shù)據(jù)獲取腳本，具有通用性。

-1st-?????????瀏覽器數(shù)據(jù)加載方式

---

數(shù)據(jù)獲取腳本最后會保存為”*.html”文件，不論采用什么軟件編寫，最后都是由電腦瀏覽器執(zhí)行，推薦使用比較穩(wěn)定的IE瀏覽器執(zhí)行(其他瀏覽器自行測試)。首先，我們要對瀏覽器的數(shù)據(jù)加載、代碼操作的執(zhí)行方式有個了解。

1. ???瀏覽器有兩種加載網頁數(shù)據(jù)的方式：

• 異步加載，AJAX=?Asynchronous(異步的，不同時的)?JavaScript?And?XML(某個數(shù)據(jù)格式)

• 同步加載

2.????同步加載，又稱阻塞模式，會阻止瀏覽器的后續(xù)處理，如JS代碼的執(zhí)行、網頁中圖形的渲染等

3. ???異步加載，又稱非阻塞模式，瀏覽器在下載執(zhí)行某一操作的同時，還會繼續(xù)進行后續(xù)頁面的處理(不會等到上一操作執(zhí)行結束)。這樣能提高頁面加載速度，因此是當前主流瀏覽器選用的數(shù)據(jù)加載模式。

通過異步加載能夠實現(xiàn)：

• 不刷新頁面更新網頁

• 在頁面加載后從服務器請求數(shù)據(jù)

• 在頁面加載后從服務器接收數(shù)據(jù)

• 在后臺向服務器發(fā)送數(shù)據(jù)

4.????簡單來說，傳統(tǒng)的編程語言Python、C等，代碼是逐行執(zhí)行的，上一行的代碼沒有執(zhí)行完畢不會執(zhí)行下一行的代碼。在瀏覽器中，HTML標簽雖然也是逐行執(zhí)行的，但是執(zhí)行JS代碼的同時(Script標簽)，也會同時執(zhí)行后續(xù)的操作。

這就帶來了一個問題，往往我們是逐步完成數(shù)據(jù)獲取工作的，第一步獲取和處理的數(shù)據(jù)作為第二步操作的基礎數(shù)據(jù)。

在通過HTML+JS代碼獲取數(shù)據(jù)的時候，第一步操作沒有完成，就已經開始執(zhí)行第二步操作了。第二步操作沒有第一步獲得的基礎數(shù)據(jù)，第二步操作就會出錯。

解決的辦法，就是通過設置按鈕，通過人工來逐步觸發(fā)操作。

語法示例

"button"//定義一個“按鈕名稱”的按鈕，onclick點擊時執(zhí)行“函數(shù)名稱”的按鈕

-2nd-??????請求/獲取數(shù)據(jù)

---

如果我們是“請求數(shù)據(jù)”，往往我們首先要從電腦本地加載基礎數(shù)據(jù)，然后儲存到內部值載體中(數(shù)組、對象)，例如要獲取數(shù)據(jù)的類型、名錄等。

如果是“獲取數(shù)據(jù)”，往往第一步就是要根據(jù)目標網站的網址，構筑網址規(guī)則并儲存。

01????從本地加載數(shù)據(jù)

直接放出代碼，需要注意的是，讀取本地數(shù)據(jù)后，本地數(shù)據(jù)數(shù)據(jù)類型是undefine(未定義)，建議轉換為字符串之后再儲存

如

Var name;//定義儲存本地數(shù)據(jù)的臨時變量Var names=[];//定義儲存本地數(shù)據(jù)的最終變量，數(shù)組……//讀取本地數(shù)據(jù)的相關操作Names.push((name)+’1’).substr(0,3))

//儲存操作，臨時變量“+’1’”(字符末尾添加“1”字符，可更改)后就轉化成了字符串格式，再通過*.substr(0,3)函數(shù)，減去末尾添加的“1”，(0,3)是所取的字符步長，即從第一個字符取到第4個字符(依據(jù)實際情況更改)。

<div> <h1>第一步：選擇文件h1> <input type="file" id="files"/> <input type="button" value="讀取結果" onclick="result()"/>div><script> var inputElement = document.getElementById("files"); inputElement.addEventListener("change", handleFiles, false); var names=[];//讀取公交線路名稱列表，并儲存為數(shù)組 var totalnum; function handleFiles() { var selectedFile =document.getElementById("files").files[0];//獲取讀取的File對象 var name = selectedFile.name;//讀取選中文件的文件名 var size = selectedFile.size;//讀取選中文件的大小 console.log("文件名:"+name+"大小："+size+'kb'); var reader = new FileReader();//這里是核心！！！讀取操作就是由它完成的。 reader.readAsText(selectedFile,'utf-8');//讀取文件的內容 reader.onload = function(){ console.log("文件讀取成功");//當讀取完成之后會回調這個函數(shù)，然后此時文件的內容存儲到了result中。直接操作即可。 getnames(this.result); } } function getnames(result){ var rows=result.split('\n'); for(var i=0;i names.push((rows[i]+'2').substr(0,3));// 儲存線路名稱，所有的處理都是將該數(shù)據(jù)轉為字符串 totalnum=names.length-2; } } //返回線路文件讀取結果 function result(){ console.log('讀取到的公交(地鐵)線路共計：',totalnum);//減去首行城市名、尾行空行 }script>

-3rd-????????保存數(shù)據(jù)

---

01????概述

由網頁中的獲取的數(shù)據(jù)，最后需要保存到本地。但是由于安全性限制，瀏覽器無法不通過用戶許可就訪問PC本地存儲空間。也就是說，雖然已經獲取了數(shù)據(jù)，儲存在相應的值載體中(數(shù)組、對象)，但是沒有辦法直接保存到本地。

這里提供一個方法——通過“下載文件”的方式將獲取的數(shù)據(jù)保存到本地。

大體的流程是：

• 將值載體中的數(shù)據(jù)轉化為相應格式

• 觸發(fā)下載事件

• 選擇本地保存路徑

雖然JS也有相應的第三方代碼包，能夠對數(shù)據(jù)進行轉化，例如將數(shù)組格式的數(shù)據(jù)轉化為Excel表格、轉化坐標系等等。但我還是習慣通過Python來處理獲取到的數(shù)據(jù)，所以JS代碼獲取的數(shù)據(jù)我通常將之轉化為Json/txt格式再下載。

02????JavaScript JSON

I?????????什么是 JSON？

JSON (?JavaScript?Object?Notation)是輕量級的數(shù)據(jù)交換格式。

JSON 是存儲和傳輸數(shù)據(jù)的格式，JSON 經常在數(shù)據(jù)從服務器發(fā)送到網頁時使用。

JSON 是“自描述的”且易于理解的。

實例

{"employees":[ {"firstName":"Bill","lastName":"Gates"}, {"firstName":"Steve","lastName":"Jobs"}, {"firstName":"Alan","lastName":"Turing"}]}//在上面的例子中，對象 "employees" 是一個數(shù)組。它包含了三個對象。

II???????語法規(guī)則

數(shù)據(jù)是名稱/值對

數(shù)據(jù)由逗號分隔

花括號{}保存對象

方括號[]保存數(shù)組

JSON 的語法是來自 JavaScript 對象符號的語法，但 JSON 格式是純文本。讀取和生成 JSON 數(shù)據(jù)的代碼可以在任何編程語言編寫的。

不同的是JSON 名稱需要雙引號。JavaScript 名稱不需要。在 JavaScript 中，鍵可以是字符串、數(shù)字或標識符名稱

III??????有效的數(shù)據(jù)類型

1.????在 JSON 中，值必須是以下數(shù)據(jù)類型之一：

• 字符串

• 數(shù)字

• 對象(JSON 對象)

• 數(shù)組

• 布爾

• Null(空)

2.????JSON 的值不可以是以下數(shù)據(jù)類型之一：

函數(shù)

日期

Undefined(未定義)

//JSON 中不允許日期、函數(shù)對象。如果需要包含日期、函數(shù)，請寫為字符串，之后可以將其轉換回相應對象。

IV??????交換數(shù)據(jù)

當數(shù)據(jù)在瀏覽器與服務器之間進行交換時，這些數(shù)據(jù)只能是文本。JSON屬于文本，并且我們能夠把任何 JavaScript 對象轉換為 JSON，然后將 JSON 發(fā)送到服務器。我們也能把從服務器接收到的任何 JSON 轉換為 JavaScript 對象。

1.????通過?JSON.parse()?解析數(shù)據(jù)，這些數(shù)據(jù)會成為 JavaScript 對象。

實例：

json格式

var text ='{"employees":[' +'{"firstName":"Bill","lastName":"Gates"},' +'{"firstName":"Steve","lastName":"Jobs"},' +'{"firstName":"Elon","lastName":"Musk"}]}';

解析

obj = JSON.parse(text);document.getElementById("demo").innerHTML=obj.employees[1].firstName + "" + obj.employees[1].lastName;

結果

Steve Jobs

2.????通過?JSON.stringify()?把 JavaScript 對象轉換為字符串

實例：

<html><body> <h1>從 JavaScript 對象創(chuàng)建 JSON 字符串h1> <p id="demo">p> <script>var obj = { name: "Bill", age: 62, city:"Seatle" };var myJSON = JSON.stringify(obj);document.getElementById("demo").innerHTML = myJSON;script> body>html>

結果：

從 Javascript 對象創(chuàng)建 JSON 字符串{"name":"Bill","age":62,"city":"Seatle"}

• JSON.stringify()?函數(shù)將把任何日期轉換為字符串

• JSON.stringify()?函數(shù)將從 JavaScript 對象刪除任何函數(shù)，包括鍵和值

• 如果在運行 JSON.stringify() 函數(shù)前已將函數(shù)轉換為字符串，這個環(huán)節(jié)可以省略

03????下載數(shù)據(jù)

直接放代碼，其中用到了第三方代碼包FileSaver.js，想了解更多請轉https://github.com/eligrey/FileSaver.js

<div> <h1>第三步：導出獲取數(shù)據(jù)h1><scriptsrc="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.js">//用于下載文件的第三方數(shù)據(jù)包，在線地址在src屬性中script><inputtype="button" id="lines" value="線路總表"/><script> var button = document.getElementById("lines"); button.addEventListener("click",saveHandler, false); function saveHandler(){ var content = JSON.stringify(buslines);//將JavaScript對象轉化為Json格式 var blob = new Blob([content],{type:"text/plain;charset=utf-8"}); saveAs(blob, "BusLines.json"); }script>

總結

以上是生活随笔為你收集整理的javascript读取txt_JavaScript编程语言学习笔记——编程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。