正文

javascript入门:前后端交互基础(dom,json,ajax)(代码片段)

临风而眠  临风而眠  2022-12-25  303

关键词：

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

参考教程图灵星球js入门教程

文章目录

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

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的精彩解释

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

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

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

学html5需要啥基础，怎么入门？

...移动端、平板设备等。2、前后端网页交互。主要内容为JavaScript语法全面进阶、ES6到ES10新语法实践、jQuery应用及插件使用、设计模式及插件编写、封装JS工具库及WebAPIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC端... 查看详情

web前端学习分哪些阶段？

...前端学习分为8个阶段：阶段1.前端核心基础HTML+_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动... 查看详情

前后端交互模式(代码片段)

一、原生Ajax1.1ajax概述Ajax即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是一种用于客户端与服务端进行数据交互的一种技术。Ajax能够创建交互式、快速动态网页应用，无需重新加载整个网页的情况下，能够更新部分网页。... 查看详情

vue之前后端交互(代码片段)

...交互模式接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一... 查看详情

grpc入门与实操(.net篇)(代码片段)

为什么选择gRPC历史长久以来，我们在前后端交互时使用WebApi+JSON方式，后端服务之间调用同样如此（或者更久远之前的WCF+XML方式）。WebApi+JSON是优选的，很重要的一点是它们两者都是平台无关的三方标准，且足够语义化，便于程... 查看详情

web前端工程师入门需要学啥？

...盒子模型，网页布局，Photoshop二、Web编程基础学习路线：JavaScript基础，BOM和DOM模型，事件处理，jQuery，交互及动画，jQuery优质插件，文档处理，数组和对象操作三、Web编程高级及全栈开发学习路线：JavaScript高级编程，jQuery插件... 查看详情

前端基础之jquery入门01

jQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Writeless,domore."优势一款轻量级的JS框... 查看详情

web前端的内容多吗？好学不？

...的视频，你可以学习。阶段1.前端核心基础HTML+_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动... 查看详情

学习web前端开发，需要掌握哪些知识

...SS/HTML5+CSS3（HTML+CSS、PC端网页重构、HTML5+CSS3）第二阶段：Javascript（JS数据类型、语法、JS对象、JS内置对象、BOM\\DOM）第三阶段：Javascript高级/Ajax/JQ（AJAX、浏览器缓存、JS对象高级、ES6、JQuery）第四阶段：前端主流框架（前端工程... 查看详情

javascript基础：dom操作详解

...GitHub上关注我，一起入门和进阶前端。以下是正文。前言JavaScript的组成JavaScript基础分为三个部分：ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM：文档对象模型，操作网页上的元素的... 查看详情

网站开发过程中，前后端是如何进行交互的?

前后端分离的前提下（前端编写HTML、CSS、JavaScript；后端编写Java处理database），等双方工作都完成后，前后端是如何交互的？方法可能有多种，请举例。通过对数据库的调用管理进行交互。前台一般是对数据库内容按照页面代码... 查看详情

web前端开发主要学哪些课程？

...面的开发，为后期编写页面逻辑、动态效果打基础。2、Javascript要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，这个阶段需要掌握编程基础概念，培养逻辑思维能力。能够独立完成网站的页面开... 查看详情

websocket前后端交互通讯

(41条消息)websocket前后端交互通讯_凡客丶的博客-CSDN博客查看详情

前端基础之bom和dom(代码片段)

概念展开：之前学习了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分为ECMAScript，DOM，... 查看详情

python全栈100天学习笔记day48前后端分离开发入门(代码片段)

前后端分离开发入门在传统的Web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称... 查看详情

python全栈100天学习笔记day48前后端分离开发入门(代码片段)

前端基础之dom操作

前戏到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习DOM相关知识。JavaScript可以操作整... 查看详情

vue基础入门讲义-环境配置(代码片段)

...作DOM1995年，网景工程师BrendanEich花了10天时间设计了JavaScript语言。随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。ajax盛行2005年开始，ajax逐渐被前... 查看详情