js与后台交互详述(入门篇) – bluebear

  很多新手前端在出去学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我js是如何与后台交互的,我简单的说一下。

  首先需要知道两个东西,一个是客户端,一个是服务器,客户端其实就是我们在上网时候使用的机器,大部分情况下这个客户端就是我们的电脑,包括台式电脑,笔记本电脑,手机,平板之类的。那么服务器是什么?服务器其实也是电脑,准确的说服务器是性能比较强大的电脑,正常情况下一台服务器可以连续半年甚至一年不关机,连续运行,这个技能我们家用电脑大多做不到。正是因为服务器可以保持长时间的运行,从而保证我们放在服务器上文件可以随时都被访问到.

  现在来看一下服务器和客户端之间的联系,这里就以网站为基础,通俗的解释一下。我们访问网站大多数使用的都是浏览器,通过在地址栏里面写下域名,按下回车就可以访问到我们想要访问的网站,那么这个具体的过程肯定不是那么简单,我们在地址栏中写下网址以后,按下回车,这个时候浏览器首先会访问自己所在的电脑上的host文件,查看host文件中是否记录有我们在地址栏中输入的域名,如果有,则找到与之对应的ip,访问去了。如果没有,它就要去到一个叫做dns的系统中,这个dns是存在于公网中的,他的作用就是保存许多域名和ip(真实的dns系统比这个复杂的多,这里只是方便理解简述一下),他找到dns以后,把域名告诉dns,让dns去查一下,看看有没有与之对应的ip,如果查到了,就会拿着ip去找那个网站去了!!这里说一下,ip实际上可以理解为地址,是我们存放程序时候标记的地址。域名只是为了帮助我们更好的记住,实际上真正要找到网站还是要靠ip。

  到此为止,我们已经找到了与这个ip对应的服务器,那么接下来解释两者互相对话啦,浏览器告诉服务器我要看首页,服务器回答好,然后把首页交给浏览器,去看吧!!这里我打了一个比方,事实上这个过程都是建立在网络通讯协议上的,其中有一个最常用的就是http协议,浏览器与服务器之间一切交流都是建立在这个协议之上的,这里我简单的讲一下这个协议吧,http协议分为两部分,分别是请求部分和响应部分,请求部分是又浏览器发出的,服务器接受到以后读取协议内容,然后发出响应,浏览器接受到响应的内容,并把它展示到电脑上。http协议中的请求部分分为请求行,请求头信息,请求消息体三部分,请求行包括我们想要访问的域名,协议等级,请求消息头包括具体访问的文件,连接长度,浏览器内核信息等,消息体则是浏览器发送给服务器上的具体数据,这个数据只有在发送方式为post的情况才会出现在消息头上,如果是get方式,则出现在地址栏中。服务器收到相关请求以后,开始分析具体要干什么,然后去执行,执行完成以后吧数据全部返回,相应部分就不详细说明了。

  还要注意一件事情,那就是服务器收到请求以后做的事情是如何完成的,我以PHP程序为例。假如服务器收到请求需要访问网站首页,那么首先就会去调取后台对应的首页文件,然后开始解析这个文件,解析的过程中,PHP就发挥作用了,比如说,页面中的数据都是依靠它来进去读取的,假如首页中有一块地方需要展示出今天的最新新闻,那么PHP就会调用相关程序,然后去访问数据库,把对应的数据从数据库中取出来,然后展示到页面中,以此类推,其他的的数据都是这样搞出来的。当然了,PHP还会做很多其他事情啊,比如判断登录状态,检测ip之类的,最后当PHP把所有要做的事情都做完以后,最后就是把处理好的文件返回给浏览器了,这里注意一下,服务返回给浏览器的其实就是已经生成好的静态页面了,里面没有一行后台代码,浏览器接收到这个返回到数据,然后开始逐行解析,最后展示给我们看。

  以上就是前后台交互流程。至于Js与后台交互,说白了,就是依靠js像后台发送数据,然后接受服务器返回的数据就是了。这里要说到一个技术就是ajax,其实整体的流程都是一样的,我们通过js的事件触发ajax,像服务器发送相关数据,服务器得到数据,处理完成以后返回给我们对应的数据,js可以获取到这个数据,然后该怎么处理就怎么处理,这个和我们上面说的流程基本一样,区别就是通过 js发送请求可以达到无刷新的效果,正常我们访问一个页面,服务器都是整个页面的返回给我们,如果是通过ajax的话,只会返回我们想要的数据,这样,是不会刷新页面的,加快了速度,减少流量的浪费,还有很多好处的,不多说了。(如果不了解ajax,那么可能需要首先学习下ajax哦!!)

  这篇文章没有一句代码,说的也不是很专业,只能作为入门来了解,有问题的地方,请大家多多指教!

本文链接:js与后台交互详述(入门篇),转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量