大佬教程收集整理的这篇文章主要介绍了JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
参考教程图灵星球js入门教程
我们平时浏览网页是怎么看到样式那么多彩的渲染过的网页呢？
当我们敲下一个网址时c;网址经过DNS解析c;得到服务器地址,客户端向服务器发出http请求c;经过TCP三次握手c;服务器向客户端返回HTML文件c;浏览器将收到的代码进行解析
然后会经过DOM构造、布局还有绘制页面c;然后我们就可以看到网页了ὄc;
也就是经历了HTML→DOM→GUI(图形用户界面)的过程
DOM(Document Object Model):文档对象模型
来自百度百科的定义:
还可以看MDN 上的DOM概述
浏览器会通过解析器将接收到的html代码解析为DOM树
将HTML或XML文档转化为DOM树的过程称为解析(parsE)。HTML文档被解析后c;转化为DOM树c;因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构c;还定义了结点对象的行为c;利用对象的方法和属性c;可以方便地访问、修改、添加和删除DOM树的结点和内容
接下来的布局和绘制就是基于DOM树的c;所以我们改变DOM树c;就可以改变前端页面
而JavaScript就可以改变DOM树c;从而改变前端页面
写的前几节课用到了c;但当时不知道这是操纵DOM
DOM 是什么？ - 字非易的回答 - 知乎
DOM 是什么？ - 果冻公开课的回答 - 知乎
后端部署后端c;提供接口c;提供数据c;前端也独立部署c;负责渲染后端的数据c;那么后端的数据要传给前端c;JSON就是一种前后端传输数据常用的格式
JSON独立于编程语言c;采用文本格式c;存储轻量；结构清晰c;层次易懂；利于人阅读和编写c;利于机器解析和生成；传输效率高
来自百度百科的定义:
{}用于存储对象[]用于存储数组<!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>
😛你在CSDN这个页面给我点了个赞c;但是网页没有刷新c;这就是Ajax技术的体现ὡc;
相较于传统改变页面的方式c;Ajax减少了资源浪费c;因为新旧网页可能大部分代码都是一样的c;如果去更新整个页面c;就很耗
Ajax就可以做到向服务器发送请求c;只获取必要的资源c;然后前端来处理后端的回应
来自百度百科的定义
这里要使用一个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的大小写问题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
其间没有刷新整个网页,只是局部进行更新
以上是大佬教程为你收集整理的JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)全部内容，希望文章能够帮你解决JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。