XML 學(xué)習(xí)詳解

習(xí)思路

1.什么是XML

Extendisble mark language 【可擴(kuò)展的標(biāo)記語言】

? 標(biāo)記語言

HTML,XHTML,HTML5,XML

你們知不知道他們之間有什么關(guān)系嗎？

? 可擴(kuò)展

在HTML中寫一個表格我們使用

預(yù)定義標(biāo)簽，含義已經(jīng)被定義好了。

標(biāo)簽可以自定義，

? 特點

XML 指可擴(kuò)展標(biāo)記語言，是獨立于軟件和硬件的信息傳輸工具。

XML 是一種標(biāo)記語言，很類似 HTML。

XML 的設(shè)計宗旨是傳輸數(shù)據(jù)，而非顯示數(shù)據(jù)

XML 標(biāo)簽沒有被預(yù)定義。您需要自行定義標(biāo)簽。

XML 被設(shè)計為具有自我描述性。

XML 是 W3C 的推薦標(biāo)準(zhǔn)。

2.Xml的作用

總共分為兩大部分：

? 數(shù)據(jù)儲存

配置文件儲存數(shù)據(jù)：

在一些軟件：QQ，飛秋，都有配置文件的，固定參數(shù)數(shù)據(jù)儲存，在一些C/S模式的軟件中應(yīng)用的非常多，在編程語言中,java ,net ,C#

臨時表的數(shù)據(jù)儲存：

在實際的項目中，一些固定不變得數(shù)據(jù)和數(shù)據(jù)量比較少的數(shù)據(jù)我們會使用xml 來進(jìn)行儲存。例如：地理信息數(shù)據(jù)

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

AJAX 角度

進(jìn)行固定格式的數(shù)據(jù)交換

Webservice 網(wǎng)絡(luò)服務(wù)

例如：查詢天氣，航班信息查詢

二、XML結(jié)構(gòu)

? 代碼舉例：

? 結(jié)構(gòu)分析：

? 總結(jié)特點

1.必須要有根元素，有且只能有一個。

2.Xml的元素類型有三種：

元素節(jié)點

文本節(jié)點：

標(biāo)簽中含有文本內(nèi)容

屬性節(jié)點：

在節(jié)點中有屬性存在，我們就說這個節(jié)點是一個屬性節(jié)點

三、XML語法

1.語法總則

必須以XML聲明開頭

它必須擁有唯一的根元素

開始標(biāo)簽必須與結(jié)束標(biāo)簽相匹配

元素對大小寫敏感

所有的元素都必須關(guān)閉

所有元素都必須正確嵌套

必須對特殊字符使用實體

2.文檔聲明

聲明一個xml文件

<?xml version=”1.0” encoding=”utf-8” ?>
語法規(guī)則： 必須 <?xml ?>
說明 version : xml的版本，通用版本1.0
     Encoding: 字符編碼格式

運行上述代碼，結(jié)果如下：

注意：字符編碼格式統(tǒng)一，xml 編碼的聲明，必須要和文件的格式保持一致

3.命名規(guī)則【標(biāo)簽元素】

為什么要有這個命名規(guī)則呢？

因為我們XML 它是一個可擴(kuò)展的標(biāo)記語言，標(biāo)簽自己定義

名稱可以是字母、數(shù)字以及其他的字符

名稱不能以數(shù)字或者標(biāo)點符號開始

名稱不能以字符“xml”(或者Xml、XML)開始

名稱不能包含空格

可以使用任何名稱，沒有保留的字詞

插腳一腳：

4.定義元素【標(biāo)簽】

? Xml三種節(jié)點

元素節(jié)點

文本節(jié)點

屬性節(jié)點

? 元素的三種表現(xiàn)形式：

元素包含元素：

元素包含文本節(jié)點：

元素包含屬性：

? 實例

5.定義屬性

? 描述

屬性他就是用來描述一些事物元素的【附加描述信息】

屬性必須依附于元素來實現(xiàn)

? 作用

描述信息的定義

描述信息可以在屬性和標(biāo)簽之間進(jìn)行切換

? 注意使用事項

1.屬性必須依附于元素來實現(xiàn)

2.必須定義在開始標(biāo)簽

6.實體引用【CDATA區(qū)】

對比人物大小如下圖：

? 描述

在標(biāo)簽內(nèi)部寫字符串文本的時候，會有一些特殊的字符例如：< > 空格，等。我想需要在文本中展示出來，這個時候我們不能直接寫在里面，要使用實體引用

? 實體引用

在HTML中的實體引用，

空格：

在XML中使用實體引用

如果特殊符號特別多，這個時候怎么辦？

? 多個實體引用

語法：<![CDATA[data]]>

Data: 數(shù)據(jù)

使用CDATA 區(qū) 如下

7.注釋

在HTML中使用注釋

<!--  注釋內(nèi)容 -->

在XML中同樣使用

注意：注釋不能寫在聲明的開始

8.批處理指令【了解】

處理指令（PIs）允許文檔包含用于應(yīng)用程序的指令

處理指令很少被使用。主要用于鏈接 XML 文檔到樣式表【xml-stylesheet】

引入方法：

定義樣式文件

Books.css

代碼：

color:red;

}

XML 實現(xiàn)

課堂練習(xí)：

編寫xml文檔，將如下所示user數(shù)據(jù)用XML的方式來保存

四、PHP解析XML

1.什么是XML的解析

其實就是將xml結(jié)構(gòu)中儲存的數(shù)據(jù)給提取出來，這個提取的過程我們把他叫做解析，解析出來的內(nèi)容就是，文本節(jié)點包含的內(nèi)容還有屬性

2.PHP解析XML方式

手冊位置：

在PHP中解析XML文檔，有十幾種操作，但是我們主要關(guān)注 DML操作和SimpleXML

DOM: 是XML解析通用方法，不僅適用于PHP ，也使用其他語言【操作方法和函數(shù)是一樣】

SimpleXML: 是PHP語言所特有的處理方法，將一些復(fù)雜DOM操作，進(jìn)行了方法的封裝，可以簡單實現(xiàn)XML的操作

3.創(chuàng)建一個XML文件

? 創(chuàng)建步驟

1.聲明文檔格式

2.定義元素

3.元素結(jié)構(gòu)化

? 最終代碼

<?xml version="1.0" encoding="utf-8" ?>
<words>
	<word>
		<name>no zuo no die</name>
		<fayin>no zuo no die</fayin>
		<fanyi>不作死就不會死</fanyi>
	</word>
	<word>
		<name>hello </name>
		<fayin>hello</fayin>
		<fanyi>你好</fanyi>
	</word>

</words>

想操作XML必須確保xml沒有任何語法錯誤！

4.DOM操作方式【了解】

? 實現(xiàn)原理

整個轉(zhuǎn)換操作是在計算機(jī)內(nèi)存中實現(xiàn)的。

? 實現(xiàn)思路

1.讀取文檔

2.獲取文檔內(nèi)容

3.將文檔的內(nèi)容展示出來

? 使用語法

操作類DOMDocument

$dom=new DOMDocument(version,encoding);

說明：version 我們定義XML 是的版本，

Encoding 定義時候的編碼格式

實現(xiàn)代碼：

//讀取創(chuàng)建的單詞的xml 文檔
//實例化操作對象DOM
$dom=new DOMDocument('1.0', 'utf-8');
//加載words.xml 文

? 操作方法

語法：對象模型->load(url);

說明：url 可以是據(jù)對路徑也可以是相對路徑

作用：加載要操作的xml文件

對象加載文件之前和文件之后區(qū)別：

? 讀取節(jié)點

語法：當(dāng)前對象->getElementsByTagName(‘標(biāo)簽名’);

作用：選中指定所有的標(biāo)簽

獲取了所有的節(jié)點：

//加載words.xml 文件
$dom->load('words.xml');
$names=$dom->getElementsByTagName('name');
var_dump($names->item(1));exit;

從節(jié)點中獲取文本內(nèi)容

語法：選中的節(jié)點-> Item(0);

作用：選中具體的操作節(jié)點

//加載words.xml 文件
$dom->load('words.xml');
$names=$dom->getElementsByTagName('name');
var_dump($names->item(1));exit;

? 讀取節(jié)點屬性

當(dāng)前節(jié)點對象->getAttribute(‘屬性名稱’);

? 增加節(jié)點

? 刪除節(jié)點

5.SimpleXML方式【重點】

? 實現(xiàn)原理

? 使用語法

使用函數(shù)

Simplexml_load_file(path)；

說明：path 就是要加載的文件的路徑【相對路徑也可以是絕對路徑】

作用：1.加載xml文件

2.實例化操作類【SimpleXmlElement】

Simplexml_load_string(str);

說明：str 就是一個xml格式的字符串

作用：將一個xml格式的字符串，轉(zhuǎn)換成就可以操作的對象

File_get_contents(path);

讀取節(jié)點

$dom=simplexml_load_file('words.xml');
//循環(huán)讀取
foreach ($dom->word as $key=> $value) {
echo $value->name;
}
Simplexml_load_string()

讀取節(jié)點屬性

語法：當(dāng)前節(jié)點對象->attributes()

作用：獲取當(dāng)前節(jié)點的屬性的值

創(chuàng)建節(jié)點

語法：操作對象->addChild(節(jié)點名稱，節(jié)點內(nèi)容)

語法：操作對象-asXML(‘保存的文件以及路徑’);

$str=file_get_contents('words.xml');
// var_dump($str);exit;
$dom=simplexml_load_string($str);
//增加word節(jié)點
$word=$dom->addChild('word');
//增加name
$word->addChild('name', 'xiaoming');
//fanyi
$word->addChild('fayin', '小明');
//翻譯
$word->addChild('fanyi', '小明');
//將追加的內(nèi)容寫入文件即可
$dom->asXML('words.xml');

? 刪除節(jié)點

在PHP數(shù)組中我想刪除某個值，使用unset($arr[1])

也是使用unset() , 但是不是unset 數(shù)組，而是對象的屬性名稱

? 修改操作自己完成

6.DOM和SimpleXML對比

? 實現(xiàn)原理對比

DOM 他是將XML文檔轉(zhuǎn)換成可以操作的模型【在內(nèi)存中存在】，這個時候在使用DOM封裝的操作對象來對這個模型進(jìn)行CURD操作。

SimpleXML 它是將XML文檔直接轉(zhuǎn)換成對象來直接進(jìn)行CURD操作

? 代碼對比

六、XPATH

1.什么是XPATH

XPath是一門在 XML 文檔中查找信息的語言，XPath可用來在 XML 文檔中對元素和屬性進(jìn)行遍歷。

而且Xpath并不僅僅應(yīng)用于XML數(shù)據(jù)查詢，其在很多語言中（PHP、Java、.NET以及Javascript），都可以廣泛使用。

參考文獻(xiàn)： @link http://www.w3school.com.cn/xpath/xpath_syntax.asp

使用Xpath定義路徑表達(dá)式可以按需查找節(jié)點并返回集合形式。

2.查找規(guī)則

? 【/】設(shè)置絕對路徑

語法：操作對象->xpath(‘/節(jié)點名’);

作用：選取從根節(jié)點開始查找

? 【//】全局查找

語法規(guī)則:操作對象->xpath(‘/節(jié)點//節(jié)點名稱’);

作用：查找節(jié)點，不管節(jié)點在什么層次下都返回節(jié)點的內(nèi)容

使用例子：

? 【..】選取父節(jié)點

語法：操作對象->xpath(‘/節(jié)點1/節(jié)點2/節(jié)點3/..’);

作用：

? 【[]】過濾節(jié)點

語法規(guī)則：操作對象-xpath(‘/節(jié)點[節(jié)點名稱=節(jié)點里面的內(nèi)容]’);

作用：根據(jù)節(jié)點內(nèi)容來查找節(jié)點

? 【@】過濾屬性

語法：操作對象-xpath(‘/節(jié)點[@屬性=屬性的值]’);

作用：

3.XPATH在線詞典應(yīng)用

1.完成需求

提供一個input 框當(dāng)用戶輸入要查找的單詞的時候返回這個單詞的所有翻譯結(jié)果。

2.完成步驟

1.使用函數(shù)來加載單詞xml文件

2.獲取用戶傳遞的參數(shù)

3.使用xpath進(jìn)行數(shù)據(jù)的檢索

4.將結(jié)果返回并且展示到頁面中

因為檢索出來的內(nèi)容是多個，所以返回格式是：數(shù)組包含對象

要想trans 里面的內(nèi)容向，word 一樣可以使用【對象->word】這種形式來輸出

可以將CDATA進(jìn)行轉(zhuǎn)碼

3.完成代碼

”XMLHttpRequest 的異步調(diào)用網(wǎng)上找的例子運行沒問題，但稍微改了一點點就報錯”InvalidStateError: XMLHttpRequest has an invalid context“。斷斷續(xù)續(xù) 搞了3天終于通了，可以接收二進(jìn)制文件了。 “ 之后找到了下篇文章，發(fā)現(xiàn)我所使用的方法是下方中的老方法。準(zhǔn)備再按下文所說新方法試試。

下文是2011寫的了，想必所說內(nèi)容到現(xiàn)在已是所有瀏覽器都支持的了吧。

以下轉(zhuǎn)自： https://www.html5rocks.com/zh/tutorials/file/xhr2/。

XMLHttpRequest2 新技巧

HTML5 Rocks

HTML5 世界中有這樣一位無名英雄：XMLHttpRequest。嚴(yán)格地說，XHR2 并不屬于 HTML5。不過，它是瀏覽器供應(yīng)商對于核心平臺不斷做出的改進(jìn)中的一部分。我之所以將 XHR2 加入我們新的百寶囊中，就是因為它在如今復(fù)雜的網(wǎng)絡(luò)應(yīng)用中扮演了不可或缺的角色。

結(jié)果呢，我們這位老朋友來了個大變身，很多人都不知道它的新功能了。2 級 XMLHttpRequest 引入了大量的新功能（例如跨源請求、上傳進(jìn)度事件以及對上傳/下載二進(jìn)制數(shù)據(jù)的支持等），一舉封殺了我們網(wǎng)絡(luò)應(yīng)用中的瘋狂黑客。這使得 AJAX 可以與很多尖端的 HTML5 API 結(jié)合使用，例如 File System API、Web Audio API 和 WebGL。

此教程重點介紹 XMLHttpRequest 中的新功能，尤其是可用于處理文件的功能。

抓取數(shù)據(jù)

以前通過 XHR 抓取二進(jìn)制 blob 形式的文件是很痛苦的事情。從技術(shù)上來說，這甚至是不可能的實現(xiàn)。有一種廣為流傳的一種技巧，是將 MIME 類型替換為由用戶定義的字符集，如下所示：

提取圖片的舊方法：

var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
// Hack to pass bytes through unprocessed.
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange=function(e) {
 if (this.readyState==4 && this.status==200) {
 var binStr=this.responseText;
 for (var i=0, len=binStr.length; i < len; ++i) {
 var c=binStr.charCodeAt(i);
 //String.fromCharCode(c & 0xff);
 var byte=c & 0xff; // byte at offset i
 }
 }
};
xhr.send();

雖然這種方法可行，但是 responseText 中實際返回的并不是二進(jìn)制 blob，而是代表圖片文件的二進(jìn)制字符串。我們要巧妙地讓服務(wù)器在不作處理的情況下，將這些數(shù)據(jù)傳遞回去。雖然這個技巧有用，但是我不推薦大家走這種歪門邪道。只要是通過玩弄字符代碼和字符串操控技巧，強(qiáng)行將數(shù)據(jù)轉(zhuǎn)化成所需的格式，都會出現(xiàn)問題。

指定響應(yīng)格式

在前一個示例中，我們通過替換服務(wù)器的 MIME 類型并將響應(yīng)文本作為二進(jìn)制字符串處理，下載了二進(jìn)制“文件”形式的圖片。現(xiàn)在，讓我們利用 XMLHttpRequest 新增的 responseType 和 response 屬性，告知瀏覽器我們希望返回什么格式的數(shù)據(jù)。

xhr.responseType

在發(fā)送請求前，根據(jù)您的數(shù)據(jù)需要，將 xhr.responseType 設(shè)置為“text”、“arraybuffer”、“blob”或“document”。請注意，設(shè)置（或忽略）xhr.responseType='' 會默認(rèn)將響應(yīng)設(shè)為“text”。

xhr.response

成功發(fā)送請求后，xhr 的響應(yīng)屬性會包含 DOMString、ArrayBuffer、Blob 或 Document 形式（具體取決于 responseTyp 的設(shè)置）的請求數(shù)據(jù)。

憑借這個優(yōu)秀的新屬性，我們可以修改上一個示例：以 ArrayBuffer 而非字符串的形式抓取圖片。將緩沖區(qū)移交給 BlobBuilder API 可創(chuàng)建 Blob：

BlobBuilder=window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType='arraybuffer';
xhr.onload=function(e) {
 if (this.status==200) {
 var bb=new BlobBuilder();
 bb.append(this.response); // Note: not xhr.responseText
 var blob=bb.getBlob('image/png');
 ...
 }
};
xhr.send();

好多了！

ArrayBuffer 響應(yīng)

ArrayBuffer 是二進(jìn)制數(shù)據(jù)通用的固定長度容器。如果您需要原始數(shù)據(jù)的通用緩沖區(qū)，ArrayBuffer 就非常好用，但是它真正強(qiáng)大的功能是讓您使用 JavaScript 類型數(shù)組創(chuàng)建底層數(shù)據(jù)的“視圖”。實際上，可以通過單個 ArrayBuffer 來源創(chuàng)建多個視圖。例如，您可以創(chuàng)建一個 8 位整數(shù)數(shù)組，與來自相同數(shù)據(jù)的現(xiàn)有 32 位整數(shù)數(shù)組共享同一個 ArrayBuffer。底層數(shù)據(jù)保持不變，我們只是創(chuàng)建其不同的表示方法。

例如，下面以 ArrayBuffer 的形式抓取我們相同的圖片，但是現(xiàn)在，會通過該數(shù)據(jù)緩沖區(qū)創(chuàng)建無符號的 8 位整數(shù)數(shù)組。

var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType='arraybuffer';
xhr.onload=function(e) {
 var uInt8Array=new Uint8Array(this.response); // this.response==uInt8Array.buffer
 // var byte3=uInt8Array[4]; // byte at offset 4
 ...
};
xhr.send();

Blob 響應(yīng)

如果您要直接處理 Blob 且/或不需要操作任何文件的字節(jié)，可使用 xhr.responseType='blob'：

window.URL=window.URL || window.webkitURL; // Take care of vendor prefixes.
var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType='blob';
xhr.onload=function(e) {
 if (this.status==200) {
 var blob=this.response;
 var img=document.createElement('img');
 img.onload=function(e) {
 window.URL.revokeObjectURL(img.src); // Clean up after yourself.
 };
 img.src=window.URL.createObjectURL(blob);
 document.body.appendChild(img);
 ...
 }
};
xhr.send();

Blob 可用于很多場合，包括保存到 indexedDB、寫入 HTML5 文件系統(tǒng) 或創(chuàng)建 Blob 網(wǎng)址（如本例中所示）。

發(fā)送數(shù)據(jù)

能夠下載各種格式的數(shù)據(jù)固然是件好事，但是如果不能將這些豐富格式的數(shù)據(jù)送回本壘（服務(wù)器），那就毫無意義了。XMLHttpRequest 有時候會限制我們發(fā)送 DOMString 或 Document (XML) 數(shù)據(jù)。但是現(xiàn)在不會了?，F(xiàn)已替換成經(jīng)過修改的 send() 方法，可接受以下任何類型：DOMString、Document、FormData、Blob、File、ArrayBuffer。本部分的其余內(nèi)容中的示例演示了如何使用各類型發(fā)送數(shù)據(jù)。

發(fā)送字符串?dāng)?shù)據(jù)：xhr.send(DOMString)

function sendText(txt) {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) {
 if (this.status==200) {
 console.log(this.responseText);
 }
 };
 xhr.send(txt);
}
sendText('test string');
function sendTextNew(txt) {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.responseType='text';
 xhr.onload=function(e) {
 if (this.status==200) {
 console.log(this.response);
 }
 };
 xhr.send(txt);
}
sendText2('test string');

這沒有新內(nèi)容，只是正確的代碼段略有不同。其中設(shè)置了 responseType='text' 作為對比。再次說明，省略此行會得到同樣的結(jié)果。

提交表單：xhr.send(FormData)

很多人可能習(xí)慣于使用 jQuery 插件或其他庫來處理 AJAX 表單提交。而我們可以改用 FormData，這是另一種針對 XHR2 設(shè)計的新數(shù)據(jù)類型。使用 FormData 能夠很方便地實時以 JavaScript 創(chuàng)建 HTML <form>。然后可以使用 AJAX 提交該表單：

function sendForm() {
 var formData=new FormData();
 formData.append('username', 'johndoe');
 formData.append('id', 123456);
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) { ... };
 xhr.send(formData);
}

實質(zhì)上，我們只是動態(tài)創(chuàng)建了 <form>，并通過調(diào)用 append 方法為其附加了 <input> 值。

當(dāng)然，您無需從一開始就創(chuàng)建 <form>。FormData 對象可通過頁面上現(xiàn)有的 HTMLFormElement 進(jìn)行初始化。例如：

<form id="myform" name="myform" action="/server">
 <input type="text" name="username" value="johndoe">
 <input type="number" name="id" value="123456">
 <input type="submit" onclick="return sendForm(this.form);">
</form>
function sendForm(form) {
 var formData=new FormData(form);
 formData.append('secret_token', '1234567890'); // Append extra data before send.
 var xhr=new XMLHttpRequest();
 xhr.open('POST', form.action, true);
 xhr.onload=function(e) { ... };
 xhr.send(formData);
 return false; // Prevent page from submitting.
}

HTML 表單可包含文件上傳（例如 <input type="file">），而 FormData 也可以處理此操作。只需附加文件，瀏覽器就會在調(diào)用 send() 時構(gòu)建 multipart/form-data 請求。

function uploadFiles(url, files) {
 var formData=new FormData();
 for (var i=0, file; file=files[i]; ++i) {
 formData.append(file.name, file);
 }
 var xhr=new XMLHttpRequest();
 xhr.open('POST', url, true);
 xhr.onload=function(e) { ... };
 xhr.send(formData); // multipart/form-data
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 uploadFiles('/server', this.files);
}, false);

上傳文件或 blob：xhr.send(Blob)

我們也可以使用 XHR 發(fā)送 File 或 Blob。請注意，所有 File 都是 Blob，所以在此使用兩者皆可。

該示例使用 BlobBuilder API 從頭開始創(chuàng)建新的文本文件，并將該 Blob 上傳到服務(wù)器。該代碼還設(shè)置了一個處理程序，用于通知用戶上傳進(jìn)度：

<progress min="0" max="100" value="0">0% complete</progress>
function upload(blobOrFile) {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) { ... };
 // Listen to the upload progress.
 var progressBar=document.querySelector('progress');
 xhr.upload.onprogress=function(e) {
 if (e.lengthComputable) {
 progressBar.value=(e.loaded / e.total) * 100;
 progressBar.textContent=progressBar.value; // Fallback for unsupported browsers.
 }
 };
 xhr.send(blobOrFile);
}
// Take care of vendor prefixes.
BlobBuilder=window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var bb=new BlobBuilder();
bb.append('hello world');
upload(bb.getBlob('text/plain'));

上傳字節(jié)：xhr.send(ArrayBuffer)

最后也是相當(dāng)重要的一點就是，我們能以 XHR 的有效負(fù)載形式發(fā)送 ArrayBuffer。

function sendArrayBuffer() {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) { ... };
 var uInt8Array=new Uint8Array([1, 2, 3]);
 xhr.send(uInt8Array.buffer);
}

跨源資源共享 (CORS)

CORS 允許一個域上的網(wǎng)絡(luò)應(yīng)用向另一個域提交跨域 AJAX 請求。啟用此功能非常簡單，只需由服務(wù)器發(fā)送一個響應(yīng)標(biāo)頭即可。

啟用 CORS 請求

假設(shè)您的應(yīng)用已經(jīng)在 example.com 上了，而您想要從 www.example2.com 提取數(shù)據(jù)。一般情況下，如果您嘗試進(jìn)行這種類型的 AJAX 調(diào)用，請求將會失敗，而瀏覽器將會出現(xiàn)“源不匹配”的錯誤。利用 CORS，www.example2.com 只需添加一個標(biāo)頭，就可以允許來自 example.com 的請求：

Access-Control-Allow-Origin: http://example.com

可將 Access-Control-Allow-Origin 添加到某網(wǎng)站下或整個域中的單個資源。要允許任何域向您提交請求，請設(shè)置如下：

Access-Control-Allow-Origin: *

其實，該網(wǎng)站 (html5rocks.com) 已在其所有網(wǎng)頁上均啟用了 CORS。啟用開發(fā)人員工具后，您就會在我們的響應(yīng)中看到 Access-Control-Allow-Origin 了：

html5rocks.com 上的 Access-Control-Allow-Origin 標(biāo)頭

啟用跨源請求是非常簡單的，因此如果您的數(shù)據(jù)是公開的，請務(wù)必啟用 CORS！

提交跨域請求

如果服務(wù)器端已啟用了 CORS，那么提交跨域請求就和普通的 XMLHttpRequest 請求沒什么區(qū)別。例如，現(xiàn)在 example.com 可以向 www.example2.com 提交請求了：

var xhr=new XMLHttpRequest();
xhr.open('GET', 'http://www.example2.com/hello.json');
xhr.onload=function(e) {
 var data=JSON.parse(this.response);
 ...
}
xhr.send();

實際示例：

下載文件并保存到 HTML5 文件系統(tǒng)

假設(shè)您有一個圖片庫，想要提取一些圖片，然后使用 HTML5 文件系統(tǒng)本地保存這些圖片。一種方法是以 ArrayBuffer 形式請求圖片，通過數(shù)據(jù)構(gòu)建 Blob，并使用 FileWriter 寫入 blob：

window.requestFileSystem=window.requestFileSystem || window.webkitRequestFileSystem;
function onError(e) {
 console.log('Error', e);
}
var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType='arraybuffer';
xhr.onload=function(e) {
 window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
 fs.root.getFile('image.png', {create: true}, function(fileEntry) {
 fileEntry.createWriter(function(writer) {
 writer.onwrite=function(e) { ... };
 writer.onerror=function(e) { ... };
 var bb=new BlobBuilder();
 bb.append(xhr.response);
 writer.write(bb.getBlob('image/png'));
 }, onError);
 }, onError);
 }, onError);
};
xhr.send();

請注意：要使用此代碼，請參閱“探索 FileSystem API”教程中的瀏覽器支持和存儲限制。

分割文件并上傳各個部分

使用 File API，我們可以將操作簡化為上傳大文件。我們采用的技術(shù)是：將要上傳的文件分割成多個部分，為每個部分生成一個 XHR，然后在服務(wù)器上將各部分組合成文件。這類似于 Gmail 快速上傳大附件的方法。使用這種技術(shù)還可以規(guī)避 Google 應(yīng)用引擎對 http 請求的 32 MB 限制。

window.BlobBuilder=window.MozBlobBuilder || window.WebKitBlobBuilder ||
 window.BlobBuilder;
function upload(blobOrFile) {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) { ... };
 xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 var blob=this.files[0];
 const BYTES_PER_CHUNK=1024 * 1024; // 1MB chunk sizes.
 const SIZE=blob.size;
 var start=0;
 var end=BYTES_PER_CHUNK;
 while(start < SIZE) {
 // Note: blob.slice has changed semantics and been prefixed. See http://goo.gl/U9mE5.
 if ('mozSlice' in blob) {
 var chunk=blob.mozSlice(start, end);
 } else {
 var chunk=blob.webkitSlice(start, end);
 }
 upload(chunk);
 start=end;
 end=start + BYTES_PER_CHUNK;
 }
}, false);
})();

用于在服務(wù)器上重組文件的代碼并未在此顯示。

趕快試試吧！

VG 動畫有很多種實現(xiàn)方法，也有很大SVG動畫庫，現(xiàn)在我們就來介紹 svg動畫實現(xiàn)方法都有哪些？

一、SVG 的 animation

SVG animation 有五大元素，他們控制著各種不同類型的動畫，分別為：

set
animate
animateColor
animateTransform
animateMotion

1.1、set

set 為動畫元素設(shè)置延遲，此元素是SVG中最簡單的動畫元素，但是他并沒有動畫效果。

使用語法：

<set attributeName="" attributeType="" to="" begin="" />

attributeName ：是要改變的元素屬性名稱。
attributeType ：是表明attributeName屬性值的列表，支持三個固定參數(shù) CSS/XML/auto，如x,y以及transform屬于XML，opacity屬于CSS。auto是瀏覽器自動判別的意思，也是默認(rèn)值，如果你不知道該選哪個就填auto，瀏覽器自己判別。
to ：動畫結(jié)束的屬性值。
begin ：動畫延遲時間。

eg：繪制一個半徑為200的圓，4秒之后，半徑變?yōu)?0。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <set attributeName="r" attributeType="XML" to="50" begin="4s" />
 </circle>
</svg>

1.2、animate

是基礎(chǔ)的動畫元素，實現(xiàn)單屬性的過渡效果。

使用語法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

from ：過渡效果的屬性開始值。
to：過渡效果的屬性結(jié)束值。
begin：動畫開始時間。
dur：動畫過渡時間，控制動畫速度。
repeatCount：動畫重復(fù)次數(shù)。

eg：繪制一個半徑為200的圓，4秒之后半徑在2秒內(nèi)從200逐漸變?yōu)?0。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
 <animate attributeName="r" from="200" to="50" 
  begin="4s" dur="2s" repeatCount="2"></animate>
</circle>

1.3、animateColor

控制顏色動畫，animate也可以實現(xiàn)這個效果，所以該屬性目前已被廢棄。

1.4、animateTransform

實現(xiàn)transform變換動畫效果，與css3的transform變換類似。實現(xiàn)平移、旋轉(zhuǎn)、縮放等效果。

使用語法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

repeatCount：重復(fù)次數(shù)，設(shè)置為 indefinite 表示無限循環(huán)，一直執(zhí)行。
type：添加 transform 變換類型。
eg：繪制一個半徑為200的圓，4秒之后開始縮放，在2秒內(nèi)從1.5縮小到0倍。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <animateTransform attributeName="transform" begin="4s"  
   dur="2s" type="scale" from="1.5" to="0" 
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

1.5、animateMotion

可以定義動畫路徑，讓SVG各個圖形，沿著指定路徑運動。

使用語法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

path：定義路徑，使用語法與《HTML5(八)——SVG 之 path 詳解》path的d屬性一致。
begin：延遲時間。
dur：動畫執(zhí)行時間。

eg：繪制一個半徑為10的圓，延遲4秒從左上角運動的右下角。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
  <animateMotion 
   path="M 0 0 L 320 320" 
   begin="4s" dur="2s"
   ></animateMotion>
 </circle>
</svg>

實際制作動畫的時候，動畫太單一不酷，需要同時改變多個屬性時，上邊的四種元素可以互相組合，同類型的動畫也能組合。以上這些元素雖然能夠?qū)崿F(xiàn)動畫，但是無法動態(tài)地添加事件，所以接下來我們就看看 js 如何制作動畫。

二、JavaScript 控制

上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內(nèi)置形狀元素，還可以給任意元素添加事件。

給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名或者addEventListener添加。

eg：使用SVG繪制地一條線，點擊線條地時候改變 x1 ,實現(xiàn)旋轉(zhuǎn)效果。

<svg width="800" height="800" id="svg">
    <line id="line" x1="100" y1="100" 
    x2="400" y2="300" 
    stroke="black" stroke-width="5"></line>  
  </svg>
<script>
 window.onload=function(){
  var line=document.getElementById("line")
  line.onclick=function(){
   let start=parseInt(line.getAttribute("x1")),
       end=400,dis=start-end
   requestAnimationFrame(next)
   let count=0;
   function next(){
    count++
    let a=count/200,cur=Math.abs(start+ dis*a)
    line.setAttribute('x1',cur)
    if(count<200)requestAnimationFrame(next)
   }
  }
 }
</script>

js制作的SVG動畫，主要利用 requestAnimationFrame 來實現(xiàn)一幀一幀的改變。

我們上述制作的 SVG 圖形、動畫等，運行在低版本IE中，發(fā)現(xiàn)SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個元素需要添加 v:元素，樣式中還需要添加 behavier ，經(jīng)常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫。

三、Rapha?l.js (拉斐爾)

Raphael.js是通過SVG/VML+js實現(xiàn)跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類似于jquery，本質(zhì)還是一個javascript庫，使用簡單，容易上手。

使用之前需要先引入Raphael.js庫文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、創(chuàng)建畫布

Rapheal有兩種創(chuàng)建畫布的方式：

第一種：瀏覽器窗口上創(chuàng)建畫布

創(chuàng)建語法：

var paper=Raphael(x,y,width,height)

x,y是畫布左上角的坐標(biāo)，此時畫布的位置是絕對定位，有可能會與其他html元素重疊。width、height是畫布的寬高。

第二種：在一個元素中創(chuàng)建畫布

創(chuàng)建語法：

var paper=Raphael(element, width, height);

element是元素節(jié)點本身或ID width、height是畫布的寬度和高度。

3.2、繪制圖形

畫布創(chuàng)建好之后，該對象自帶SVG內(nèi)置圖形有矩形、圓形、橢圓形。他們的方法分別為：

paper.circle(cx, cy, r); // (cx , cy)圓心坐標(biāo) r 半徑
paper.rect(x, y, width, height, r); // (x,y)左上角坐標(biāo) width寬度 height高度 r圓角半徑(可選)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標(biāo) rx水平半徑 ry垂直半徑

eg：在div中繪制一個圓形，一個橢圓、一個矩形。

<div id="box"></div>
<script>
 var paper=Raphael("box",300,300)
 paper.circle(150,150,150)
 paper.rect(0,0,300,300)
 paper.ellipse(150,150,100,150)
</script>

運行結(jié)果如下：

除了簡單圖形之外，還可以繪制復(fù)雜圖形，如三角形、心型，這時就使用path方法。

使用語法：paper.path(pathString)

pathString是由一個或多個命令組成，每個命令以字母開始，多個參數(shù)是由逗號分隔。

eg：繪制一個三角形。

let sj=paper.path("M 0,0 L100,100 L100,0 'Z'")

還可以繪制文字，如果需要換行，使用 \n 。

文字語法：paper.text(x,y,text)

(x,y)是文字坐標(biāo)，text是要繪制的文字。

3.3、設(shè)置屬性

圖形繪制之后，我們通常會添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設(shè)置屬性。

使用語法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})

如果只有屬性名沒有屬性值，則是獲取屬性，如果有屬性值，則是設(shè)置屬性。

注意：如果只設(shè)置一個屬性時，可以省略‘{}’。如：rect.attr('fill','pink')

eg：給上邊的矩形添加邊框和背景色。

<div id="box"></div>
<script>
 var paper=Raphael("box",300,300)
 let rect=paper.rect(100,100,150,200)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>

3.4、添加事件

RaphaelJS一般具有以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對應(yīng)的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

使用語法：

obj.click(function(){
 //需要操作的內(nèi)容
})

3.5、添加動畫

animate為指定圖形添加動畫并執(zhí)行。

使用語法：

obj.animate({
 "屬性名1":屬性值1,
 "屬性名2":屬性值2,
  ...
},time,type)

屬性名和屬性值就根據(jù)你想要的動畫類型加就ok。

time：動畫所需時間。

type：指動畫緩動類型。常用值有：

linear - 線性漸變
ease-in | easeIn | < - 由慢到快
ease-out | easeOut | > - 由快到慢
ease-in-out | easeInOut | <> - 由慢到快再到慢
back-in | backIn - 開始時回彈
back-out | backOut - 結(jié)束時回彈
elastic - 橡皮筋
bounce - 彈跳

eg：點擊矩形，矩形緩緩變大。

<div id="box"></div>
<script>
 var paper=Raphael("box",800,500)
 let rect=paper.rect(100,100,150,100)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
 rect.attr('fill','pink')
 rect.click(function(){
  rect.animate({
   "width":300,
   "height":300
  },1000,"bounce")
 })
</script>

復(fù)制上邊的代碼，分別在各個瀏覽器和低版本IE瀏覽器運行，發(fā)現(xiàn)都可以正常運行。SVG的動畫庫挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫。

在線咨詢

上一篇：春節(jié)期間，南寧市這些辦事窗口有調(diào)整
下一篇：HTML(5)代碼規(guī)范：編寫可維護(hù)、可讀性高的HTM

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

XML 學(xué)習(xí)詳解

習(xí)思路

1.什么是XML

? 標(biāo)記語言

? 可擴(kuò)展

? 特點

2.Xml的作用

? 數(shù)據(jù)儲存

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

二、XML結(jié)構(gòu)

? 代碼舉例：

? 結(jié)構(gòu)分析：

? 總結(jié)特點

三、XML語法

1.語法總則

2.文檔聲明

3.命名規(guī)則【標(biāo)簽元素】

4.定義元素【標(biāo)簽】

? Xml三種節(jié)點

? 元素的三種表現(xiàn)形式：

? 實例

5.定義屬性

? 描述

? 作用

? 注意使用事項

6.實體引用【CDATA區(qū)】

? 描述

? 實體引用

? 多個實體引用

7.注釋

8.批處理指令【了解】

四、PHP解析XML

1.什么是XML的解析

2.PHP解析XML方式

3.創(chuàng)建一個XML文件

? 創(chuàng)建步驟

? 最終代碼

4.DOM操作方式【了解】

? 實現(xiàn)原理

? 實現(xiàn)思路

? 使用語法

? 操作方法

? 讀取節(jié)點

? 增加節(jié)點

? 刪除節(jié)點

5.SimpleXML方式【重點】

? 實現(xiàn)原理

? 使用語法

使用函數(shù)

讀取節(jié)點

讀取節(jié)點屬性

創(chuàng)建節(jié)點

? 刪除節(jié)點

? 修改操作自己完成

6.DOM和SimpleXML對比

? 實現(xiàn)原理對比

? 代碼對比

六、XPATH

1.什么是XPATH

2.查找規(guī)則

3.XPATH在線詞典應(yīng)用

1.完成需求

2.完成步驟

3.完成代碼

XMLHttpRequest2 新技巧

目錄

一、SVG 的 animation

二、JavaScript 控制

三、Rapha?l.js (拉斐爾)

您的項目需求

二、XML結(jié)構(gòu)

三、XML語法

六、XPATH

二、JavaScript 控制