淘先锋技术网

首页 1 2 3 4 5 6 7

JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)

JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)

​ 参考教程图灵星球js入门教程image-20210824185756621

image-20210824181450483

文章目录

1.DOM

引入

​ 我们平时浏览网页是怎么看到样式那么多彩的渲染过的网页呢？

​ 当我们敲下一个网址时，网址经过DNS解析，得到服务器地址,客户端向服务器发出HTTP请求，经过TCP三次握手，服务器向客户端返回HTML文件，浏览器将收到的代码进行解析

​ 然后会经过DOM构造、布局还有绘制页面，然后我们就可以看到网页了👌

​ 也就是经历了HTML→DOM→GUI(图形用户界面)的过程

简介

DOM(Document Object Model):文档对象模型

来自百度百科的定义:

image-20210824184619295

还可以看MDN 上的DOM概述

DOM树

​ 浏览器会通过解析器将接收到的html代码解析为DOM树

​ 将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容

image-20210824185325982

​ 接下来的布局和绘制就是基于DOM树的，所以我们改变DOM树，就可以改变前端页面

​ 而JavaScript就可以改变DOM树，从而改变前端页面

JavaScript控制DOM

主要方式：

​ 写的前几节课用到了，但当时不知道这是操纵DOM

  • 使用id
  • 使用tag
  • 使用class
  • 使用CSS选择器
  • 使用HTML object collections来找THML元素

image-20210824185905106

DOM的精彩解释

DOM 是什么？ - 字非易的回答 - 知乎

DOM 是什么？ - 果冻公开课的回答 - 知乎

2.JSON

引入

​ 后端部署后端，提供接口，提供数据，前端也独立部署，负责渲染后端的数据，那么后端的数据要传给前端，JSON就是一种前后端传输数据常用的格式

​ JSON独立于编程语言，采用文本格式，存储轻量；结构清晰，层次易懂；利于人阅读和编写，利于机器解析和生成；传输效率高

简介

​ 来自百度百科的定义:

image-20210824190322475

语法特征

image-20210824191546605

  • 数据由键值对构成
  • 不同数据用逗号分隔
  • {}用于存储对象
  • []用于存储数组

将JSON转换成JavaScript对象

<!DOCTYPE html>
<html>

<body>
    <h2>将JSON转化为JavaScript对象</h2>
    <p id="demo"></p>
    <script>
        var jsonText='{"employees":['+
        '{"name":"Kevin","age":"29"},'+
        '{"name":"David","age":"31"},'+
        '{"name":"Peter","age":"27"}]}';
        jsonObject=JSON.parse(jsonText);
        document.getElementById("demo").innerHTML=
        jsonObject.employees[1].name+" "+jsonObject.employees[1].age;
        
    </script>

</body>

</html>

image-20210824200128925

3.Ajax

引入

​ 😛你在CSDN这个页面给我点了个赞，但是网页没有刷新，这就是Ajax技术的体现😜

image-20210824212005411

​ 相较于传统改变页面的方式，Ajax减少了资源浪费，因为新旧网页可能大部分代码都是一样的，如果去更新整个页面，就很耗

​ Ajax就可以做到向服务器发送请求，只获取必要的资源，然后前端来处理后端的回应

​ image-20210824230057943

简介

​ 来自百度百科的定义

image-20210824200411494

实例

​ 这里要使用一个json数据API

image-20210824234508174

<!DOCTYPE html>
<html>
    <head>
        <script>
            function loadJSON() {
              var xhttp = new XMLHttpRequest();
              xhttp.onreadystatechange = function(){ 
                if (this.readyState ==4 && this.status == 200){
                displayData(this);
                }
            };
            xhttp.open("GET","https://jsonplaceholder.typicode.com/posts/", true); 
            xhttp.send();
          }
          function displayData(xhttp) {
              jsonData = JSON.parse(xhttp.responseText); 
              var newContent = ""
              
                for (index in jsonData) {
                    newContent += "<p>" + jsonData[index].body + "</p>";
                }
                document.getElementById("json-content").innerHTML = newContent;
            }
                function clearJSON() {
                document.getElementById("json-content").innerHTML = "";
            }
          
        </script>
    </head>
<!--readyState的s还有newContent的c的大小写问题，找了半天才发现是这两个问题,无语子...-->
    <body>
        <h2>AJAX DENO</h2>
        <button type="button" onclick="loadJSON()">Get JSON</button>
        <button type="button" onclick="clearJSON()">Clear JSON</button>
        <div id="json-content"></div>
    
    </body>
</html>

image-20210824234533742

当点击Get JSON按钮时：

image-20210824234637727

再点击Clear JSON

image-20210824234652378

其间没有刷新整个网页,只是局部进行更新