Skip to content

前后端常用词汇区分

1475字约5分钟

前后端

2021-10-18

如果你也刚刚开始学习前后端等相关知识, 那么可能你会有许多困惑. 本篇文章将会介绍前后端的关键概念, 并对相似的词汇进行区分. 我相信读完后你会对前后端的交互有一个最基本的概念.

HTML5

HTML 语言用于规定网页的内容. 一个页面上有什么内容通过 HTML 文件决定.

例如我们可以通过以下的 HTML 代码为网页添加一个标题和一个正文段落.

<!DOCTYPE html>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

我的第一个标题

我的第一个段落。

CSS

CSS 是一种描述 HTML 文档样式的语言. CSS 描述应该如何显示 HTML 元素, 规定网页的布局.

例如我们刚刚使用 HTML 为网页增添了标题和正文. 但是很显然不论是字体还是排版都是默认的设计, 现在我们希望它变得好看一些. 这就需要用到 CSS.

经过 CSS 样式定义后的网页
<style>
h1 {
	color:orange;
	text-align:center;
  font-size:40px;
}
p {
	font-family:"Times New Roman";
	font-size:20px;
}
</style>

<!DOCTYPE html>
<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

JavaScript

JavaScript 对网页行为进行编程, 其作用有:

  1. 能够改变 HTML 内容.
  2. 能够改变 HTML 属性.
  3. 能够改变 CSS 样式.
  4. 能够隐藏 HTML 元素.
  5. 能够显示隐藏的 HTML 元素.

简单的 js 可以包含在html文件中, 放在 <script></script> 之中, 也可以分开来写单独的 .js 文件.

jQuery

jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程.

基础语法是: $(selector).action()

  1. 美元符号定义 jQuery
  2. 选择符(selector)"查询"和"查找" HTML 元素
  3. jQuery 的 action() 执行对元素的操作

所有 jQuery 函数位于一个 document ready 函数中.

<script>
    $(document).ready(function(){
    --- jQuery functions go here ----
    });
</script>

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码.

如果在文档没有完全加载之前就运行函数, 操作可能失败. 下面是两个具体的例子:

  1. 试图隐藏一个不存在的元素.
  2. 获得未完全加载的图像的大小.

AJAX

AJAX 是一种在无需重新加载整个网页的情况下, 能够更新部分网页的技术. AJAX 用于浏览器与服务器通信而无需刷新整个页面, 服务器将不再返回整个页面, 而是返回少量数据, 通过 JavaScript DOM 更新一部分节点. 期间数据传输可采用 xml, json 等格式, AJAX 最早用于谷歌的搜索提示.

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).

AJAX 不是新的编程语言, 而是一种使用现有标准的新方法.

  1. 需要引入 jQuery.
  2. 需要一个后端接口接收数据并返回.

AJAX 分为原生 AJAX 和 jQuery.ajax. 区别在于:

jQuery 是一个优秀的 js 框架, 对 js 原生的 AJAX 进行了封装, 在封装后的 AJAX 的操作更加简洁, 功能更加强大.

原生 AJAX:

  1. 创建 AJAX 对象.
  2. 连接到服务器.
  3. 发送请求(告诉服务器我要什么文件).
  4. 接收返回值.
//创建对象
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
---------
//发送请求
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
---------
//服务器响应
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //获得字符串形式响应, responseXML获得XML形式响应

//onreadystatechange函数
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  //存有 XMLHttpRequest 的状态. 从 0 到 4 发生变化. 

        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成, 且响应已就绪

而 JQuery 发送 AJAX 分为 5 个步骤:

  1. 传输的 url.

    也就是所谓的数据往哪个地址拿数据.

  2. type.

    请求的类型 比如有: POST, PUT, GET, DELETE 等.

  3. data.

    要传输给后端的数据, 没有可以不写.

  4. dataType:'json'.

    如果 Php 端声明了 json 返回, 那么 js 端可以不用写 dataType="json".

    如果 Php 端没有声明 json 返回, 那么 js 端必须写 dataType="json".

  5. success.

    发送数据之后成功的回调函数.

html
<button class="del" value="{$item['id']}">删除</button>
<button οnclick="login1()">发送1</button>
<script>
    $(function(){
        $('.del').click(function(){
            var id =$(this).val();
            $.ajax({
                'url':"{:url('home/shop/delete')}",//请求地址,后台接口(模块/控制器/方法)
                'type':'delete',//请求类型
                'data':'id'+=id,//发送给后端的数据
                'dataType':'json',
                'success':function(res){//成功的回调函数, res= {data:"开发者服务器返回的内容"}
                    alert("删除成功")
                }
            })
        })
    })

    function login1() {
        $.ajax({
            url: "{{ url_for('greet') }}",
            data: {name: 'jenny'},
            type: "POST",
            //dataType: "json",
            success: function(data) {
                // data = eval("(" + data+ ")");
                data = jQuery.parseJSON(data);  // dataType注释了, 故注意反序列化
                $("#ret").text(data.result);
            }
        });
    }
</script>

PHP

PHP(全称: Hypertext Preprocessor, 即 "超文本预处理器")是一种通用开源脚本语言, 在服务器上执行.

PHP 可以收集表单数据, 可以发送和接收 cookies, 可以添加、删除、修改数据库中的数据.

变更历史

最后更新于: 查看全部变更历史
  • docs: update docs

    于 2024/12/2
  • docs: update docs

    于 2024/11/19
  • 升级主题+整理文章格式

    于 2024/11/1
  • update

    于 2024/10/17
  • 新增文字+CRLF全部替换为LF

    于 2024/10/17
  • 升级theme版本, 增加面试题目模块

    于 2024/9/26
  • 给予文件夹顺序

    于 2024/9/24
  • 调整博客分类+修改about-me.md

    于 2024/9/24
  • first commit

    于 2024/9/20

Keep It Simple