JavaWeb复习巩固

第八天： ajax json

ajax：Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

同步请求：

表单

超链接

特点：只要发送请求，整个页面内容都会重新加载，请求发送出去之后必须等待服务器响应回来之后才能继续操作。

异步请求：

特点：在请求响应的过程中浏览器能继续操作，不需要等待服务器响应

请求响应回来之后不需要重新加载整个网页，实现网页的局部更新

Ajax实现

1.原始js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function createxmlhttp(){
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;

        }
        window.onload=function () {
            //点击事件
            document.getElementById("btn").onclick=function () {
                //请求参数如何被传递？    服务器响应内容如果被接收？
                //发送ajax（异步请求）请求步骤：
                //1.创建XMLHttpRequest对象
                var xmlhttp=createxmlhttp();
                //2.建立连接  里面参数：1.请求方式 2.请求的路径 3.判断是否是异步 true表是异步是真  false表示不是
                xmlhttp.open("GET","/tomcat/servletAJAXDemo1",true);
                //3.发送请求
                xmlhttp.send();

            }
        }
    </script>
</head>
<body>
<!--点击这个按钮无需加载整个网页就可以对局部或者部分进行刷新，将内容展现在下面的div中-->
<button id="btn">发送异步请求</button><br/>
<div></div>
</body>
</html>

package com.swlz.ajax;

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

@WebServlet("/servletAJAXDemo1")
public class ServletAJAXDemo1 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        System.out.println("hi"+username);
        System.out.println("servletAJAXDemo1......被访问了哦。。。。。。。。。。。");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

2.jquery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        /**
         * 1.请求方式
         * 2.请求路径
         * 3.请求参数
         * 4.响应数据
         */
            $(function () {
               $("#btn").click(function () {
                  // $.get("/ajaxServlet","username=bianyiit")
                  $.get("/ajaxServlet",{username:"tom",password:"123"},function (data) {
                      $("#div1").html(data)
                  })
               });
                $("#btn1").click(function () {
                    $.post("/ajaxServlet",{username:"tom",password:"123"},function (data) {
                        $("#div1").html(data)
                    })

                });
            })
    </script>
</head>
<body>
    <button id="btn"> 发送get异步请求</button><br>
    <button id="btn1"> 发送post异步请求</button><br>
    <input type="text"> <br>
    <div id="div1">

    </div>
</body>
</html>

三种方式：

$.ajax();

$.get();

$.post();

Jquery对象发送异步请求常用的三种方式 $.ajax $.post $.get

1.$.ajax是jquery发送异步请求的基本方式

$.ajax能够设置http请求的各种请求信息

2.$.get和$.post是基于$.ajax封装的更加简单的异步请求方式

$.get和$.post只能发送普通的表单类型请求

3.Json：JavaScript Object Notation（对象简谱）

Json存储数据（作为在网络中传输数据的数据交换一种格式）

在网络中传输数据

把java对象转化为json对象，在响应到浏览器中去。

用json解析器

把java对象转换把json字符串

JSON对象可以转换为Java对象

Java对象可以转为JSON字符串对象

javaScript对象表示法

JavaScript ：

ECMAScript(核心语法) + DOM(文档对象模型) + BOM（浏览器对象模型）

Json的作用：

Json存储数据（作为在网络中传输数据的数据交换一种格式）

1. json字符串的写法

json数据格式分为2种

json对象
json数组（集合）

1. json数据的操作

2. java对象和json对象的相互转换

json解析引擎

jsonlib

Gson （google 提供一般用在Android中）

fastJson(阿里巴巴号称全世界做好做快的json解析引擎)

Jackson(springmvc无缝对接)

Jackson的基本使用

导入jar包
创建objectMapper对象
通过objectMapper上面的方法完成json的转换.writeValueAsString，将对象转换成json字符串并返回
json字符串转换成java对象

例子：

package com.swlz.ajax;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.swlz.domain.User;
import java.io.IOException;
public class JsonDemo {
    public static void main(String[] args) throws IOException {
        User user = new User();
        user.setId(1);
        user.setUsername("toto");
        user.setPassword("12345");
//        java的user对象 转换为->json字符串  怎么搞？
        //创建objectMapper对象
        ObjectMapper objectMapper=new ObjectMapper();
        //调用把值转为字符串的方法
//        String userJson = objectMapper.writeValueAsString(user);
        objectMapper.writeValue(System.out,user);//和上面效果一样在控制台输出
//        System.out.println(userJson);
    }
}

今日学习感受：纸上学来终觉浅，光看不动手，很容易忘记，多去实践把！加油！最后一句：不要喊口号，打嘴炮，想要的船要自己造。

posted @ 2021-12-19 23:28 编程玩家1号阅读(36) 评论(0) 收藏举报

刷新页面返回顶部