很多新手前端在初期学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我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与后台交互详述(入门篇)的更多相关文章

  1. 【three.js详解之一】入门篇

    [three.js详解之一]入门篇   开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...

  2. IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题

    IT咨询顾问:一次吐血的项目救火   年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登 ...

  3. 前端向后台的华丽转身 — PHP入门篇

    三个月就这么悄悄溜走了,本K对于前端虽然有了一定的认识,但对一些方面还是处于一种比较萌币的状态,就在这种萌币状态下,本K又跟着大神浩开始了后台语言-PHP语言的学习.PHP的学习对于学过其他语言的人来 ...

  4. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  5. web前端开发分享-css,js入门篇(转)

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

  6. 【转】three.js详解之入门篇

    原文链接:https://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html   开场白 webGL可以让我们在canvas上实现3D效 ...

  7. web前端开发分享-css,js入门篇

    学习没有捷径,但学习是有技巧与方法.   一,css入门篇:   推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...

  8. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  9. JS基础入门篇(三十五)—面向对象(二)

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

随机推荐

  1. [JSOI2008]最大数maxnumber

    [JSOI2008]最大数maxnumber 标签: 线段树 单独队列 题目链接 题解 线段树裸题. 如果一直RE可能是你用的cin/cout. Code #include<cstdio> ...

  2. CENTOS6.6下zabbix2.4.7搭建

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 安装依赖 安装Perl .apr / apr-util yum -y ...

  3. esxi 改变虚拟机磁盘格式为精简存储

    最近在部署虚拟机,导入几个之前保存的ovf模板,发现存储已经被耗费的差不多了.检查了下磁盘存储格式 存储类型是 后置备延迟置零 占用空间 简单了解下 三种存储类型 1.厚置备延迟置零: 默认的创建格式 ...

  4. Spring实现无需注解实现自动注入

    xml配置 过程:设置自动装配的包-->使用include-filter过滤type选择为regex为正则表达式-->expression是表达是式也就是限制条件 <?xml ver ...

  5. 机器学习实战 之 KNN算法

    现在 机器学习 这么火,小编也忍不住想学习一把.注意,小编是零基础哦. 所以,第一步,推荐买一本机器学习的书,我选的是Peter harrigton 的<机器学习实战>.这本书是基于pyt ...

  6. Create小程序

    我有时候喜欢直接用命令行创建.编译.执行java文件, 每次创建一个文件都要新建一个.java文件,然后再编辑.java文件加入类名,主函数…… 这些流程我有点厌倦,于是就编写了一个超级简单的自动创建 ...

  7. javascript正则表达式的一些笔记

    正则表达式:Regular Expression.使用单个字符串来描述,匹配一系列符合某个句法规则的字符串.即按照某种规则去匹配符合条件的字符串.正则表达式就是规则. \b 单词边界 regexp对象 ...

  8. 1014. Waiting in Line (模拟)

    n个窗口就有n个队列,模拟这n个队列就可以了.需要注意的是,一个人在选择排队窗口的时候,他会选择排队人数最少的窗口,如果存在多个窗口排队的人数相同,那么他会选择编码最小的窗口. Note that s ...

  9. filebeat -> logstash -> elasticsearch -> kibana ELK 日志收集搭建

    Filebeat 安装参考 http://blog.csdn.net/kk185800961/article/details/54579376 elasticsearch 安装参考http://blo ...

  10. vue项目中遇到的问题

    在 export defaul new Router({ )} 这个路由配置中一定要加mode : 'history' 否者就会在路由前面默认添加# 路由跳转的几种方式: 在VUE中使用less来编译 ...