AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaWeb--快速入门JSON&Ajax

2022-05-22 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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");


2.4 使用场景


登录失败不跳转页面


注册实时提示用户名是否存在。


管理图片服务器，进行延时加载。

文章标签：
Java
JavaScript
C++
C语言
C#
Python
前端开发
数据格式
JSON
XML
关键词：
javaweb ajax
javaweb JSON
JSON Ajax
ajax.js JSON
JSON javaweb
小蜗牛耶
目录
相关文章
༺ཌༀൢ学海无涯ൢༀད༻
|
6月前
|
JSON 前端开发 JavaScript
Java的AJAX+JSON
Java的AJAX+JSON
༺ཌༀൢ学海无涯ൢༀད༻
60 0
童小纯
|
6月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解（学习总结---从入门到深化）
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解（学习总结---从入门到深化）
童小纯
149 1
程序员小海绵
|
2月前
|
JSON 前端开发 JavaScript
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
Filter过滤器、Listener监听器、AJAX、 同步、异步优点和使用场景、Axios异步框架、JSON、js和JSON转换、案例，Axios + JSON 品牌列表查询和添加
程序员小海绵
47 0
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
lvbb66
|
3月前
|
XML JSON 前端开发
JSON与AJAX：网页交互的利器
JSON与AJAX：网页交互的利器
lvbb66
37 0
Zh.晨光
|
6月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时，控制台提示“XML 解析错误：格式不佳”。
在火狐浏览器调ajax获取json数据时，控制台提示“XML 解析错误：格式不佳”。
Zh.晨光
77 0
在火狐浏览器调ajax获取json数据时，控制台提示“XML 解析错误：格式不佳”。
小鼠米奇
|
5月前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
小鼠米奇
31 0
宁波阿成.
|
6月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
宁波阿成.
56 1
咕噜咕噜wy
|
6月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
咕噜咕噜wy
49 0
白砂糖与香辛料`
|
6月前
|
XML JSON 前端开发
JSON和AJAX
JSON和AJAX
白砂糖与香辛料`
42 0
白砂糖与香辛料`
|
6月前
|
XML JSON 前端开发
JSON与AJAX
JSON与AJAX
白砂糖与香辛料`
39 0