服务器端呈现与客户端呈现以及网站在角度之前如何工作

时间:2016-02-27 10:54:22

标签: javascript php angularjs web

我对整个网络应用程序以及网站世界都是新手,但我开始使用角度编程和构建自己的网络,我对客户端渲染的想法感到非常自在,并且在角度中使用AJAX ($ HTTP / $ RESOURCE),但我没有使用"遗产"建立网站,因为我听起来像是最好的新网站!

但是当我知道我的道路上有很多障碍因为传统网站技术缺乏知识以及所有的发展方式,我想知道网站是如何开始的,以及对这个世界有什么吸引力,以及服务器端渲染如何工作,因为据我了解所有这一切,就是这么简单我有模板,而侧客户端的JS做所有的操作,添加/删除div等,并且没有任何连接到服务器端关于渲染DOMS,只能通过使用http或资源来获取信息..我想知道php服务器端是如何工作的。

2 个答案:

答案 0 :(得分:8)

渲染有两种不同的含义,这可能会让你感到困惑。

Angular可以拍摄一张' raw'信息和'渲染'显示该数据所需的DOM元素。例如,数据可以是JavaScript对象,可以从某个API获取JSON对象。

在服务器与客户端上呈现

在更传统的方法中,HTML代码会预先呈现'从服务器。这意味着服务器包含静态HTML(只是您可以在记事本中键入的HTML文件),或者像PHP这样的服务器端脚本,它将“#34;渲染”#34;包含所有数据的HTML代码。服务器返回此HTML源代码,浏览器只是"呈现"它

所以"在服务器上呈现" 意味着获取模板和数据并将它们组合成原始源代码。 "在客户端上呈现" 传统上意味着获取HTML源代码并将其显示在屏幕上。 Angular使用第三种变体,这意味着对"渲染" 数据进行DOM操作。但我稍后会谈到这一点。

因此,服务器端呈现并不意味着(现在或以前)实际显示(您查看的页面)在服务器上呈现。甚至DOM都不在服务器上呈现。服务器只是从它获取的数据中呈现文本HTML源代码,而客户端(浏览器本身)仍然生成DOM并对页面进行图形呈现。

因此,PHP也不会直接响应按钮点击。它只响应HTTP请求,HTTP请求可以来自输入的URL,正在访问的链接,发布的表单或正在执行的AJAX请求。

HTML具有内置行为

传统HTML具有内置行为,这就是为什么它可以在没有任何客户端脚本的情况下工作的原因。由于脚本,普通超链接不可点击,但因为浏览器知道此元素及其意图。因此,从一个页面跳到另一个页面的逻辑内置于浏览器本身。形式也是如此。浏览器知道单击提交按钮时应将表单数据发送到服务器。您在HTML中所做的就是定义(在表单属性中)URL是什么,方法以及按下哪个按钮来发送信息。同样,不需要编写脚本。

客户端JavaScript可以操作已加载的页面

客户端流程实际上是一个两步流程。首先,解析HTML源代码并将其转换为DOM文档,即包含有关元素信息的内存中对象列表。 然后在屏幕上呈现(显示)该文档。

JavaScript(包括jQuery或Angular)也可以使用这些内存中的对象。它可以将事件绑定到它们,因此您可以在发送之前验证表单输入(节省执行往返的时间,服务器端检查和解析完整的响应页面),或响应对任何元素的单击。您甚至可以通过更改内容,外观,删除或添加新内容来操纵对象。

所以JavaScript的方法似乎介于两者之间。您不必实际绘制所需的更改,但您也不必依赖HTML加载。您可以直接访问对象,并且您对它们所做的任何更改都会自动反映在浏览器的显示屏上。因此,您可以插入一个额外的元素对象,它将自动显示在屏幕上。

这就是使JavaScript如此快速和强大的原因。这种方法比从服务器加载大量HTML更直接。所以在过去,你可以从一个页面跳到另一个页面,整个页面需要重新加载和重新渲染。使用JavaScript,您可以进行小型交互,使用AJAX,您可以从外部源获取信息,并在页面上显示 信息,而无需重新加载整个页面。

NB。顺便说一下AJAX也不是很新。它是微软多年前发明的,用于构建基于Web的丰富Outlook版本。 AJAX中的X代表XML,现在它被JSON取代,作为传达这些信息的选择符号。

Angular'隐藏'这个DOM操作

Angular只是一个抽象JavaScript可以做的所有DOM操作的框架。它允许您在HTML中放置标记,并在JavaScript中操作对象数据,它会自动将这些标记放在一起以更新页面。这样可以更轻松地在高级别上构建Web应用程序。您只需要担心设计和数据,并且将它们组合在一起的大部分技术性都被取消了。

除此之外,Angular并不比JavaScript DOM操作的任何其他方式更多。它只会让您弄乱当前加载的文档,这是服务器端脚本无法执行的操作。

但是,在大多数情况下,服务器(和服务器端脚本)仍然起着重要作用。这个服务器端进程现在正在呈现' Angular应用程序提取的JSON数据。当然,除非您有一些应用程序不需要从其他地方加载任何其他数据。

答案 1 :(得分:0)

html是为在网络上共享链接文档而发明的。这一切都始于存储在服务器上的静态文本,并传送到浏览器呈现的客户端。

然后,html文本是使用服务器上的程序/模板动态生成的(PHP,JSP,e.t.c)。 Javascript做了动画和一些小客户端编程(dom操作)。

然后在服务器上生成用于操作dom的Javascript,该Javascript被传递到客户端并构建文档客户端。