11.7 Ajax,Axios,Json

目录

1.Ajax

1.1 同步与异步

1.2 局部刷新

1.3 ajax实现

 2.JSON

2.1 将json字符串转为js对象:JSON.parse(str)

2.2 js对象转换成json字符串:JSON.stringify(obj)

3.后端JSON字符串与Java对象的转换（Fastjson）

3.1 Fastjson

3.2 java对象转成JSON字符串：JSON.toJSONString(user)

3.3 JSON字符串转成java对象：JSON.parseObject(jsonstr,User.class)

---

1.Ajax

1.1同步与异步

同步：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后浏览器页面才能继续做其他的操作。

异步：浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

1.2局部刷新

局部刷新：不是刷新整个页面，而刷新页面的局部，取决于服务器端返回内容类型((text/html)或 (text/xml、application/json)

Ajax是一种无需重新加载网页，就能更新部分网页脚本技术。

特点：异步交互，局部刷新。 传统网页和服务器交互方式：同步交互，全部刷新。

1.3ajax实现

1）原生方式（繁琐）

<script>
    //1.创建核心对象
    var xhttp;
    if(window.XMLHttpRequest){
        xhttp = new XMLHttpRequest();
    }else{
        xhttp = new ActiveXObject("Micrsoft.XMLHTTP");
    }
    //2.发送异步请求
    xhttp.open("GET","hello-servlet",true);//true（异步）或 false（同步）
    xhttp.send();
    xhttp.onreadystatechange=function (){//回调函数
        if(this.status==200&&this.readyState==4){
            alert(this.responseText)
        }
    }
</script>

2）axios方式

axios 对原生的Ajax进行封装，简化书写。

        引入js文件：<script src="js/axios-0.18.0.js"></script>

axios两种请求方式： 

<script>
 //1.get方式
    axios({
        method:"get",
        url:"axiosServlet?username=zs"
    }).then(function(resp){
        alert(resp.data)
    })
</script>

<script>
//2.post方式
    axios({
        method:"post",
        url:"axiosServlet",
        data:"username=zs",
    }).then(function (resp){
        alert(resp.data)//响应的数据
    })
</script>

使用axios时，如果要携带复杂的数据时都会以 JSON 格式进行传递。

 2.JSON

json是一种数据格式。注意：格式中的键要求必须使用双引号括起来

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。

定义格式如下：

<script>
 //字符串json
  var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
  alert(jsonStr)
</script>

2.1将json字符串转为js对象:JSON.parse(str)

<script> 
//2.将json字符串转为js对象
  var  jsObject = JSON.parse(jsonStr)
  alert(jsObject)
  alert(jsObject.name)
  alert(jsObject.age)
  alert(jsObject.addr)
</script>

2.2js对象转换成json字符串:JSON.stringify(obj)

<script> 
//3.js对象转换成json字符串
  var jsString = JSON.stringify(jsObject)
  alert(jsString)
</script>

axios 是一个很强大的工具。我们只需要将需要提交的参数封装成 js 对象，并将 该 js 对象作为 axios 的 data 属性值进行，它会自动将 js 对象转换为 JSON 串 进行提交。

<script>
var jsObject = {name:"张三"};
axios({
method:"post",
url:"http://localhost:8080/ajax-demo/axiosServlet",
data:jsObject //这里 axios 会将该js对象转换为 json 串的
}).then(function (resp) {
alert(resp.data);
})
</script>

3.后端JSON字符串与Java对象的转换（Fastjson）

请求数据：JSON字符串转为Java对象

响应数据：Java对象转为JSON字符串

3.1Fastjson

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目 前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

导入坐标:

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

3.2java对象转成JSON字符串：JSON.toJSONString(user)

//2.java对象数据转换成JSON字符串
        String jsonstr = JSON.toJSONString(user);
        System.out.println(jsonstr);

3.3JSON字符串转成java对象：JSON.parseObject(jsonstr,User.class)

User.class为java对象的类

 //3.JSON字符串转换成java对象
        User u = JSON.parseObject(jsonstr,User.class);
        System.out.println(u.getId()+u.getUsername()+u.getPassword());

感想：需要把方法分清。