與web交流

瀏覽器可以向服務器做出一個HTTP請求，服務器會返回頁面，並隨之返回另外一些只有瀏覽器能看到的元數據。

1、從一個URL開始：

var url ="http://someserver.com/data.json";

2、創建一個請求對象：

var request= new XMLHttpRequest();

3、告訴這個請求對象我們想幹嘛：

request.open("GET",url);

4、瀏覽器也可以採用同樣的方式通過HTTP從web服務器獲取數據。

建立處理程序：

request.οnlοad=function(){
    if(request.status==200){
        alert("data received!");
<!--獲取的數據可以在request對象的responseText屬性中找到-->
<!--alert(request.responseText);-->
    }
};

5、告訴請求對象去獲取數據：

request.send(null);

---------------------------

關於JSON：

剛開發XMLHttpRequest時，XML是大家交換數據採用的方法，現在更多的是JSON。

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON採用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成爲理想的數據交換語言。易於人閱讀和編寫，同時也易於機器解析和生成。

使用JSON：

<!--一個完整的Movie對象-->
var movie=new Movie("Plan 9","Cult Classic",2,["3:00pm","7:00pm"]);
<!--轉換爲JSON串格式-->
var jsonstring=JSON.stringify(movie);
alert(jsonstring);
<!--轉換回對象-->
var jsonMovieObject=JSON.parse(jsonstring);
alert("JSON movie is "+jsonMovieObject.title);

JSON和XML比較

JSON和XML的可讀性可謂不相上下，一邊是簡易的語法，一邊是規範的標籤形式，很難分出勝負。

XML天生有很好的擴展性；XML有豐富的編碼工具，比如Dom4j、JDom等；XML的解析方式有兩種：一是通過文檔模型解析，另外一種方法是遍歷節點（document 以及

childNodes）。

JSON具有簡單直觀的格式；可以直接與JavaScript、Python等語言中的對象兼容；作爲數據包格式傳輸的時候具有更高的效率（因爲JSON不像XML有閉合標籤，節省很多字節）。

實例比較：

XML

<?xmlversion="1.0"encoding="utf-8"?>
<country>
<name>中國</name>
<province>
<name>黑龍江</name>
<cities>
<city>哈爾濱</city>
<city>大慶</city>
</cities>
</province>
<province>
<name>廣東</name>
<cities>
<city>廣州</city>
<city>深圳</city>
<city>珠海</city>
</cities>
</province>
<province>
<name>臺灣</name>
<cities>
<city>臺北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>烏魯木齊</city>
</cities>
</province>
</country>

JSON

{
"name":"中國",
"province":[
{
"name":"黑龍江",
"cities":{
"city":["哈爾濱","大慶"]
}
},
{
"name":"廣東",
"cities":{
"city":["廣州","深圳","珠海"]
}
},
{
"name":"臺灣",
"cities":{
"city":["臺北","高雄"]
}
},
{
"name":"新疆",
"cities":{
"city":["烏魯木齊"]
}
}
]
}

--------------------------------

測試本地文件sales.json

window.οnlοad=function(){
    var url="http://localhost/sales.json";
    var request=new XMLHttpRequest();
    request.open("GET",url);
    request.οnlοad=function(){
        if(request.status==200){
 <!--數據加載完成後調用這個函數-->         
            updateSales(request.responseText);
        }
    };
    request.send(null);
}

function updateSales(responseText){
    var salesDiv=document.getElementById("sales");
    saleDiv.innerHTML=responseText;
}

調整代碼以利用JSON：

function updateSales(responseText) {

	var salesDiv = document.getElementById("sales");
	var sales = JSON.parse(responseText);
	for (var i = 0; i < sales.length; i++) {
		var sale = sales[i];
		var div = document.createElement("div");
		div.setAttribute("class", "saleItem");
		div.innerHTML = sale.name + " sold " + sale.sales + " gumballs";
		salesDiv.appendChild(div);
	}
 
}

-----------------------------------

轉向實際服務器，這一次獲取的不是靜態數據文件，而是從遠程服務器動態生成的JSON。

那麼需要更新URL，轉向實際的URL。

如果只是改了URL，那麼運行是失敗的！

這是因爲跨域了，瀏覽器不允許這麼做。

有兩種方法：

1、使用託管文件

2、JSONP獲取數據（JSON with padding）

JSONP是一種使用<script>標記獲取JSOP對象的方法。可以避免XMLHttpRequest的同源安全問題。

特點就是服務器發回JSON串前，把它包裝在一個函數調用中。

指定URL時，在末尾增加一個參數：http://.../?callback=updateSales

更新代碼：

/*傳入的是一個Javascript對象*/
function updateSales(sales) {
	var salesDiv = document.getElementById("sales");
	for (var i = 0; i < sales.length; i++) {
		var sale = sales[i];
		var div = document.createElement("div");
		div.setAttribute("class", "saleItem");
		div.innerHTML = sale.name + " sold " + sale.sales + " gumballs";
		salesDiv.appendChild(div);
}

<!doctype html>
<html lang="en">
<head>
<title>Mighty Gumball</title>
<meta charset="utf-8">
<script src="mightygumball.js"></script>
<link rel="stylesheet" href="mightygumball.css">

</head>
<body>

<h1>Mighty Gumball Sales</h1>

<div id="sales">
</div>
<script src="http://.../?callback=updateSales"></script>
</body>
</html>

---------------------------------------

下面希望顯示數據不斷更新：

1、html中刪除JSONP<script>元素

2、需要建立一個處理程序，每隔幾秒做出一個JSONP請求

3、實現JSONP代碼

建立一個定時器：

var interval = setInterval(handleRefresh, 3000);
handleRefresh();

啓動間隔定時器之後可以把id傳遞到cleraInterval方法。關閉瀏覽器也能停止。

function handleRefresh() {
	
	var url = "http://gumball.wickedlysmart.com" +
				"?callback=updateSales";
	var newScriptElement = document.createElement("script");
	newScriptElement.setAttribute("src", url);
	newScriptElement.setAttribute("id", "jsonp");
	var oldScriptElement = document.getElementById("jsonp");
	var head = document.getElementsByTagName("head")[0];
	if (oldScriptElement == null) {
		head.appendChild(newScriptElement);
	}
	else {
		head.replaceChild(newScriptElement, oldScriptElement);
	}
}

replaceChild(new,old)是用新元素替換舊元素，舊元素會從DOM中刪除。

處理瀏覽器緩存問題：

var url = "http://gumball.wickedlysmart.com" +
				"?callback=updateSales" +
				"&random=" + (new Date()).getTime();

運行後發現出現重複問題了。

還可以在URL末尾增加一個lastreporttime參數，這樣只會得到這個時間之後的報告：

var url = "http://gumball.wickedlysmart.com" +
				"?callback=updateSales" +
				"&lastreporttime=" + lastReportTime +
				"&random=" + (new Date()).getTime();

var lastReportTime = 0;
//...
function updateSales(sales) {
	var salesDiv = document.getElementById("sales");
	for (var i = 0; i < sales.length; i++) {
		var sale = sales[i];
		var div = document.createElement("div");
		div.setAttribute("class", "saleItem");
		div.innerHTML = sale.name + " sold " + sale.sales + " gumballs";
		//salesDiv.appendChild(div);
		if (salesDiv.childElementCount == 0) {
			salesDiv.appendChild(div);
		}
		else {
			salesDiv.insertBefore(div, salesDiv.firstChild);
		}
	}

	if (sales.length > 0) {
		lastReportTime = sales[sales.length-1].time;
	}
}

-------------------------------------------------

單元測試工具

設計模式之代理模式

設計模式之複合模式

設計模式之迭代器與組合模式

與web交流

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結