JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)
参考教程图灵星球js入门教程
文章目录
1.DOM
引入
我们平时浏览网页是怎么看到样式那么多彩的渲染过的网页呢？
当我们敲下一个网址时，网址经过DNS解析，得到服务器地址,客户端向服务器发出HTTP请求，经过TCP三次握手，服务器向客户端返回HTML文件，浏览器将收到的代码进行解析
然后会经过DOM构造、布局还有绘制页面，然后我们就可以看到网页了👌
也就是经历了HTML→DOM→GUI(图形用户界面)的过程
简介
DOM(Document Object Model):文档对象模型
来自百度百科的定义:
还可以看MDN 上的DOM概述
DOM树
浏览器会通过解析器将接收到的html代码解析为DOM树
将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容
接下来的布局和绘制就是基于DOM树的，所以我们改变DOM树，就可以改变前端页面
而JavaScript就可以改变DOM树，从而改变前端页面
JavaScript控制DOM
主要方式：
写的前几节课用到了，但当时不知道这是操纵DOM
- 使用id
- 使用tag
- 使用class
- 使用CSS选择器
- 使用HTML object collections来找THML元素
DOM的精彩解释
2.JSON
引入
后端部署后端，提供接口，提供数据，前端也独立部署，负责渲染后端的数据，那么后端的数据要传给前端，JSON就是一种前后端传输数据常用的格式
JSON独立于编程语言，采用文本格式，存储轻量；结构清晰，层次易懂；利于人阅读和编写，利于机器解析和生成；传输效率高
简介
来自百度百科的定义:
语法特征
- 数据由键值对构成
- 不同数据用逗号分隔
{}用于存储对象[]用于存储数组
将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>
3.Ajax
引入
😛你在CSDN这个页面给我点了个赞，但是网页没有刷新，这就是Ajax技术的体现😜
相较于传统改变页面的方式，Ajax减少了资源浪费，因为新旧网页可能大部分代码都是一样的，如果去更新整个页面，就很耗
Ajax就可以做到向服务器发送请求，只获取必要的资源，然后前端来处理后端的回应
简介
来自百度百科的定义
实例
这里要使用一个json数据API
<!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>
当点击Get JSON按钮时：
再点击Clear JSON
其间没有刷新整个网页,只是局部进行更新