Ajax基礎與Json應用(一）

一.Ajax概念

Ajax是異步的javacript和xml

發音：
Ajax [ˈeɪˌdʒæks]

二.同步與異步

傳統方式（同步）：一個請求對應一個回應，他們是同步的，回應不完成，沒辦法對這個頁面進行操作。

具體解釋：
客戶端要發一個請求，服務器端要去處理，響應，這時候客戶端完全是在等待，等待服務器端的處理和響應。當服務器端的處理和響應完成過后，客戶端會重新載入頁面，這時候如果有錯誤，只能再次發起請求，再次等待。
異步：

說明：填寫復雜的表單，填寫到郵箱地址的時候，頁面當時就把郵箱的地址發送到服務器，也就是頁面發送了一個請求，服務器去做處理和響應，得到你的郵箱和地址填寫重復，他會把響應結果發給頁面，但是在這個過程中，依然可以填寫其他的內容。這時候服務器告訴你已經有重復的郵箱的地址，在頁面的表現只是在郵箱地址的旁邊標上一行字，把整個文本框標紅，並沒有重新刷新頁面，這樣 表單上的錯誤會實時的標注出來，你也可以實時的更正錯誤。這個過程你不會有整個頁面的刷新，也不會有整個頁面的提交和等待。也就是說：當你最后點擊一下提交，一切都會搞定，這就是ajax出現后的異步。
**異步實現步驟：*8
1.運用HTML和CSS來實現頁面，表達信息。
2.運用XMLHttpRequest和web服務器進行數據的異步交換

3.運用JavaScript操作DOM，實現動態局部刷新

三.XMLHttpRequest對象創建

首先要是實例化一個XMLHttpRequest對象
var request = new XMLHttpRequest();
注意:
所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用於在后台與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
Ie5,ie6是不支持標准的XMLHttpRequest的.

 var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

四.Http請求

http是計算機通過網絡進行通信的規則
http是一種無狀態協議
1.一個完整的HTTP請求的過程，通常有7個步驟：
（1）建立TCP連接
（2）Web瀏覽器向Web服務器發送請求命令
（3）Web瀏覽器發送請求頭信息
（4）Web服務器應答
（5）Web服務器發送應答頭信息
（6）Web服務器向瀏覽器發送數據
（7）Web服務器關閉TCP連接
2.一個HTTP請求一般由四部分組成：
（1）HTTP請求的方法或動作，比如是GET還是POST請求。
（2）正在請求的URL，總得知道請求的地址是什么吧
（3）請求頭，包含一些客戶端環境信息，身份證信息等
（4）請求體，也就是請求正文，請求正文中可以包含客戶提交的查詢字符串信息，表單信息等等。
（一般請求頭和請求體之間有個空行，這個空行很重要，表示請求頭已經結束了，）
HTTP請求例子：

**3.提交數據的方式 **
GET方法：
一般用於信息獲取
使用URL傳遞參數
對於發送的信息數量也有限制，一般在2000個字符左右
POST方法：
一般用於修改服務器上的資源。 對於所發的信息量無限制
4.一個HTTP響應一般由三部分組成
（1）一個數字和文字組成的狀態碼，用來顯示請求成功還是失敗；
（2）響應頭，響應頭也和請求頭一樣，包含許多包含許多有用的信息，例如服務器類型、日期時間、內容類型和長度等。
（3）響應體，也就是響應正文。
5.HTTP狀態碼：
HTTP狀態碼由3位數字構成，其中首位數字定義了狀態碼的類型：
1XX：信息類，表示收到Web瀏覽器請求，正在進一步的處理中。
2XX：成功，表示用戶請求被正確接收，理解和處理，例如：200 OK
3XX：重定向，表示請求沒有成功，客戶必須采取進一步的動作
4XX：客戶端錯誤，表示客戶端提交的請求有錯誤，例如：400 NOT FOUND 意味着請求中所引起的文檔不存在
5XX：服務器錯誤，表示服務器不能完成對請求的處理：如500

五.xmlhttprequest發送請求

open(method,url,async) 發送請求方法 地址 請求同步/異步,一般是異步，默認值為true
send(string)
在使用 GET 方式請求時無需填寫參數
在使用 POST 方式時參數代表着向服務器發送的數據

例子

setRequestHeader 必須要寫在 open（）和sent（）的中間，否則會出錯誤

//完整的GET請求
var oAjax = new XMLHttpRequest();//創建Ajax對象
oAjax.open("GET","create.php",true);//連接服務器
oAjax.send();//發送請求

//完整的POST發送請求
var oAjax = new XMLHttpRequest();//創建
oAjax.open("POST","create.php",true);//"POST"
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//設置HTTP頭信息.必須在open與send之間,否則出現異常.
oAjax.send("name=陳二狗&sex=男");//發送給服務器的內容

六.xmlhttprequest獲取響應

XMLHttpRequest取得響應：


1.創建XMLHttpRequest對象;
2.調用open();
3.放入一些數據;
4.對這個過程進行監聽，來知道服務器是否做出響應；
5.做一些事情，比如說獲取服務器響應的內容、頁面上的一些重現。
對服務器的相應進行監聽：

request.onreadystatechange = function({……})
request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        //處理request.responseText
    }
}

六. 配置php服務器環境-安裝配置xampp

首先需要下載xampp的安裝包。
http://xampps.com/
解壓安裝包，安裝地點在D盤，安裝完成，啟動XAMPP
在XAMPP控制面板中，我們可以看到Service一列的單選框略有不同，“X”表示相應組件還沒有設為Windows系統服務；“空白”表示沒有安裝該組件；此外還有“√”，表示該組件已經安裝成為Windows系統服務，可以start。
下面我們就單擊Apache和MySQL前的“X”，在彈出的對話框中點擊“Yes”，將它們設為系統服務。
第1步：點擊XAMPP控制面板上的start按鈕，啟動Apache服務器。如圖所示，啟動Apache后會在按鈕和下方狀態中看到變化

我們看到面板上輸出了xampp的初始化日志。
提示Apache的80端口被占用了，
於是win+r 運行cmd，輸入netstat -ano

看來我們需要修改系統設置來更換一個端口號。
點擊右上角的【系統設置】->【Service and Port Settings】，修改對應的端口號，然后點擊【Save】保存。

修改Apache端口后，需要同時修改配置文件。
點擊Apache后的【Config】，選擇httpd- conf，打開配置文件。
搜索Listen，把后邊的端口號，調整為我們剛剛修改后的端口號，保存。重啟下電腦
回到控制面板，點擊我們要啟動的應用后邊的【Start】，面板上【Module】列變色，【PID】有值，說明我們的程序啟動好了。

打開瀏覽器，輸入localhost，看到了php相關的信息。
至此，我們的環境已經搭建好了。


第2步：Apache默認的應用程序運行的根目錄是\xampp\htdocs，打開htdocs文件夾，我們會發現最后有一個index.php文件，接下來我們就要在瀏覽器中訪問這個文件，驗證PHP環境是否已經配置成功。
第3步：打開瀏覽器，輸入網址：http://localhost:81/index.php，
出現XAMPP的管理頁面，說明PHP可以正常運行，環境搭建成功。接下來就可以編寫PHP進行項目開發了。
問題：我的網絡文檔應該放在哪里？
所有網絡文檔都放在 htdocs 主文件夾中（.\xampp\htdocs）。
1）找到配置文件，並在xampp/htdocs下面新建一個文件夾作為你的根目錄，譬如：demo。
2）、在根目錄隨便創建一個HTML文件，輸入文字以備測試，譬如：index.html
3、打開chrome瀏覽器，輸入：localhost/根目錄/HTML文件名，如果可以出現就說明運行本地服務器成功，譬如：
localhost/demo/index.html

七.簡單的ajax例子

1.例子概述
（1）查詢員工的基本信息，通過查詢員工的編號來查詢員工的基本信息
（2）新建員工信息，包括員工姓名，員工編號，員工性別，員工崗位
這個例子中；
Html頁面，用來實現員工查詢和新建的頁面
Php頁面，用來實現查詢員工和新建員工的后台接口
2.設置站點
上面我們已經配置好了php環境，我們來用dreamwear設置下站點
php測試頁面

<h1> 這是一個測試頁面
	<?php
        echo "hello word"
    ?>
</h1>

解釋下：
(1)php是以 結尾
(2)php的默認文件擴展名是.php
(3)php的語句是以;結尾
(4)echo() 函數輸出一個或多個字符串。
直接輸出字符或字符串的意思：例如：echo "abc"; 就會輸出abc echo 'abc' 一樣是輸出abc . 如果僅僅只輸出字符串的話，單引號和雙引號是輸出內容是一樣的，如果要輸出字符串變量，例如字符串變\(a='abc'; echo "\)a123" 則會輸出abc123 ,但如果用 echo '\(a123' 則只會輸出\)a123 ,也就是說單引號里面的內容會原樣輸出，而雙引號則會判斷里面有沒有變量，有變量的話則轉化為變量的值。
結果：

3.頁面設置
Php頁面（用來實現查詢員工和新建員工的后台接口）：

<?php
//設置頁面內容是html編碼格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); //響應過來的內容格式是純文本
//header("Content-Type: application/json;charset=utf-8"); //響應過來的內容格式是json字符串
//header("Content-Type: text/xml;charset=utf-8"); 		 
//header("Content-Type: text/html;charset=utf-8"); 		 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定義一個多維數組，包含員工的信息，每條員工信息為一個數組，定義姓名編號崗位。
//它可以包含這樣一個鍵值的方式。因為這只是一個簡單的例子，所以就把員工的信息都定義在多維數組中，而不再存儲數據庫。
$staff = array
	(
		array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
		array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
		array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
	);

//判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建
//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
	search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
	create();
}

//通過員工編號搜索員工
function search(){
	//檢查是否有員工編號的參數
	//isset檢測變量是否設置；empty判斷值為否為空
	//超全局變量 $_GET 和 $_POST 用於收集表單數據
	if (!isset($_GET["number"]) || empty($_GET["number"])) {
		echo "參數錯誤";
		return;
	}
	//函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。
	//global 關鍵詞用於訪問函數內的全局變量
	global $staff;
	//獲取number參數
	$number = $_GET["number"];
	$result = "沒有找到員工。";
	
	//遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改返回結果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result = "找到員工：員工編號：" . $value["number"] . "，員工姓名：" . $value["name"] . 
			                  "，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"];
			break;
		}
	}
    echo $result;
}

//創建員工
function create(){
	//判斷信息是否填寫完全
	if (!isset($_POST["name"]) || empty($_POST["name"])
		|| !isset($_POST["number"]) || empty($_POST["number"])
		|| !isset($_POST["sex"]) || empty($_POST["sex"])
		|| !isset($_POST["job"]) || empty($_POST["job"])) {
		echo "參數錯誤，員工信息填寫不全";
		return;
	}
	//TODO: 獲取POST表單數據並保存到數據庫
	
	//提示保存成功
	echo "員工：" . $_POST["name"] . " 信息保存成功！";
}

?>

相關知識點：
1)
PHP文件插入header("Content-type: text/html; charset=utf-8");
相當於頁面里面的<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2)

//定義一個多維數組，包含員工的信息，每條員工信息為一個數組，定義姓名編號崗位。
//它可以包含這樣一個鍵值的方式。因為這只是一個簡單的例子，所以就把員工的信息都定義在多維數組中，而不再存儲數據庫。
$staff = array
	(
		array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
	);

3)請求的判斷
$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
在函數中使用$staff這樣一個全局變量。我們需要這樣global $staff;來定義一下，否則直接使用$staff會報錯
但是這種超全局變量就不會出現這種情況，我們在哪里都可以使用，
$_SERVER["REQUEST_METHOD"]這個變量表示的是表單提交數據的方式，get或者post
4)通過員工編號搜索員工思路

if (!isset($_GET["number"]) empty($_GET["number"])) {
    echo "參數錯誤";
    return;
}

（1）首先我們檢查一下參數里邊有沒有員工的編號，如果沒有員工的編號，我們是沒法搜索員工的
（2）先檢查一下我們的GET的url參數中有沒有number這么一個字段，isset是檢查變量是否設置，也就是這個number變量有沒有，empty代表這個變量是否為空，在這里，如果這個變量沒有或者為空，我們都顯示參數錯誤：echo "參數錯誤";也就是說頁面直接返回“參數錯誤”,在瀏覽器中預覽一下，我們沒有任何參數的情況下，代表的是一個get請求，當我們沒有加number參數的時候。它會直接返回參數錯誤，當然如果有參數錯誤，就直接查詢了。查詢，就把這個number參數獲取到。
（3）查詢結果，先是沒有找到，然后遍歷$staff多維數組，如果數組中某條記錄的number等於我們傳進來的員工編號，就把這個結果改成找到員工，並顯示員工信息，然后終止循環，把結果打印出來。

//函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。
//global 關鍵詞用於訪問函數內的全局變量，在函數中使用$staff這樣一個全局變量。//我們需要這樣global $staff;來定義一下，否則直接使用$staff會報錯
	global $staff;
	//獲取number參數
	$number = $_GET["number"];
	$result = "沒有找到員工。";
	
	//遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改//返回結果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result = "找到員工：員工編號：" . $value["number"] . "，員工姓名：" . $value["name"] . 
			                  "，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"];
			break;
		}
	}

5)新建員工信息思路
（1）我們先判斷下信息是否填寫完全，name，number，sex，job等等這些字段是不是都有值。
（2）一旦某個字段沒有值!isset($_POST["name"])或者值為空empty($_POST["name"])
，就顯示參數錯誤，員工信息填寫不全echo "參數錯誤，員工信息填寫不全";

//創建員工
function create(){
	//判斷信息是否填寫完全
	if (!isset($_POST["name"]) || empty($_POST["name"])
		|| !isset($_POST["number"]) || empty($_POST["number"])
		|| !isset($_POST["sex"]) || empty($_POST["sex"])
		|| !isset($_POST["job"]) || empty($_POST["job"])) {
		echo "參數錯誤，員工信息填寫不全";
		return;
	}
	//TODO: 獲取POST表單數據並保存到數據庫
	
	//提示保存成功
	echo "員工：" . $_POST["name"] . " 信息保存成功！";
}

6.服務器端測試
大家在日常進行web開發的時候，有時候后台做好之后，總是等待依賴前台做好之后，可以去調試，其實完全沒有必要
我們只需要約定好接口， 發送的報文和返回的報文，通過fiddler或者類似的工具，直接就可以進行調試了。不需要依賴前台是否完成

在沒有客戶端的情況下對服務端信息進行測試
1）

Excute執行之后，左邊會有一條信息


雙擊這條信息，右側的textview下方會有服務器返回的相應信息

2）http://localhost/ajaxdemo/server.php?number=101
得到結果

3).post請求
(1）因為是post請求，所以服務器地址不需要加上參數
(2）需要加上Content-Type:"application/x-www-form-urlencoded"
(3）需要在Request Body里填寫息相關信息

得到結果

7.客戶端測試
html頁面：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 28px;
	line-height:1.7;
}
</style>	
</head>

<body>

<h1>員工查詢</h1>

<label>請輸入員工編號：</label>
<input type="text" id="keyword" />
<button id="search">查詢</button>
<p id="searchResult"></p>

<h1>員工新建</h1>
<label>請輸入員工姓名：</label>
<input type="text" id="staffName" /><br>
<label>請輸入員工編號：</label>
<input type="text" id="staffNumber" /><br>
<label>請選擇員工性別：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>請輸入員工職位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
alert
<script>
document.getElementById("search").onclick = function() { 
	//發送查詢請求並調用
	//new一個XMLHttpRequest()
         var request;
         if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
           request=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
           reques=new ActiveXObject("Microsoft.XMLHTTP");
         }
	//請求的地址需要帶參數，參數為id為keyword的input的值
        //get方式添加數據
	request.open("GET", "server.php?number="+encodeURI（document.getElementById('keyword').value）+"&" + new Date().getTime() );
	request.send();
	request.onreadystatechange = function() {
		//獲取服務器上的readystate的改變,當他為4的時候說明請求已經結束了，當他為202的時候說明請求成功
		//先判斷他readystate是否為4，當他為202的時候id為searchResult的內容為 request.responseText，否則alert
		if (request.readyState===4) {
			if (request.status===200) { 
				document.getElementById("searchResult").innerHTML = request.responseText;
			} else {
				alert("發生錯誤：" + request.status);
			}
		} 
	}
}

document.getElementById("save").onclick = function() { 
	//發送查詢請求並調用
	//new一個XMLHttpRequest()
         var request;
         if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
           request=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
           reques=new ActiveXObject("Microsoft.XMLHTTP");
         }
	//因為是post請求，請求的地址不需要帶參數
	request.open("POST", "server.php");
	//post請求，數據的參數構造，傳入id為id為staffName，id為staffNumber，id為staffSex和id為staffJob的值
	var data = "name=" + document.getElementById("staffName").value 
	                  + "&number=" + document.getElementById("staffNumber").value 
	                  + "&sex=" + document.getElementById("staffSex").value 
	                  + "&job=" + document.getElementById("staffJob").value;
	//因為是post請求，所以需要設置HTTP頭信息.而且必須在open與send之間,否則出現異常.
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send(data);
	request.onreadystatechange = function() {
		if (request.readyState===4) {
			if (request.status===200) { 
				document.getElementById("createResult").innerHTML = request.responseText;
			} else {
				alert("發生錯誤：" + request.status);
			}
		} 
	}
}
</script>
</body>
</html>

注意：
GET方式:
(1)使用GET方式發送請求時，地址的參數需要編碼，為避免亂碼
　　數據以問號開始，名和值之間用等號鏈接，名值對之間用和號(&)分隔。使用GET方式發送的數據常常被稱為查詢字符串

xhr.open("get","example.php?name1=value1&name2=value2",true)

(2)避免緩存
為了保證參數的絕對唯一性,需要加 時間戳 或隨機數

測試：
F12的network

在按鈕中輸入101，點擊查詢
雙擊左側出現的那條信息，在右側可看到服務器的信息

相關問題：
問：php地址欄輸入參數問題，為什么可以在地址欄直接搜索number查詢員工，我沒看到哪里有ajax請求啊？？
答：
php頁面中模擬了一個二維數組作為數據庫存儲的數據，在地址欄通過鍵值對的形式只是在php頁面中增加這樣一個員工信息，用來驗證php頁面是否有語法錯誤，是不需要通過客戶端問：
向服務器發送請求的
POST http://localhost:8080/ajaxdemo/server.php User-Agent: Fiddler Host: localhost:8080 Content-Type: application/x-www-form-urldecoded Content-Length: 50 Request Body name=歐陽鋒&number=104&sex=男&job=測試經理
結果是“參數錯誤，員工信息填寫不全”這是怎么回事啊？
答：
post發送的信息是經過哈希值加密的，加密是encoded,解密是decoded.
Content-Type: application/x-www-form-urldecoded這是改成encoded。

八.json格式

JSON，就是一種數據傳輸格式而已，其實JSON最大的用處是處理JavaScript和web服務器端之間數據交換。

JSON結構共有2種：
（1）對象結構；
（2）數組結構；
1)JSON對象結構
對象結構是使用大括號“{}”括起來的，大括號內是由0個或多個用英文逗號分隔的“關鍵字:值”對（key:value）構成的。
語法：

var jsonObj =
{
   "鍵名1":值1,
   "鍵名2":值2,
   ……
   "鍵名n":值n
}

說明：
jsonObj指的是json對象。對象結構是以“{”開始，到“}”結束。其中“鍵名”和“值”之間用英文冒號構成對，兩個“鍵名:值”之間用英文逗號分隔。
注意，這里的鍵名是字符串，但是值可以是數值、字符串、對象、數組或邏輯true和false。

(1)從JSON中讀數據

jsonObj.key
jsonObj["key"]

說明：
jsonObj指的是JSON對象，key指的是鍵名。讀取JSON數據使用的是“.”操作符，這個跟JavaScript對象讀取屬性值是差不多的。
比如：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"123",
            "age":23,
            "hobby":"562",
            }
        }
        //讀取JSON數據
        document.write("名字是："+obj.name+"
");
        document.write("第一項愛好是："+obj.hobby);
    </script>
</head>
<body>
</body>>
</html>

結果：
輸出：名字是：123 第一項愛好是：567
(2)向JSON寫數據
對於JSON對象結構，要往JSON中增加一條數據，也是使用“.”操作符。
語法：

jsonObj.key = 值;
jsonObj["key"] = 值;

說明：
jsonObj指的是JSON對象，key指的是鍵名
例子

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"小名",
            "age":23,
             "hobby":"dance",
            }
        }
        obj.sex = "男";  //或者obj["sex"]="男";
        document.write("性別是："+obj.sex);
    </script>
</head>
<body>
</body>
</html>

結果：
輸出 性別是：男
(3)修改JSON中的數據
對於JSON對象結構，要修改JSON中的數據，也是使用“.”操作符。
語法：
jsonObj.key = 新值;
舉例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
         var obj =
        {
            "name":"小名",
            "sex":"男",
            "age":23,
            "hobby":"dance",
            }
        }
        obj.name = "小傑";  //或者obj["name"]="小傑";
        document.write("姓名是："+obj.name);
    </script>
</head>
<body>
</body>
</html>

輸出：姓名是：小傑
(4)刪除JSON中的數據
對於JSON對象結構，我們使用delete關鍵字來刪除JSON中的數據。
語法：
delete jsonObj.key;
舉例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
         var obj =
        {
            "name":"小名",
            "sex":"男",
            "age":23,
            "hobby":"dance",
            }
        }
        delete obj.age;
        if(obj.age==null)
        {
            alert("年齡項已經被刪除！");
        }
    </script>
</head>
<body>
</body>
</html>

(5)遍歷JSON對象
對於JSON對象結構，可以使用for…in…循環來遍歷JSON對象中的數據。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"小名",
            "age":23,
            "sex":"男",
        }
        for(var a in obj)
        {
            if(a=="name")
            {
                document.write("姓名是："+obj[a]);
            }
        }
    </script>
</head>
<body>
</body>
</html>

彈出 姓名是：小名
1)JSON數組結構
JSON數組結構是用中括號“[]”括起來，中括號內部由0個或多個以英文逗號“,”分隔的值列表組成。
語法：

[
    {
        "鍵名1":值1,
        "鍵名2":值2
    },
    {
        "鍵名3":值3,
        "鍵名4":值4
    },
    ……
]

說明：
arr指的是json數組。數組結構是以“[”開始，到“]”結束
注意，這里的鍵名是字符串，但是值可以是數值、字符串、對象、數組或邏輯true和false。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var arr =
        [
            {
                "name":"小光",
                "age":23,
                "sex":"男"
            },
            {
                "name":"小紅",
                "age":21,
                "sex":"女"
            }
        ]
        //讀取JSON數據
        document.write("第一個游客的名字是："+arr[0].name+"<br>");
        document.write("第二個游客的性別是："+arr[1].sex+"<br>");
    </script>
</head>
<body>
</body>
</html>

彈出 第一個游客的名字是：小光
第二個游客的性別是：女
3)json解析：將JSON字符串轉換為JSON對象
eval()和parse()方法
由於eval方法不會檢驗join的格式是否正確，會把里面的一些JS方法也一並執行，所以非常危險，例如容易被指向而惡意網站，
-----不建議使用
JSON.parse()較好，會解析出錯誤。

//例子：首先定義了JSON字符串jsondata
eval()方法：
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'；
var jsonobj=veal('('+jsondata+')');
alert(jsonobj.staff[0].name);
parse()方法：
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'；
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

都可以，若把age后的70改成alert（123）；若用eval()方法，發現頁面是先彈出123，再彈出洪七；也就是說用eval不僅解析了字符串，還執行了JS里的方法
用parse（）解析字符串，發現會拋出一個錯誤。
這說明用eval()不會看json是否合法，eval非常危險。所以盡量使用JSON.parse方法，來解析json里的字符串，而且還可以解析出json里的一些錯誤。
而JSON.parse在解釋JSON時會檢驗JOIN的格式，如果格式不對，會報錯，而且不會執行JSON里面的JS方法。我們平時應該多用JOSN.parse，少用eval方法。
案例：

var people = {
    "programmers": [{
        "firstName": "Brett",
        "lastName": "McLaughlin",
        "email": "aaaa"
    }, {
        "firstName": "Jason",
        "lastName": "Hunter",
        "email": "bbbb"
    }, {
        "firstName": "Elliotte",
        "lastName": "Harold",
        "email": "cccc"
    }],
    "authors": [{
        "firstName": "Isaac",
        "lastName": "Asimov",
        "genre": "sciencefiction"
    }, {
        "firstName": "Tad",
        "lastName": "Williams",
        "genre": "fantasy"
    }, {
        "firstName": "Frank",
        "lastName": "Peretti",
        "genre": "christianfiction"
    }],
    "musicians": [{
        "firstName": "Eric",
        "lastName": "Clapton",
        "instrument": "guitar"
    }, {
        "firstName": "Sergei",
        "lastName": "Rachmaninoff",
        "instrument": "piano"
    }]
};

要想訪問 programmers 列表的第一個條目的姓氏，只需在 JavaScript 中使用下面這樣的代碼：
people.programmers[0].lastName;
注意，數組索引是從零開始的。所以，這行代碼首先訪問 people變量中的數據；然后移動到稱為 programmers的條目，再移動到第一個記錄（[0]）；最后，訪問 lastName鍵的值。結果是字符串值 “McLaughlin”。

people.authors[1].genre  // Value is "fantasy"
people.musicians[3].lastName // Undefined. This refers to 
the fourth entry, and there isn't one
people.programmers[2].firstName // Value is "Elliotte"

利用這樣的語法，可以處理任何 JSON 格式的數據，而不需要使用任何額外的 JavaScript 工具包或 API。
資料：http://www.sojson.com/(在線檢驗JOSN語法是否正確)

參考資料：
Ajax全接觸：http://www.imooc.com/learn/250