我们上节课讲了一下JSP,大家掌握其中的思想就好了。至于JSP的更多知识,现在其实已经没有用了,因为直接使用JSP做web开发已经不会再有人用了。这是古代的编程知识。
关于服务端的知识,我们先暂停一下,从http协议的角度去学习一个前端知识。在前端技术中,有一个非常重要的技术,叫做 ajax。我们先展示一个 ajax 的例子,再去看一下这个技术的实质。
AJAX用例 在很多应用中,我们其实不想去刷新整个网页,比如,一个网页上有很多商品的图片列表,当我们把鼠标移上去,想在网页上弹出一个小框,框里显示了这个商品的详细情况。在这个场景中,我们其实不需要刷新整个网页。但是如何能再向服务端发请求,从而获得某个商品的详细情况呢?
这时候,就出现一种名为Ajax的技术。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的技术,在不重新加载整个页面的情况下,可以与服务端进行数据交互。
我们还是在 jetty 的 root 目录下,新建一个名为ajax.html的文件:
}
使用 AJAX 修改文本内容 change text 注意新建文件的时候,一定要保证文件的编码为UTF-8我们来分析一下,这个网页上的 javascript 代码是啥意思。在这个网页上有一个button,当点击这个 button 的时候,就会调用 loadXMLDoc。在这个方法里,创建了一个XMLHttpRequest,通过这个对象的open方法,访问了服务端的 ajax_info.txt,当数据返回的时候,就会调用一个匿名函数,来设置网页内容。注意看一下上面代码中的注释。
所以我们在服务端再创建一个名为 ajax_info.txt 的文件,文件内容可以随便填写。
点击了以后,就可以看到:
HTTP报文 我们看一下,使用AJAX的时候,浏览器到底干了啥:
GET /ajax_info.txt HTTP/1.1 Host: localhost:8080 Connection: keep-alive User-Agent: Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/56.0.2924.18Safari/537.36 Accept: / Referer: http://localhost:8080/ajax.html Accept-Encoding: gzip,deflate,sdch,br Accept-Language: zh-CN,zh;q=0.8 If-Modified-Since: Tue,29Aug201712:23:20GMT 嘿,原来还是一个普通的GET报文而已。所以这个东西仍然没有什么特别新的了不起的东西。让我们再串一遍这个过程。客户端收到一个普通的HTML文件,里面有一些javascript代码,这些代码会使得浏览器向服务端再发送一次GET报文,去请求服务端的数据。
机制就是这么个机制,但在这个机制之上,就可以玩出很多花了。比如,服务端其实是可以发送一个 json 给浏览器,浏览器怎么处理这个 json 可就是前端的事情了。浏览器拿到json以后,还可以在网上以各种方式显示出来,这就是客户端的自由了。
从这个角度来说,我们完全可以在一开始的时候只给客户端一张空白的网页,然后使用 ajax 技术从服务端再去拉取。服务端就可以减轻很多生成动态网页的压力。这就是最粗浅的前后端分离。我们把由服务端解释生成最终的 html 内容的方式称为后端渲染,把客户端生成网页的方式称为前端渲染。
我不是前端程序员,我们的课程也不是前端课程,但是做为后端,我们得知道一点儿前端程序员在做的是什么。 还有就是这我总结出了一些架构视频资料和互联网公司java程序员面试涉及到的绝大部分面试题和答案做成了文档和架构视频资料还有完整高清的java进阶架构学习思维导图免费分享给大家(包括Dubbo、Redis、Netty、zookeeper、Spring cloud、分布式、高并发等架构技术资料),希望能帮助到您面试前的复习且找到一个好的工作,也节省大家在网上搜索资料的时间来学习。 料领取方式:加群:374308445填写【 资料】即可免费获取!!! 如果您喜欢本文章,可以点击关注,每天将有更多精彩文章与您分享!