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

  很多新手前端在出去学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我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哦!!)

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

时间: 2024-10-11 02:42:07

js与后台交互详述(入门篇)的相关文章

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

[three.js详解之一]入门篇 开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述thre

Ajax+Node.js前后端交互最佳入门实践(01)

1.Node.js简介 1.0.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首先,我们来看一张生活中几乎每个人都经历过的一个场景,如下图: 当你去餐馆吃饭的时候,坐下后服务员会带着一个菜单过来,问你需要点什么菜,这个时候你浏览了菜单上的菜,把想吃的菜告诉服务员,服务员把你点的菜拿到后台,后台根据你点的菜名,逐一完成,菜做完后叫服务员给你上菜,就这么一个场景其实和我们web开发

Ajax+Node.js前后端交互最佳入门实践(06)

6.XMLHttpRequest对象 XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能.它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新.这使得网页只更新一部分页面而不会打扰到用户.XMLHttpRequest 在 AJAX 中被大量使用. 6.1.创建XMLHttpRequest对象 6.1.1 XMLHttpRequest兼容性问题 XMLHttpRequest在ie6以下是以插件的形式来使用的,没有内置在浏览器中,所以在

Ajax+Node.js前后端交互最佳入门实践(04)

4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript的对象字面量表示法,但是它于语言却是无关的,这里说的无关意思是说没有依赖关系,不是说只有在js中才能用,再别的语言中也是可以用的. var student = { "name": '张三', "age": 29, "data":[1,2,3] };

Ajax+Node.js前后端交互最佳入门实践(07)

7.ajax函数封装 7.1.实例引入 需求: 每秒钟请求一次服务器 获取到数据 实现: 把ajax进行封装 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="ajax.js" type="text/javascript" charset="utf

关于js与后台交互时的跨域错误

报的错误是 No 'Access-Control-Allow-Origin' header is present on the requested resource.

Vue中使用Ajax与后台交互

一.下载依赖包 npm install --save axios 二.封装 ajax 请求模块 1. api/ajax.js /* ajax 请求函数模块 */ import axios from 'axios' export default function ajax (url = '', data = {}, type = 'GET') { return new Promise(function (resolve, reject) { let promise if (type === 'GE

python 微信开发入门篇-调用JS SDK 含微信支付(二)

本章节完成微信js sdk + 微信支付调用,项目基础部分请参照入门篇第一章:https://www.cnblogs.com/wangcongxing/p/11546780.html 1.微信服务号设置    登录服务号后台设置如下: 1.登录地址:https://mp.weixin.qq.com/ 2.设置-->公众号设置-->功能设置 设置后结果如下 2.微信商户后台设置 登录微信支付平台设置如下: 1.登录地址(因为需要安装exe插件, 设置浏览为兼容模式  建议使用QQ浏览器):htt

【精】【入门篇】js正则表达式

前言 最近有了点时间,就回头看了一下<学习正则表达式>这本书.怎么说呢,这本书适合从零开始学习正则表达式或者有一点基础但是想要加强这方面能力的读者.这本书的风格是“实践出真知”,使用归纳方式讲述, 也就是说, 会从特例讲起, 最终归结到一般情况.不会先陈述观点, 然后举例, 而是先为大家展示示例, 然后归纳出一般性结论.所以刚开始的话还是有点不习惯这种风格. 吐槽只是皮一下而已啦,这本是还是可以的,感兴趣的小伙伴不妨去看看,书本不厚,也就140页左右.[附上pdf] 正则表达式 1.为什么使用