天天看點
傳回

Ajax接收json響應

  • json？
  •  Json和xml比較
  •  Ajax如何使用JSON
  •  Ajax接收json響應案例

什麼是json？

JSON (JavaScript Object Notation) 是一種輕量級的資料交換格式，易于人閱讀和編寫，同時也易于機器解析和生成，而且它是基于JavaScript 的，這樣就不需要單獨的工具去解析。JSON本質上來說就是字元串，隻不過有格式要求。

JSON有兩種結構：

  •  “名/值”對的集合（A collection of name/value pairs）。在不同的語言中，它被了解為對象，結構，關聯數組等 。

對象是一個無序的“名/值”對集合。一個對象以“{”開始，“}”結束。每個“名稱”後跟一個“:” ；“名/值”對之間使用“,” 分隔：

Ajax接收json響應

如：{ "firstName": "Brett", "lastName":"McLaughlin", "email":"[email protected]" }

  •  值的有序清單（An ordered list of values）。在大部分語言中，它被了解為數組

數組是值（value）的有序集合。一個數組以“[”開始，“]”結束。值之間使用“,”分隔：

Ajax接收json響應

Json和xml比較

  •  可讀性

JSON和XML的可讀性可謂不相上下，XML略占上風。

  •  可擴充性

XML天生有很好的擴充性，JSON當然也有，沒有什麼是XML能擴充，JSON不能的。

  •  編碼難度

XML有豐富的編碼工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的編碼明顯比XML容易許多，即使不借助工具也能寫出JSON的代碼，可是要寫好XML就不太容易了。

  •  解碼難度

XML的解析得考慮子節點父節點關系，讓人頭昏眼花，而JSON的解析難度幾乎為零。JSON是JavaScript原生格式，這意味着在JavaScript中處理JSON資料不需要任何特殊的 API 或工具包。

  •  流行度

XML已經被業界廣泛的使用，而JSON也開始嶄露頭角，在Ajax領域，JSON憑借自身的優勢将取代XML。

Ajax如何使用JSON

1. 伺服器端傳回JSON相應的文本表示，如：

{“city” : “Hefei”, “province” : “Anhui”}

2. 用戶端使用eval()函數将JSON文本轉化為JavaScript對象：

Ajax接收json響應

注意，使用額外的圓括号可使eval()函數将來源輸入無條件地視為表達式進行解析。

3. 然後從JavaScript對象中取得相應的值：

Ajax接收json響應

Bean轉Json

User u = new User();

u.setAge(22);

u.setUsername("hzucmj");

u.setEnabled(true);

JSONObject json = JSONObject.fromObject(u);

System.out.println(json.toString());

//結果為：{"enabled":true,"username":"hzucmj","age":22}

List轉Json

User u1 = new User();

u1.setAge(22);

u1.setUsername("hzucmj");

u1.setEnabled(true);

User u2 = new User();

u2.setAge(20);

u2.setUsername("ctf");

u2.setEnabled(true);

List<Object> list = new ArrayList<Object>();

list.add(u1);

list.add(u2);

JSONArray json = JSONArray.fromObject(list);

System.out.println(json.toString());

//結果為：[{"enabled":false,"username":"ctf","age":20},{"enabled":false,"username":"","age":0}]

Map轉Json

HashMap<String, Comparable> map = new HashMap<String, Comparable>();

map.put("name", "hzucmj");

map.put("age", 22);

JSONObject json = JSONObject.fromObject(map);

System.out.println(json.toString());

//結果為：{"name":"hzucmj","age":22}

Ajax接收json響應案例

需求：

使用ajax和json技術實作以下功能，通過改變下拉框值修改下面表格中的資訊。

Ajax接收json響應

所必須的包有：

  •  commons-lang-2.4.jar
  •  commons-logging-1.1.1.jar
  •  json-lib-2.4-jdk15.jar
  •  ezmorph-1.0.6.jar
  •  commons-collections-3.2.1.jar
  • commons-beanutils-1.8.0.jar

jar包網盤分享位址：http://pan.baidu.com/s/1gfOs4Kj

顯示頁面

viewBook.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> 使用JSON響應 </title>
    <style type="text/css">
        select {
            width:160px;
            font-size:11pt;
        }
    </style>
</head>
<body>
<select name="category" id="category" onchange="change(this.value);" >
    <option value="1" selected="selected">程式設計類</option>
    <option value="2">小說類</option>
    <option value="3">哲學類</option>
</select>
<table border="1" style="border-collapse:collapse;width:600px;margin-top:20px;">
        <thead>
            <tr>
                <th>ID</th>
                <th>書名</th>
                <th>作者</th>
                <th>價格</th>
            </tr>
        </thead>
        <tbody id="book"></tbody>
</table>
<script type="text/javascript">
    // 定義了XMLHttpRequest對象
    var xmlrequest;
    // 完成XMLHttpRequest對象的初始化
    function createXMLHttpRequest(){
        if(window.XMLHttpRequest){ 
            // DOM 2浏覽器
            xmlrequest = new XMLHttpRequest();
        }else if (window.ActiveXObject){
            // IE浏覽器
            try{
                xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                try{
                    xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e){}
            }
        }
    }
    // 事件處理函數，當下拉清單選擇改變時，觸發該事件
    function change(id){
        // 初始化XMLHttpRequest對象
        createXMLHttpRequest();
        // 設定請求響應的URL
        var uri = "../jsp/ChooseBook.jsp"
        // 設定處理響應的回調函數
        xmlrequest.onreadystatechange = processResponse;
        // 設定以POST方式發送請求，并打開連接配接
        xmlrequest.open("POST", uri, true); 
        // 設定POST請求的請求頭
        xmlrequest.setRequestHeader("Content-Type"
            , "application/x-www-form-urlencoded");
        // 發送請求
        xmlrequest.send("id="+id);
    }
    // 定義處理響應的回調函數
    function processResponse(){
        // 響應完成且響應正常
        if (xmlrequest.readyState == 4){
            if (xmlrequest.status == 200){
                var bookTb = document.getElementById("book");
                // 删除bookTb原有的所有行
                while(bookTb.rows.length > 0){
                    bookTb.deleteRow(bookTb.rows.length - 1);
                }
                // 擷取伺服器的JSON響應
                // 并調用eval()函數将伺服器響應解析成JavaScript數組
                var books = eval(xmlrequest.responseText);
                // 周遊數組，每個數組元素生成一個表格行
                for (var i = 0 , len = books.length ; i < len ; i++){
                    var tr = bookTb.insertRow(i);
                    // 依次建立4個單元格，并為單元格設定内容
                    var cell0 = tr.insertCell(0);
                    cell0.innerHTML = books[i].id;
                    var cell1 = tr.insertCell(1);
                    cell1.innerHTML = books[i].name;
                    var cell2 = tr.insertCell(2);
                    cell2.innerHTML = books[i].author;
                    var cell3 = tr.insertCell(3);
                    cell3.innerHTML = books[i].price;
                }
            }else{
                //頁面不正常
                window.alert("您所請求的頁面有異常。");
            }
        }
    }
    //指定頁面加載完成後指定change()函數
    document.body.onload = change(document.getElementById("category").value);
    </script>
</body>
</html>

控制器

ChooseBook.jsp

<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ page import="java.util.*,net.sf.json.JSONArray,com.inspur.pojo.*,com.inspur.service.*" %>
<%
　　String idStr = (String)request.getParameter("id");
　　int id = idStr == null ? 1 : Integer.parseInt(idStr);
　　List<Book> books = new BookService().getBookByCategory(id);
　　response.setContentType("text/html;charset=UTF-8");
　　out.println(JSONArray.fromObject(books));
%>

Javabean類

Book.java

public class Book{
    private Integer id;
    private String name;
    private String author;
    private double price;
    // 無參數的構造器
    public Book(){
    }
    // 初始化全部成員變量的構造器
    public Book(Integer id , String name
        , String author , double price){
        this.id = id;
        this.name = name;
        this.author = author;
        this.price = price;
    }
    //省略get/set方法
}

服務類，資料庫模拟

BookService.java

public class BookService {
    // 模拟記憶體中資料庫
    static Map<Integer , List<Book>> bookDb = new HashMap<Integer , List<Book>>();
    static {
        // 初始化bookDb對象
        List<Book> list1 = new ArrayList<Book>();
        List<Book> list2 = new ArrayList<Book>();
        List<Book> list3 = new ArrayList<Book>();
        list1.add(new Book(1 , "瘋狂Java講義" , "李剛" , 109));
        list1.add(new Book(2 , "輕量級Java EE企業應用實戰" , "李剛" , 99));
        list1.add(new Book(3 , "瘋狂Android講義" , "李剛" , 89));
        list2.add(new Book(4 , "西遊記" , "吳承恩" , 23));
        list2.add(new Book(5 , "水浒" , "施耐庵" , 20));
        list3.add(new Book(6 , "烏合之衆" , "古斯塔夫.勒龐" , 16));
        list3.add(new Book(7 , "不合時宜的考察" , "尼采" , 18));
        bookDb.put(1 , list1);
        bookDb.put(2 , list2);
        bookDb.put(3 , list3);
    }
    public List<Book> getBookByCategory(int categoryId) {
        return bookDb.get(categoryId);
    }
}

其中控制器ChooseBook.jsp可以用servlet代替：

public class ChooseBookServlet extends HttpServlet {
    public void service(HttpServletRequest request , HttpServletResponse response)
        throws IOException , ServletException {
        String idStr = (String)request.getParameter("id");
        int id = idStr == null ? 1 : Integer.parseInt(idStr);
        List<Book> books = new BookService().getBookByCategory(id);
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.println(JSONArray.fromObject(books));
    }
}

注意：servlet需要在web.xml中配置

<servlet>
　　<servlet-name>LoginServlet</servlet-name>
　　<servlet-class>org.crazyit.ajax.web.ChooseBookServlet</servlet-class>
</servlet>    
<servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/chooseBook</url-pattern>
</servlet-mapping>
上一篇: 轉換全半角字元的函數
下一篇: 電子計算機的運算極限,經典電子計算機的極限..doc