AJAX&JSON学习心得

最新推荐文章于 2022-05-14 17:49:19 发布

树叶要走风怎么挽留

最新推荐文章于 2022-05-14 17:49:19 发布

阅读量341

点赞数 1

文章标签： Ajax&amp;Json

本文链接：https://blog.csdn.net/weixin_44993313/article/details/103104068

版权

java 同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

前后端交互

1 篇文章 0 订阅

订阅专栏

1.AJAX_概念
同步请求服务器有什么特点？
浏览器必须等待服务器响应成功后，才能进行其他的操作
异步请求服务器有什么特点?
浏览器不需要等待服务器响应，就能进行其他的操作
目的：
提升用户体验度

2.AJAX_实现_原生JS方式1（了解）
XmlHttpRequest:
open(method,url,async)三个参数分别代表什么？
send()方法不同的请求方式有什么不同?

3.AJAX_实现_原生JS方式2（了解）
客户端如何知道服务器什么时候成功响应了？

4.AJAX_实现_JQuery实现方式_ajax()
$.ajax({
type:请求方式
url:异步请求的资源路径
data:给服务器传递的参数
success:服务器响应成功后回调的函数
error:请求失败后的回调函数
dataType:告诉jQuery，用什么格式去解析服务器响应的数据；
});

	/*入口函数*/
$(function () {
    // 获取到id为btn的元素，给他添加单击事件，点击后发送异步请求
    $("#btn").click(function () {
        // 使用$.ajax发送异步请求
        $.ajax({
            /*$.ajax发送异步请求的时候，需要写键值对的形式,中间使用,进行分割*/
            url:"ajaxServletDemo2", // 请求的资源路径
           // type:"get", // 请求资源的请求方式、get方式，请求参数在请求行中
            type:"POST", // 请求资源的请求方式、post方式，请求参数在请求体中
           // data:"name=zhangsan&age=18", // 请求参数。有俩种表示方式
            data:{"name":"zhangsan","age":18}, // 请求参数，使用json键值对的方式
            success:function (data) { // 请求成功后调用的回调函数， data 参数为服务器响应的参数
                alert(data);
            },
            error:function () {
                alert("出错了"); // 请求出错后，调用的回调函数
            },
            datatype:"text" // 告诉JQuery用什么方式去解析服务器发送过来的数据
        });
    });
})

5.AJAX_实现_JQuery实现方式_ajax()_其他键值
error:?请求失败后的回调函数
dataType:?告诉jQuery，用什么格式去解析服务器响应的数据；

6.AJAX_实现_JQuery实现方式_get&post
$.get(url,data,callback,type);
$.post(url,data,callback,type);
$.get()和 $.post()两种请求方式使用有什么区别?
**********************************
使用jQuery发送ajax请求，如果传递的参数格式是：{键：值}格式，那么jQuery会自动把这种格式转换成满足http协议要求的：键=值&键=值；
如果传递的参数本身格式就是满足http协议的键=值&键=值，那么原样发送

1.JSON_概念
什么是JSON？
	javascript对象表示形式（键值对）；

JSON可以用来干什么？
		存储和交换交换数据(替换xml)
		更小，更易解析的格式；
		
	{"username":"张三","age":"123"}

	<user>
		<username>张三</username>
		<age>123</age>
	</user>

2.JSON_语法_定义
json的键值对中键不用引号引起来可不可以；
可以！
json键值对中值可以是哪些类型？
字符串；
数字；
布尔值；
对象；
数组；
null；

*****************
	{}对应对象
	[]对应数组；
	
json定义的标准格式！！！！！
	{键:值}
	键原则上都需要用引号引起来；
	值：
		字符串用引号；
		数字、对象、布尔值、数组、null都不需要用引号
		
		
	var aaa = {"username":"张三"};---json对象
    var bbb = "{\"username\":\"张三\"}";----json字符串

3.JSON_语法_值的获取
如何获取json对象指定键的值？
json对象.键名;
json对象[“键名”] ******* 第二种方式需要谨记[ ]括号中加" " 号
如何获取json数组对象指定索引处的值？
json数组对象[索引]
如何遍历一个json对象？
for(var key in json对象){
alert(key+":"+json对象[key]); // 因为此时的key为一个
}

	   // 定义json对象
   // json的键为字符串，值可以为 字符串，布尔值 ,数字，对象{}，数组[]
                       // 值为字符串       值为字符串       值为布尔值   值为数字
  var user =  {"username":"zhangsan","password":"123","gender":true,"age":18};
//  alert(user);
   // 获取json对象的值
   // alert(user.username); // 通过json对象.键名调用 可以获取到json中的数据
   // alert(user["password"]); // 通过json对象["键名"] 调用，也可以获取到json指定key对应的值
   // json 数组，数组中存储着对象
   var users = [{"username":"zhangsan","password":"123","gender":true,"age":18},
                {"username":"lisi","password":"234","gender":false,"age":20},
                {"username":"wangwu","password":"564","gender":false,"age":38}
   ];
   // 获取数组中的json数据。通过索引获取   json对象用{}包裹，json数组用[]包裹
   var username = users[0].username;
   var password = users[0].password;
   var gender = users[0].gender;
   // alert(username);
   // alert(password);
   // alert(gender);

   /* // 遍历 user对象
   for (var u in user){
       var element = user[u];  // 因为 user.u 相当于 user."username"；
       alert(element);         //  所以只能使用第二种方式获取到json对象的每一个值 即user[u]
   }*/
   // json 数组遍历
   // 获取到每一个user 对象
   for (var i = 0; i < users.length; i++) {
       // 获取到每一个user对象的每个属性
       for (var user in users[i]){
           alert(users[i][user]);
       }
   }

4.JSON_解析器Jackson_java对象转json
使用Jackson的步骤？
1.需要导入Jackson相关jar包；
2.创建核心对象 ObjectMapper()
3.调用ObjectMapper的方法完成转换；

ObjectMapper：
	
	String writeValueAsString(Object obj);
	
		把obj对象转换成json字符串；
		
		
	void writeValue(File file,Object obj);
		把obj对象转换成json字符串，并且把字符串写入到file文件中；
		
	void writeValue(Writer writer,Object obj);
		把obj对象转换成json字符串，并且把字符串写入到writer流中；
	void writeValue(OutputStream out,Object obj);
		把obj对象转换成json字符串，并且把字符串写入到out流中；

 // 告诉tomcat使用utf-8来解析客户端发送的请求参数以及从数据库查询到的数据格式
 request.setCharacterEncoding("utf-8");
 // 告诉客户端使用什么样的格式解析服务器响应的数据格式
 response.setContentType("application/json;charset=utf-8");

 // 创建user对象
 User user = new User();
 user.setName("张三");
 user.setAge(18);
 user.setGender("男");

 // 创建ObjectMapper 对象映射对象。
 ObjectMapper om = new ObjectMapper();
 // 调用 writeValueAsString 方法将java对象转换为json字符串
/* String value = om.writeValueAsString(user);
 System.out.println(value);
 response.getWriter().write(value);*/

// writeValue 把user对象转换成json字符串，并且把字符串写入到writer流中；
om.writeValue(response.getWriter(),user);

5.JSON_解析器Jackson_java对象转json_注解
@JsonIgnore注解的作用？
在转换的时候，让某个成员变量的值不要显示到json字符串中
@JsonFormat注解的作用
在转换的时候，让某个成员变量按照指定的格式进行转换

// 使用JsonIgnore 注解可以指定某个属性不被显示到json字符串中
//@JsonIgnore
// 使用JsonFormat 在转换的时候，让某个成员变量按照指定的格式进行转换
@JsonFormat(pattern = “yyyy-MM-dd”)
private Date date;

6.JSON_解析器Jackson_java对象转json_List&Map
ArrayList对象转换成Json字符串对应的是什么？[ ]
Map对象转换成Json字符串对应的是什么？{}

7.JSON_解析器Jackson_json转Java对象(了解)
如何把json字符串转换成java对象？
readValue(json字符串)；

***************************************
	当发送ajax异步请求到服务器，请求到一个json字符串，不能直接使用，我们需要把json字符串转换成json对象才能使用：
		1.在发送异步请求时：
			$.(url,data,success,"json");//告诉jQuery，用json格式解析服务器响应的数据
			
		2.在服务器端，使用：
			resp.setContentType("application/json;charset=utf-8");//告诉客户端，使用json格式解析我响应的数据；

8.案例_校验用户名是否存在
服务器响应回来的json字符串，如何转换成一个json对象？

servlet

@WebServlet("/ajaxServletTest")
public class AjaxServletTest extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");

        // 获取用户的异步请求参数
        String username = request.getParameter("username");
        Person person = new Person();
        // 判断如果用户名为zhangsan 返回一个person对象。 值为 true & "这个有人用了,换一个把"
        if (username != "") {
            if ("zhangsan".equals(username)) {
                person.setMsg("这个有人用了,换一个把");
                person.setFlag(true);
            } else {
                person.setMsg("你特娘的真是个天才，可以用");
                person.setFlag(false);
            }
        }else {
            person.setMsg("请输入用户名");
            person.setFlag(true);
        }
        // 创建ObjectMapper 对象，给客户端进行数据响应
        ObjectMapper o = new ObjectMapper();
        o.writeValue(response.getWriter(), person);

    }

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

html

<head>
    <meta charset="UTF-8">
    <title>注册校验</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
            // 入口函数
            $(function () {
                // 给用户名的input 添加离焦事件
                $("#username").blur(function () {
                    // 发送异步请求
                    $.post("ajaxServletTest",{"username":$(this).val()},function (person) {
                        // 对服务器返回的数据进行判断， 如果已经有该姓名，则提示对应的错误提示信息,如果没有，页给出响应的正确提示信息
                        // flag = true 代表重复
                        if (person["flag"]){
                            $("#msg").css("color","red");
                            $("#msg").html(person["msg"]);
                        }else {
                            $("#msg").css("color","green");
                            $("#msg").html(person["msg"]);
                        }
                    });
                });
            })
    </script>
</head>
<body>

        用户名:<input type="text" id="username" placeholder="请输入用户名"> <span id="msg"></span><br>
        密码:<input type="text" id="password" placeholder="请输入密码"> <br>
        <input type="button" id="btn" value="注册">
</body>
</html>

在这里插入图片描述

树叶要走风怎么挽留

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX&JSON学习心得

1.AJAX_概念同步请求服务器有什么特点？浏览器必须等待服务器响应成功后，才能进行其他的操作异步请求服务器有什么特点?浏览器不需要等待服务器响应，就能进行其他的操作目的：提升用户体验度2.AJAX_实现_原生JS方式1（了解）XmlHttpRequest:open(method,url,async)三个参数分别代表什么？send()方法不同的请求方式有什么不同?3.AJA...
复制链接

扫一扫