zoukankan      html  css  js  c++  java
  • ajax接收json

    什么是json

    l Jsonxml比较

    l Ajax如何使用JSON

    l Ajax接收json响应案例

    什么是json

    JSON (JavaScript Object Notation) 一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,而且它是基于JavaScript ,这样就不需要单独的工具去解析。JSON本质上来说就是字符串,只不过有格式要求。

    JSON有两种结构:

    u “/”对的集合(A collection of name/value pairs)。在不同的语言中,它被理解为对象,结构,关联数组等 。

    对象是一个无序的“名/”对集合。一个对象以“{”开始,“}”结束。每个“名称”后跟一个“:” /”对之间使用“,” 分隔:

    如:{ "firstName": "Brett", "lastName":"McLaughlin", "email":"brett@newInstance.com" }

    u 值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组

    数组是值(value)的有序集合。一个数组以“[”开始,“]”结束。值之间使用“,”分隔:

    Jsonxml比较

    l 可读性

    JSON和XML的可读性可谓不相上下,XML略占上风。

    l 可扩展性

    XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。

    l 编码难度

    XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。

    l 解码难度

    XML的解析得考虑子节点父节点关系,让人头昏眼花,而JSON的解析难度几乎为零。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的 API 或工具包。

    l 流行度

    XML已经被业界广泛的使用,而JSON也开始崭露头角,在Ajax领域,JSON凭借自身的优势将取代XML。

    Ajax如何使用JSON

    1. 服务器端返回JSON相应的文本表示,如:

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

    1. 客户端使用eval()函数将JSON文本转化为JavaScript对象:

    注意,使用额外的圆括号可使eval()函数将来源输入无条件地视为表达式进行解析。

    1. 然后从JavaScript对象中取得相应的值:

    BeanJson

    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}

    ListJson

    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}]

    MapJson

    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响应案例

    需求:

    使用ajaxjson技术实现以下功能,通过改变下拉框值修改下面表格中的信息。

    所必须的包有:

    u commons-httpclient-3.1.jar

    u commons-lang-2.4.jar

    u commons-logging-1.1.1.jar

    u json-lib-2.4-jdk15.jar

    u ezmorph-1.0.6.jar

    u commons-collections-3.2.1.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 {

    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;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/second3.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>

  • 相关阅读:
    逆向路由器固件之敏感信息泄露 Part2
    隐匿在iOS文件系统中的隐私信息
    使用Arduino模块实施无线信号的重放攻击
    逆向路由器固件之解包 Part1
    maven 多模块项目
    java中Map,List与Set的区别(转)
    mysql-开启慢查询&所有操作记录日志
    maven阿里云中央仓库
    yii2 RESTful api的详细使用
    Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试 (转)
  • 原文地址:https://www.cnblogs.com/excellencesy/p/7873383.html
Copyright © 2011-2022 走看看