开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaWeb--快速入门JSON&Ajax -> 正文阅读

[JavaScript知识库]JavaWeb--快速入门JSON&Ajax

一、JSON

1.1 什么是JSON

JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。==易于人阅读和编写。同时也易于机器解析和生成。==它基于JavaScript Programming Language,Standard ECMA-262 3rd Edition - December 1999的一个子集。

? JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯〈包括C，C++，C#，Java,JavaScript，Perl，Python等）。这些特性使JSON成为理想的数据交换语言。

1.2 JSON对象定义和基本使用

在标准的json格式中，json对象由在括号括起来，对象中的属性也就是json的 key是一个字符串，所以一定要使用双引号引起来。每组 key之间使用逗号进行分隔。

1.2.1、JSON的定义

// json的定义
var jsonObj = {
   "key1":12,
   "key2":"abc",
   "key3":true,
   "key4":[11,"arr",false],
   "key5":{
      "key5_1" : 551,
      "key5_2" : "key5_2_value"
   },
   "key6":[{
      "key6_1_1":6611,
      "key6_1_2":"key6_1_2_value"
   },{
      "key6_2_1":6621,
      "key6_2_2":"key6_2_2_value"
   }]
};

1.2.2、JSON对象的访问

//访问JSON的属性
alert(jsonObj.key1); //12
alert(jsonObj.key2); // abc
alert(jsonObj.key3); // true
alert(jsonObj.key4);// 得到数组[11,"arr",false]
// json 中 数组值的遍历
for(var i = 0; i < jsonObj.key4.length; i++) {
    alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key5.key5_2);//key5_2_value
alert( jsonObj.key6 );// 得到json数组

就和普通的创建对象然后调用属性一样的方式

1.3 JSON中两个常用的方法

JSON对象和字符串对象的互转

JSON.stringify( json ); 此方法可以把一个json对象转换成为json字符串

JSON.parse( json string ); 此方法可以把一个json字符串转换成为json对象

// 把json对象转换成为 json字符串
var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toString
alert(jsonObjString)
// 把json字符串。转换成为json对象
var jsonObj2 = JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc

1.4 JSON在java中的使用

? 我们要使用json和java中使用，我们需要使用到一个第三方的包。它就是gson.jar

? Gson是 Google 提供的用来在Java对象和JSON 数据之间进行映射的Java类库。可以将一个JSON 字符串转成一个Java 对象，或者反过来。

json 在 java 中的操作。常见的有三种情况。

1、java 对象和 json 的转换

2、java 对象 list 集合和 json 的转换

3、map 对象和 json 的转换

package com.atguigu.json;

import com.atguigu.pojo.Person;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import org.testng.annotations.Test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JsonTest {

//    1.2.1、javaBean和json的互转
    @Test
    public void test1(){
        Person person = new Person(1,"pyy好帅!");
        // 创建Gson对象实例
        Gson gson = new Gson();
        // toJson方法可以把java对象转换成为json字符串
        String personJsonString = gson.toJson(person);
        System.out.println(personJsonString);
        // fromJson把json字符串转换回Java对象
        // 第一个参数是json字符串
        // 第二个参数是转换回去的Java对象类型
        Person person1 = gson.fromJson(personJsonString, Person.class);
        System.out.println(person1);
    }

//    1.2.2、List 和json的互转
    @Test
    public void test2() {
        List<Person> personList = new ArrayList<>();

        personList.add(new Person(1, "lbj"));
        personList.add(new Person(2, "curry"));

        Gson gson = new Gson();

        // 把List转换为json字符串
        String personListJsonString = gson.toJson(personList);
        System.out.println(personListJsonString);

        List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
        System.out.println(list);
        Person person = list.get(0);
        System.out.println(person);
    }

//    1.2.3、map 和json的互转
    @Test
    public void test3(){
        Map<Integer,Person> personMap = new HashMap<>();

        personMap.put(1, new Person(1, "kb"));
        personMap.put(2, new Person(2, "mady"));

        Gson gson = new Gson();
        // 把 map 集合转换成为 json字符串
        String personMapJsonString = gson.toJson(personMap);
        System.out.println(personMapJsonString);

//        Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType());
        Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());

        System.out.println(personMap2);
        Person p = personMap2.get(1);
        System.out.println(p);

    }
}

二、Ajax

2.1 什么是Ajax?

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。
ajax是一种浏览器异步发起请求。局部更新页面的技术。

什么是异步？

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。（当然，在其他语境下这个解释可能就不对了）

这个很重要，如果不是这样的话，我们点完按钮，页面就会死在那里，其他的数据请求不会往下走了。这样比等待刷新似乎更加讨厌。

（虽然提供异步通讯功能的组件默认情况下都是异步的，但它们也提供了同步选项，如果你好奇把那个选项改为false的话，你的页面就会死在那里）

通俗的理解

如你刚开始学习网页制做，一个页面一个页面的转跳，开新窗口，输入，关闭，原窗口要手动或自动的刷新。相比现在流行的网页很low是不是。

现在我写个回答，发布，页面不用完全刷新，直接加在页面下方，是不是感觉体验好了些？

ajax，异步javascript和xml，就是不关闭不转跳不刷新的情况下，在网页后台提交数据，部分更新页面内容，将网页的用户体验提升到接近原生程序的地步。

原生的Ajax请求

? 1、我们首先要创建XMLHttpRequest 对象

? 2、调用open方法设置请求参数

? 3、调用send方法发送请求

? 4、在send方法前绑定onreadystatechange 事件，处理请求完成后的操作。

创建一个html页面，发起请求

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="pragma" content="no-cache" />
      <meta http-equiv="cache-control" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Insert title here</title>
      <script type="text/javascript">
         // 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
         function ajaxRequest() {
//              1、我们首先要创建XMLHttpRequest 
            var xmlhttprequest = new XMLHttpRequest();
//              2、调用open方法设置请求参数
            xmlhttprequest.open("GET","http://localhost:8080/Day11_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
//              4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            xmlhttprequest.onreadystatechange = function(){
               if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                  alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
                  var jsonObj = JSON.parse(xmlhttprequest.responseText);
                  // 把响应的数据显示在页面上
                  document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
               }
            }
//              3、调用send方法发送请求
            xmlhttprequest.send();


            alert("我是最后一行的代码");

         }
      </script>
   </head>
   <body>
<!--      <a href="http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax">非Ajax</a>-->
      <button onclick="ajaxRequest()">ajax request</button>
      <button onclick="ajaxRequest()">ajax request</button>
      <button onclick="ajaxRequest()">ajax request</button>
      <button onclick="ajaxRequest()">ajax request</button>
      <button onclick="ajaxRequest()">ajax request</button>
      <div id="div01">
      </div>
      <table border="1">
         <tr>
            <td>1.1</td>
            <td>1.2</td>
         </tr>
         <tr>
            <td>2.1</td>
            <td>2.2</td>
         </tr>
      </table>
   </body>
</html>

创建一个AjaxServlet程序接受请求

package com.atguigu.servlet;

import com.atguigu.pojo.Person;
import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求过来了");
        Person person = new Person(1, "curry");
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryAjax == 方法调用了");
        Person person = new Person(1, "curry");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryGet  == 方法调用了");
        Person person = new Person(1, "curry");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryPost   == 方法调用了");
        Person person = new Person(1, "curry");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }


    protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryGetJSON   == 方法调用了");
        Person person = new Person(1, "curry");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQuerySerialize   == 方法调用了");

        System.out.println("用户名：" + req.getParameter("username"));
        System.out.println("密码：" + req.getParameter("password"));

        Person person = new Person(1, "curry");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }
}

2.3 JQuery的Ajax请求

编写原生的JavaScript要写很多的代码。所以使用起来非常的不方便，我们一般会使用JavaScript 的框架来解决这个问题比如Jquery框架

四个Ajax请求方法

$.ajax方法

$.get方法

$.post方法

$.getJSON方法

一个表单序列化方法: serialize()表单序列化方法

如何使用上面的几个方法？

JQuery中和 Ajax请求有关的方法有四个;

$.ajax请求参数

url: 请求的地址

type : 请求的方式 get或 post

data : 请求的参数 string 或json

success: 成功的回调函数

dataType: 返回的数据类型常用json或 text

Jquery AjAx写法

$.ajax({

        url:"servlet",

        type:"post",//get

        data:{},

        async:true,

        cache:true,

        complete:function(){},

        traditional:false,

        dataType:"json",

        success:function(data){},

        error:function(){}

     }); 

 $.post("servlet",{},function(data){},"json");

 $.get("servlet",function(data){},"json");