Ajax基礎與Json應用(一）

時間 2019-12-11

標籤 ajax 基礎 json 應用欄目 Ajax 简体版

原文原文鏈接

一.Ajax概念

Ajax是異步的javacript和xml

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

二.同步與異步

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

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

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

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

三.XMLHttpRequest對象建立

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

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
java

五.xmlhttprequest發送請求

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

例子

setRequestHeader 必需要寫在 open（）和sent（）的中間，不然會出錯誤ajax

//完整的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.作一些事情，好比說獲取服務器響應的內容、頁面上的一些重現。
對服務器的相應進行監聽：chrome

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
三、打開chrome瀏覽器，輸入：localhost/根目錄/HTML文件名，若是能夠出現就說明運行本地服務器成功，譬如：
localhost/demo/index.html數據庫

七.簡單的ajax例子

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

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

解釋下：
(1)php是以<?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個或多個以英文逗號「,」分隔的值列表組成。
語法：
var arr = [ { "鍵名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