Ajax技术&Json

最新推荐文章于 2022-03-21 11:18:16 发布

weixin_奢望

最新推荐文章于 2022-03-21 11:18:16 发布

阅读量144

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44523741/article/details/89323979

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

索引

1、原理
2、原生ajax
3、JQ对象封装的ajax
4、.get()，和.post() 方法比3还简单
5、json解析器

一、原理

在这里插入图片描述
效果：参考京东页面，拖到最底下，中间的图片，信息都是空白的，到你想看的内容，然后给服务器发一个局部请求，这才得到服务器的局部响应。

二、快速上手

1、原生js的Ajax

原生js的Ajax简单的分为五个步骤：

    1.构建异步请求对象    
     var ajaxObj=new XMLHttpRequest();
     
    2.调用open打开连接,传入请求方式、url 等参数
    第一个参数写请求方式，第二个参数可写跳转到哪个servlet可在后面追加参数“ /param=value”
    ajaxObj.open("get","AServlet");
    
    3.调用send方法 把请求发送到AServlet里 可在AServlet 通过 request.getParameter 方法获得open传来的参数
      ajaxObj.send();
    
     如果是post 请求
     请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据(原因下面有)：  

     xmlhttp.open("POST","ajax_test.html",true); 
     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     xmlhttp.send("fname=Henry&lname=Ford");
         
    4.注册状态改变事件
     ajaxObj.onreadystatechange=function () {
     //当响应码为4  并且状态码为200时 才算响应成功 ，在函数里写一些逻辑
     
      if(ajaxObj.readyState===4 && ajaxObj.status===200){
            console.log("处理页面");
            
        }
     
     }
    

    5.在事件的驱动函数里面处理返回的数据
     针对服务器返回的数据进行处理:
                ajaxObj.responseText  //处理非xml
                 ajaxObj.responseXML //处理xml

*为什么使用post 请求给服务器提交数据，需要给表头添加application/x-www-form-urlencoded属性？

       post方式给服务器提交数据 经过我们测试 发现 form表单在post提交的时候
	请求头的Conten-type是: application/x-www-form-urlencoded
	
    	而我们的ajax的请求头却是:  text/plain;charset=utf-8application/x-www-form-urlencoded这个东西，它是form表单的enctype的默认值，表示当前表单默认以 url编码的字符串的形式进行提交。
     所以我们需要模拟post请求头的操作，给Content-type请求头设置改属性。

2、jQuery对象封装的Ajax

jQuery封装后的 Ajax 简单上手：

   $.ajax({
                    url: '/AJAXServlet', //提交请求到哪
                    type: 'POST', //请求方式get post
                    async: true,    //是否异步请求:默认为true， 是异步的 
                    data: {
                        key1: "value1",  发送到服务器的数据。
                        key2:"我是数据2"  // key-value的数据
                    },
                    timeout: 15000,    //超时时间
                    dataType: 'json',  //响应返回的数据格式

                    success: function (data) {

                        alert('AJAX成功！');
                        $('#result').text(data.result);
                    },

                    error: function (e) {
                        alert('AJAX失败！');
                    }
                });

常用属性：
dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
data：发送到服务器的数据。将自动转换为请求字符串格式。
方式一： “key=value&key2=value2”
方式二： 最好以json格式发送。
jsonp 跨域交互

JSON

1. 语法基本规则

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

2. 获取数据:

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

来了解一下4

   var json1={"chen":"1","chen1":2,"if":false}
           
           for (var key in json1) {

               console.log(key)
           }

结果
在这里插入图片描述

JSON解析器

	* JSON解析器：
		* 常见的解析器：Jsonlib，Gson，fastjson，jackson√
	
	jackson：MVC框架使用，可以把Bean里的数据直接封装成json
	流程：

1. JSON转为Java对象

导入jackson的相关jar包
创建Jackson核心对象 ObjectMapper
调用ObjectMapper的相关方法进行转换
readValue(json字符串数据,Class)

2、Java对象转换JSON(常用)

使用步骤：
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
转换方法：
* 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：对象格式一致
```

案例：

//1.创建Person对象
        Person p  = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");

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

            转换方法：
                writeValue(参数1，obj):
                    参数1：
                        File：将obj对象转换为JSON字符串，并保存到指定的文件中
                        Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                writeValueAsString(obj):将对象转为json字符串

         */
        String json = mapper.writeValueAsString(p);
        System.out.println(json)

结果：在这里插入图片描述

引入两个注解：

@JsonIgnore：排除属性。
@JsonFormat：属性值得格式化

比如 new Data() 返回的是一个毫秒值，把它写进json没有什么实际意义
∴可以在实体类属性上加上这两个注解
在这里插入图片描述
结果：

跨域请求

处在不同域环境下的前端和后台要想进行交互必须要做跨域处理
因为浏览器有同源策略不同源的浏览器会默认阻止

方式一：

1、JQ的ajax url写全路径
2、把JQ的ajax 的dataType:改成这个"jsonp"

方式二：

在方式一的基础上增加：
1、服务器配合
在sevlet写这三句话
允许谁来
response.setHeader(“Access-Control-Allow-Origin”,“http://localhost:63342”);
允许跨域的方式
response.setHeader(“Access-Control-Allow-Method”,“post”);
有效时间
response.setHeader(“Access-Control-Max-Age”,“1000”);