其實我想完整的總結一下前端網絡的那些東西，但我想不到題目了啊。
就從Ajax開始說吧...
Ajax是什么？
曾經，我們每發送一個請求，都要重新加載一下頁面。二璇妹妹很小很小時候登錄某小游戲網站，輸入了賬號，但輸錯了密碼，于是乎頁面刷新了，還要重新輸入用戶名，體驗賊次啊，好氣。
2005年，google地圖放大或移動時，做到了不刷新頁面就顯示新的信息，眾人大呼 “哇，這是好棒~~”，嗯，Ajax就風靡起來了。
Ajax Asynchronous Javascript And XML（異步JavaScript和XML），是一種不刷新整個網頁就與服務器通訊的辦法，數據在客戶端與服務器之間獨立傳輸，服務器返回的不再是整個界面。
Ajax的x指的是 xml，曾經Ajax以異步形式操作的是 xml,現在Ajax操作的是Json。
Form表單
上面那個讓二璇妹妹很氣的事就可能是用form表單提交的信息。那么我們來了解一下吧！
傳統的form表單主要有三個重要的屬性
method：GET / POST請求
action：后臺文件地址
-
enctype：
application/x-www-form-urlencoded在發送前編碼所有字符（默認情況下）
multipart/form-data不對字符進行編碼(<input type='file'> 主要用于表單上傳文件時)form表單中method屬性 GET ，POST
GET 使用URL 或Cookie 傳參，而POST將數據，放在BODY中。
GET 的URL會有長度上的限制， POST可以傳輸很多數據。
但事實上HTTP協議對GET和POST 都沒有對數據的長度進行限制，只是瀏覽器限制了URL的長度POST比GET安全。
因為GET的參數直接暴露在url上，并且會完整保留在瀏覽器歷史記錄里GET產生一個TCP數據包，POST產生兩個TCP數據包。
對于GET請求，瀏覽器會把http header和data一并發送出去，服務器響應200。而對于POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200
Ajax的優點
1.頁面無刷新與服務器通信
2.以異步形式與服務器通信，不需要打斷用戶操作。
3.減輕服務器的負擔。
Ajax的缺點
1.破壞瀏覽器的后退機制。
動態更新頁面的情況下，用戶無法回到前一個頁面狀態
2.安全問題
會暴露比以前更多的數據和服務器邏，遇到跨站點腳本攻擊、sqi注入攻擊問題。
3.對搜索引擎支持較弱（seo）。
4.在移動端兼容性比較差
5.違背了url和資源定位的初衷。
一個url如果采用了ajax技術，也許在該url地址下面看到的和別人在這個url地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。
還是先說幾個重要的參數
對象上三個很重要的方法：
- **.open(‘method’, ‘url’, ‘true’) **
建立對服務器的調用，method參數可以是get、post或者put。
url參數可以是相對url或者絕對url。
第三個參數是選擇異步還是同步，異步是true。 - **.send(content) **
向服務器發送請求 - **.setRequestHeader(‘label’, ‘value’) **
把指定首部設置為提供的值，在設置任何首部之前必須調用open方法。
對象的屬性 -
onreadystatechange
狀態改變觸發器 -
readyState
對象的狀態
0代表未初始化，此時已經創建了一個XMLHttpRequest對象
1代表讀取中，此時代碼已經調用XMLHttpRequest的open方法并且XMLHttpRequest已經將請求發送到服務期。
2代表已讀取，此時已經通過open方法把一個請求發送到服務端，但是還沒有收到。
3代表交互中，此時已經收到http響應頭部信息，但是消息主體部分還沒有完全接受
4代表完成，此時響應已經被完全接受。
-
responseText
服務器進程返回數據的文本版本 -
responseXML
服務器進程返回數據的兼容DOM的XML文旦對象 - status 服務器返回的狀態碼
讓我們來封裝一個Ajax吧
function Ajax(method,url,flag,data,callBack){
/* 創建對象*/
var xhr = null;
if(window.XMLHttpRequest){//用對象訪問，即使沒有該屬性也是返回undefined不會報錯。
xhr = new window.XMLHttpRequest();//與后臺服務器交換數據
}else{
xhr = new window.ActiveXObject('Microsoft.XMLHTTP');//兼容ie瀏覽器
}
/*創建與服務器的連接*/
if(method === 'GET'){
xhr.open('GET',url + '?' + data, flag);//建立與服務器的連接，flag表示是否異步
xhr.send();//向服務器發送請求
}else if(method === 'POST'){
xhr.open('POST',url,flag);
xhr.setRequestHeader('Content-type','application/x-www.form-urlencoded');//設置發送數據格式
xhr.send(data);
}
/*實時監聽對象狀態*/
xhr.onreadystatechange = function(){//狀態改變事件觸發器
if(xhr.readyState === 4){
if(xhr.status === 200){
callBack(xhr.responseText);
}else{
alert('error');
}
}
}
}
好吧，我有點懶得解釋每個函數，就簡單的注釋一下。。。
readyState 和 status放在http里說吧，??
同源策略
同源策略(Same-Origin Policy)只有在域名、協議名、端口號都相同的情況下，才稱為同源。
不同源的客戶端腳本在沒有明確授權的情況下，是不能夠讀寫對方的資源的。
~~~哦，我們得了解一下什么是域名、協議名、端口號。
url(資源定位器)的構成
（原文：http://blog.csdn.net/ergouge/article/details/8185219 ）
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
從上面的URL可以看出，一個完整的URL包括以下幾部分：
1.協議部分
該URL的協議部分為“http：”，這代表網頁使用的是HTTP協議。在Internet中可以使用多種協議，如HTTP，FTP等等本例中使用的是HTTP協議。在"HTTP"后面的“//”為分隔符
2.域名部分
該URL的域名部分為“www.aspxfans.com”。一個URL中，也可以使用IP地址作為域名使用
3.端口部分
跟在域名后面的是端口，域名和端口之間使用“:”作為分隔符。端口不是一個URL必須的部分，如果省略端口部分，將采用默認端口
4.虛擬目錄部分
從域名后的第一個“/”開始到最后一個“/”為止，是虛擬目錄部分。虛擬目錄也不是一個URL必須的部分。本例中的虛擬目錄是“/news/”
5.文件名部分
從域名后的最后一個“/”開始到“？”為止，是文件名部分，如果沒有“?”,則是從域名后的最后一個“/”開始到“#”為止，是文件部分，如果沒有“？”和“#”，那么從域名后的最后一個“/”開始到結束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一個URL必須的部分，如果省略該部分，則使用默認的文件名
6.錨部分
從“#”開始到最后，都是錨部分。本例中的錨部分是“name”。錨部分也不是一個URL必須的部分
7.參數部分
從“？”開始到“#”為止之間的部分為參數部分，又稱搜索部分、查詢部分。本例中的參數部分為“boardID=5&ID=24618&page=1”。參數可以允許有多個參數，參數與參數之間用“&”作為分隔符。
域名是倒著解析的
舉個栗子！！
www.sina.com.cn
.cn是頂級域名
.com.cn是二級域名
.sina.com.cn是三級域名回歸同源策略和Ajax
Ajax也是URL來獲取資源的，也會受到同源策略的限制，當不滿足條件的時候，瀏覽器是不允許我們使用ajax來獲取資源的。
我們在使用AJAX的時候如果訪問了一個不同源的資源的話，會直接報錯。
