【九月打卡】第十天 Ajax&Json-原创手记-慕课网

课程信息

● 学习课程：Java工程师2022版
● 章节名称：Ajax&Json
● 讲师：八戒猪

课程内容

1.Asynchronous JavaScript And XML(异步的JavaScript和XML)
Ajax可以在不刷新页面的前提下，进行页面局部更新
2.Ajax使用流程
XMLHttpRequest是Ajax的核心,Ajax使用该对象发起请求，接受响应
xmlhttp.onreadystatechange()事件用于监听Ajax的执行过程
xmlhttp.readyState属性说明XMLHttpRequest当前状态 readyState=4响应文本已被接收
xmlhttp.status属性服务器响应状态码,200成功，404未找到

<body>
  <input id="btnLoad" type="button" value="加载"/>
  <div id="divContent"></div>
  <script>
    document.getElementById("btnLoad").onclick = function() {
    	//1.创建XmlHttpRequest对象
      var xmlhttp;
      if(window.XMLHttpRequest){
        // Google、Opera、Safari、Firefox、IE7+浏览器
      	xmlhttp = new XMLHttpRequest();
      }esle {
        // IE6、IE7浏览器
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
 			// 2.发送Ajax请求
      xmlhttp.open("GET","/content");
      xmlhttp.send();
 			// 3.处理服务器响应
      xmlhttp.onreadystatechagne=function(){
        //响应已被接收且服务器处理成功时才执行
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
          //获取响应体的文本
          var responseText = xmlhttp.responseText;
          //对服务器结果进行处理
          document.getElementById("divContent").innerHTML=
            document.getElementById("divContent").innerHTML + "<br/>"+ responseText;
        }
      }
    }
  </script>
</body>

JSON接收
JavaScript Object Notation(JavaScript对象表示方式）
JSON是轻量级的文本数据交换格式
数据由键(key)/值(value)描述，由冒号分割
大括号代表一个完整的对象，拥有多个键/值
中括号保存数组，多个对象之间使用逗号分割
3.JavaScrip操作Json

<script>
  for(var i =0;i<employeeList.length; i++){
    var employee = employeeList[i];
    console.log(employee)
    document.write("<h1>");
    document.write(employee.empno)
    document.write("</h1>");
  }
</script>

jackJson
在pom文件中引入jackson依赖，重新加载之后会在External Libraries中下载三个依赖文件。

<dependency>     
  <groupId>com.fasterxml.jackson.core</groupId>     
  <artifactId>jackson-databind</artifactId>     
  <version>2.13.3</version> 
</dependency>

代码中关于json序列化的代码只有两句

//        JSON的核心对象         
ObjectMapper objectMapper = new ObjectMapper(); 
//        将对象转化为JSON字符串，即序列化         
String json = objectMapper.writeValueAsString(list);
resp.setContentType("text/json;charset = utf-8");         
resp.getWriter().println(json);

书写html前端代码，关键语句为获取servlet响应，然后将JSON字符串转换为java对象。

 var t = xmlhttp.responseText;             
 var json = JSON.parse(t);

Ajax组件库axios
axios发送Get请求相关代码

<script>
   axios.get('/news', {
       params: {
           "t": "baidu"
       }
   }).then(function (response) {
       console.log(response);
       //这时会自动转换为json对象
       var json = response.data;
       for (var i = 0; i < json.length; i++) {
           var news = json[i];
           var container = document.getElementById("container");
           container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";
       }
   })
   .catch(function (error) {
       console.log(error);
   });
</script>

axios发送Post请求相关代码

//以面向对象的方式
const params = new URLSearchParams();
params.append('t', 'baidu');
axios.post('/news', params )
// axios.post("/news", "t=google",{ headers: { "content-type": "application/x-www-form-urlencoded"}} )
.then(function (response) {
            console.log(response);
            //这里获取的数据已经是java对象了
            var json = response.data;
            for (let i = 0; i < json.length; i++) {
                let news = json[i];
                //每次点击加载按钮，都追加内容到div中
                document.getElementById("container").innerHTML = document.getElementById("container").innerHTML + "<h1>" + news.title + "</h1>";
            }
        })
    .catch(function (error) {
        console.log(error);
    });

Ajax同步与异步的区别
同步是在服务器为返回JSON前，JS程序一直处于阻塞等待的状态
异步是在服务器未返回JSON前，不阻塞程序，Ajax通过回调获取结果
Ajax设置同步后，send()方法发出后，无论是否阻塞，onreadystatechange设置的事件都会失效。所以去掉onreadystatechange事件，原先这个事件中的响应处理函数直接顺序写即可

xmlhttp.open("GET", "/news?t=google",false);//设置同步方式发送请求
    xmlhttp.send();
    console.log("请求数据已经发送");
    // 3.处理服务器响应。
    // xmlhttp.onreadystatechange = function () {   //同步请求方式不再需要这个事件触发
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var t = xmlhttp.responseText;
            var json = JSON.parse(t);
            for (let i = 0; i < json.length; i++) {
                let news = json[i];
                //每次点击加载按钮，都追加内容到div中
                document.getElementById("container").innerHTML = document.getElementById("container").innerHTML + "<h1>" + news.title + "</h1>";
            }
        }
    //}

学习收获

学习 Ajax(异步的JavaScript和XML) ，Ajax的使用流程，创建XMLHttpRequst对象，创建请求，发送请求，处理响应
JSON轻量级数据格式,Ajax+JSON开发模式，Ajax同步与异步的区别

打卡截图

图片描述