二十二、Ajax&Json

其他 2020-04-07 08:49:33 阅读次数: 0

AJAX

2、AJAX概念

1. 概念： ASynchronous JavaScript And XML	异步的JavaScript 和 XML
	1. 异步和同步：客户端和服务器端相互通信的基础上
		* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
		* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

		Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 
		通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
		传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

		提升用户的体验

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

比如，浏览器已经加载了1个页面，然后浏览器再一次请求，想请求并更新这个页面的某个部分。同步技术是重新请求服务器并加载整个页面，而异步只需要更新指定的某个部分就可以了。

Ajax执行原理理解：

在这里插入图片描述

浏览器在发送请求的时候，服务器会获取请求并执行业务逻辑，但是执行业务逻辑的过程中是要消耗时间的，如果是同步的话，点击发送请求按钮，想向输入框输入文字， 必须要等浏览器的响应才能操作。
而异步，不需要等待服务器执行业务逻辑后响应，它可以在服务器操作的过程中对浏览器页面进行操作。即，点击发送请求按钮，在服务器执行代码的同时，浏览器可以在输入框输入文字。

可以这么理解，使用异步请求是请求页面的部分数据，并更新页面部分指定的数据，不需要重新加载整个页面。
在这里插入图片描述

实现方式：

  1. 实现方式：
    1. 原生的JS实现方式（了解）
  2. JQeury实现方式
    1. $.ajax()
    2. $.get()：发送get请求
    3. $.post()：发送post请求

4、AJAX实现——原生JS方式（了解）

1. 原生的JS实现方式（了解）

（固定写法）代码演示：

 //定义方法
        function  fun() {
            //发送异步请求
            //1.创建核心对象【判断是什么浏览器版本，并根据不同方式创建对象】
            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");
            }

            //2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                        * get方式，请求参数在URL后边拼接。send方法为空参
                        * post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或 false（同步）

             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);

            //3.发送请求
            xmlhttp.send();

            //4.接受并处理来自服务器的响应结果 （获取方式 ：xmlhttp.responseText）
            
            //什么时候获取？当服务器响应成功后再获取

            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
            xmlhttp.onreadystatechange=function()
            {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                   //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }

        }

5、AJAX实现——JQuery方式：ajax（）

			* 参数：
				* url：请求路径
				* data：请求参数
				* type: 请求方式
				* callback：回调函数（函数可传入参数，参数是服务器响应的数据）
				* datatype：响应结果的类型(contentType)

contentType: 告诉服务器，我要发什么类型的数据
dataType：告诉服务器，我要想什么类型的数据，如果没有指定，那么会自动推断是返回 XML，还是JSON，还是script，还是String。

1. $.ajax()
			* 语法：$.ajax({键值对});
			 //使用$.ajax()发送异步请求
	            $.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数（方式1）
	                data:{"username":"jack","age":23},	（方式2）
	                success:function (data) {		（success函数名）
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误，会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });

代码演示：


<script>
        
        //定义方法
        function  fun() {
            //使用$.ajax()发送异步请求

            $.ajax({
                url:"ajaxServlet1111" , // 请求路径
                type:"POST" , //请求方式
                //data: "username=jack&age=23",//请求参数（方式1）
                data:{"username":"jack","age":23},（方式2）
                success:function (data) {	（success函数名）
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数

                dataType:"text"//设置接受到的响应数据的格式
            });
        }
        
    </script>

date是自定义参数：表示【服务器的响应返回的结果】

7、AJAX实现——JQuery方式：get（）&post（）

2. $.get()：发送get请求
			* 语法：$.get(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数（函数可传入参数，参数是服务器响应的数据）
					* type：响应结果的类型
3. $.post()：发送post请求
			* 语法：$.post(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数（函数可传入参数，参数是服务器响应的数据）
					* type：响应结果的类型

$.get()：发送get请求

    <script>
        
        //定义方法
        function  fun() {

            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }
        
    </script>

$.post()：发送post请求

<script>
        
        //定义方法
        function  fun() {

            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }
        
    </script>

(url, [data], [callback], [type])中urlv必须，其他可选。（一般"[ ]"代表可选的意思）

Json

8、Json概念

1. 概念： JavaScript Object Notation		JavaScript对象表示法

Java将零散的数据封装成对象：
	Person p = new Person();
	p.setName("张三");
	p.setAge(23);
	p.setGender("男");
	
Json将零散的数据封装成对象：
	var p = {"name":"张三","age":23,"gender":"男"};

	* json现在多用于存储和交换文本信息的语法
	* 【进行数据的传输】
	* JSON 比 XML 更小、更快，更易解析。

将零散的数据封装成对象。

8、Json语法——定义

	1. 基本规则
		* 数据在名称/值对中：json数据是由键值对构成的
			* 键用引号(单双都行)引起来，也可以不使用引号
			* 值的取值类型：
				1. 数字（整数或浮点数）
				2. 字符串（在双引号中）
				3. 逻辑值（true 或 false）
				4. 数组（在方括号中）	{"persons":[{},{}]}
				5. 对象（在花括号中） {"address":{"province"："陕西"....}}
				6. null
		* 数据由逗号分隔：多个键值对由逗号分隔
		* 花括号保存对象：使用{}定义json 格式
		* 方括号保存数组：[]

代码演示：

<script>
        //1.定义基本格式
【persons对象】 var person = {"name": "张三", age: 23, 'gender': true};
        alert(person);  //object

        //2.嵌套格式   {}———> []
【persons对象】 var persons = {
            "persons": [
                {"name": "张三", "age": 23, "gender": true},
                {"name": "李四", "age": 24, "gender": true},
                {"name": "王五", "age": 25, "gender": false}
                ]
        };
        alert(persons);//object

        //2.嵌套格式   []———> {}
【ps数组】  var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];
        alert(ps);


    </script>

1、基本格式：

一个Json对象有多个键值对：{键1：“值1”，键2：“值2”，键3：“值3”}

2、嵌套格式1：

一个Json对象里有一个键为json对象类型的数据，这个键对应的值是数组，这个数组有3个元素：{对象：[键值对1，键值对2，键值对3]}

3、嵌套格式2：

一个数组有多个json对象的键值对.[{键值对1}，{键值对2}，{键值对3}]
每一个json对象相当于数组的每一个元素

9、Json语法——值的获取

2. 获取数据:
		1. json对象.键名
		2. json对象["键名"]
		3. 数组对象[索引]
		4. 遍历

代码演示：

 <script>
        //1.定义基本格式
        var person = {"name": "张三", age: 23, 'gender': true};

        var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];




        //获取person对象中所有的键和值
        //for in 循环
        for(var key in person){
            //这样的方式获取不行。因为相当于  person."name"
            //alert(key + ":" + person.key);
            alert(key+":"+person[key]);
        }

       //获取ps中的所有键与值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for(var key in p){
                alert(key+":"+p[key]);
            }
        }

    </script>

1、获取Json对象的键对值：

		for(var key in person){
            //这样的方式获取不行。因为相当于  person."name"
            alert(key+":"+person[key]);
        }

这个key相当于获取person对象的每一个键，key获取的是字符串

2、获取数组对象的键对值

  //获取ps中的所有键与值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];	//获取每一个数组里的json对象
            for(var key in p){
                alert(key+":"+p[key]);
            }
        }

首先，ps是一个数组，所以我们先遍历数组，获取每一元素{xxx}。
每一个元素就是json对象，即person对象，然后再用第一种的方式（遍历json对象的方式）进行遍历。

Json解析器

3. JSON数据和Java对象的相互转换

	* JSON解析器：
		* 常见的解析器：Jsonlib，Gson，fastjson，jackson
	
	1. JSON转为Java对象
		1. 导入jackson的相关jar包
		2. 创建Jackson核心对象 ObjectMapper
		3. 调用ObjectMapper的相关方法进行转换
			1. readValue(json字符串数据,Class)
	2. Java对象转换JSON
		1. 使用步骤：
			1. 导入jackson的相关jar包
			2. 创建Jackson核心对象 ObjectMapper
			3. 调用ObjectMapper的相关方法进行转换
				1. 转换方法：
					* writeValue(参数1，obj):
	                    参数1：
	                        File：将obj对象转换为JSON字符串，并保存到指定的文件中
	                        Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
	                        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
	                * writeValueAsString(obj):将对象转为json字符串

				2. 注解：
					1. @JsonIgnore：排除属性。
					2. @JsonFormat：属性值得格式化
						* @JsonFormat(pattern = "yyyy-MM-dd")

				3. 复杂java对象转换
					1. List：数组
					2. Map：对象格式一致

11、Java对象转Json字符串

在这里插入图片描述

  • 1、客户端与浏览器进行通信的时候，浏览器会把Json作为数据交互的载体，发送给服务器，（Json在服务器中，可以转换为Java对象；当然Java对象也可以转换Json<字符串>。），服务器再把json响应给客户端（记得转换MIME类型）。
    所以客户端与服务器通信有2个转换过程： 客户端发送Json，Json转Java对象，Java对象转Json，服务器再响应给客户端。
  • 还有一种情况。
  • 2、客户端Ajax请求服务器，服务器把Java对象or集合转成Json类型，再响应给服务器，客户端的异步的回调函数参数就是Json对象，即，服务器响应的数据。

Ajax&Json是前后端分离的使用，此时的页面是html，不再是JSP。
JSP是利用Servlet的request对象的共享数据，或者，responce对象响应数据来和客户端进行数据的交互。
Ajax请求可以指定请求参数和参数值向服务器请求资源，回调函数中的参数是服务器响应的数据，即Json对象。

	Java对象转换JSON
		1. 使用步骤：
			1. 导入jackson的相关jar包
			2. 创建Jackson核心对象 ObjectMapper
			3. 调用ObjectMapper的相关方法进行转换
			4. 1. 转换方法：
					* writeValue(参数1，obj):
	                    参数1：
	                        File：将obj对象转换为JSON字符串，并保存到指定的文件中
	                        Writer：将obj对象转换为JSON字符串，并将json数据填充到【字符】输出流中
	                        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到【字节】输出流中
	                * writeValueAsString(obj):将对象转为json字符串

省略：person类

单元测试类：

    //Java对象转为JSON字符串
    @Test
    public void test1() throws Exception {
        //1.创建Person对象
        Person p  = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");

        //2.创建Jackson的核心对象  ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3.转换

		//3.1、writeValueAsString(obj):将对象转为json字符串
        String json = mapper.writeValueAsString(p);
        //{"name":"张三","age":23,"gender":"男"}
        //System.out.println(json);//{"name":"张三","age":23,"gender":"男"}


        //3.2、writeValue，将数据写到d://a.txt文件中
        //mapper.writeValue(new File("d://a.txt"),p);

        //3.3、writeValue.将数据关联到Writer中
        mapper.writeValue(new FileWriter("d://b.txt"),p);//也可以是字节流（输出写入文件）
    }

12、Java对象转Json字符串——注解

			2. 注解：
					1. @JsonIgnore：排除属性。【Java转Json时，不转某个属性】
					2. @JsonFormat：属性值得格式化	【转换某个属性的值格式】
						* @JsonFormat(pattern = "yyyy-MM-dd")

代码演示：

Person类

public class Person {

    private String name;
    private int age ;
    private String gender;
    private Date birthday;

测试类


    @Test
    public void test2() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());



        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(p);

        System.out.println(json);

输出：

{"name":"张三","age":23,"gender":"男","birthday":1530958029263}

你看这个birthday的格式转换成Json是毫秒值的了，我们不愿意看到这种情况，因为毫秒值看不懂。
所以，我们有2种解决方案：
1、Java对象转Json时，不要这个属性和属性值
怎么做？
在Person对象的指定成员变量上加@JsonIgnore注解

	@JsonIgnore // 忽略该属性
    private Date birthday;

输出：

{"name":"张三","age":23,"gender":"男"}

2、把birthday转成其他格式

    @JsonFormat(pattern = "yyyy-MM-dd")		//4个年2个月2个日
    private Date birthday;

输出：

{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}

pattern是什么？
是一个属性格式化的格式要求。

13、Java对象转Json字符串——List&Map

			3. 复杂java对象转换
				1. List：数组
				2. Map：对象格式一致

List代码演示：

    @Test
    public void test3() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(23);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(23);
        p2.setGender("男");
        p2.setBirthday(new Date());


        //创建List集合
        List<Person> ps = new ArrayList<Person>();
        ps.add(p);
        ps.add(p1);
        ps.add(p2);


        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);
        
        System.out.println(json);

输出：
3个对象装进List集合中：

  • [{},{},{}]
 [{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]

Map代码演示：


    @Test
    public void test4() throws Exception {
        //1.创建map对象
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("name","张三");
        map.put("age",23);
        map.put("gender","男");


        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        
        System.out.println(json);
    }

输出：
跟Json对象一样的格式。

{"name":"张三","age":23,"gender":"男"}

Json字符串转Java对象

1. JSON转为Java对象
		1. 导入jackson的相关jar包
		2. 创建Jackson核心对象 ObjectMapper
		3. 调用ObjectMapper的相关方法进行转换
			1. readValue(json字符串数据,Class) //你要转换的类型的class字节码文件

代码演示：

  //演示 JSON字符串转为Java对象
    @Test
    public void test5() throws Exception {
       //1.初始化JSON字符串
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";

        //2.创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //3.转换为Java对象 Person对象
        Person person = mapper.readValue(json, Person.class);

        System.out.println(person);
    }

输出：
在这里插入图片描述

案例：校验用户是否存在

	* 校验用户名是否存在
		1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
			1. $.get(type):将最后一个参数type指定为"json"
			2. 在服务器端设置MIME类型
				response.setContentType("application/json;charset=utf-8");

JQ代码演示：

   <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //页面加载完成，输入框绑定失去焦点的事件
        $(function () {
            //绑定事件
            $("#username").blur(function () {
                //获取username输入框的值
                var username_value = $(this).val(); //这个this是Js特有的，这个this代表事件源对象，即被触发事件的组件。$(JS对象)=JQ对象
                //发送ajax请求
                $.get("FindUserServlet",{username,username_value},function (date) {
                    //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                    //                         {"userExsit":false,"msg":"用户名可用"}

                    //判断userExsit键的值是true/false
                    var span = $("#s_username");
                    if (date.userExsit){//date是服务器响应给客户端的数据，它是一个对象，像JS的var responseText（看JS的异步请求源码）
                        //true，用户存在
                        //显示服务器响应的数据
                        span.css("color","red")//设置文字样式
                        span.html(date.msg);
                    }else {
                        //false，用户不存在
                        span.css("color","green")
                        span.html(date.msg);
                    }
                },"json")
            })
        })
    </script>
</head>
<body>
    <from>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span>
        <br>
        <input type="password" id="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" id="regist">
    </from>
</body>

JQ代码中注意:

  • $(this)

this是JS的对象，这个this代表事件源对象。$(this)=JQ对象

  • $.get(“FindUserServlet”,{username,username_value},function (date){} ,“json”)中的date和“json”
  • data是调用回调函数传入的对象，这个对象是服务器响应返回的结果，注意它是一个对象。（可以看JS原生方式的异步源码）
  • “json”：
    首先，服务器把Java对象or集合转换成json，但是注意！这个json是字符串，不是真正的json，他只是json的字符串形式，要像获取服务器响应的数据，必须这样操作来设置字符串为json格式。（当然还有一种方法在Servlet中设置响应格式。方式二选一）

Servlet代码演示：

@WebServlet("/FindUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求参数
        String username = request.getParameter("username");
                        //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                        //                         {"userExsit":false,"msg":"用户名可用"}

        //调用service来查询username是否存在（这里本来是跟数据库连接的，为了简单把数据写死）
                    //设置json响应格式和编码
        response.setContentType("application/json;charset=utf-8");

        Map<String,Object> map = new HashMap<>();   //此处是像把Map集合转换成Json字符串，也可以使用对象。但是为了方便就...
        if ("tom".equals(username)){
            //存在
           map.put("userExsit",true);
           map.put("msg","此用户名太受欢迎,请更换一个");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }

        //将Map集合转换成json字符串
        ObjectMapper mapper = new ObjectMapper();
        //传递给客户端
        mapper.writeValue(response.getWriter(),map);//response.getWriter()返回的是PrintWriter，这是一个打印输出流。
    }

注意这些：

  • response.setContentType(“application/json;charset=utf-8”);

这个一定要设置，把响应的数据设置成json格式，不然Ajax获取不到响应数据，因为Java转json，json仅仅是字符串，不是json格式。（方式二选一）

  • mapper.writeValue(response.getWriter(),map)
 				writeValue(参数1，obj):
	                    参数1：
	                        File：将obj对象转换为JSON字符串，并保存到指定的文件中
	                        Writer：将obj对象转换为JSON字符串，并将json数据填充到【字符】输出流中
	                        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到【字节】输出流中

response.getWriter()是打印输出流

西西里_伸手党
发布了65 篇原创文章 · 获赞 1 · 访问量 1462
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_45097731/article/details/104918060
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022