JS里AJAX的使用--(服务器与客户端数据交换)

JavaScript021

JS里AJAX的使用--(服务器与客户端数据交换),第1张

使用ajax需要先了解计算机前后端的通信原理,也就是需要了解我们的服务器与客户端数据是如何交换的。

DNS的查询过程:(以访问www.qq.com为例)

1、在浏览器中输入www.qq.com域名,操作系统会先检查自己 本地的hosts文件 是否有这个网址映射关系,如果有,就先调用这个IP地址映射,完成域名解析。

2、如果hosts里没有这个域名的映射,则查找 本地DNS解析器缓存 ,是否有这个网址映射关系,如果有,直接返回,完成域名解析。

3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系,首先会找TCP/IP参数中设置的首选DNS服务器,在此我们叫它 本地DNS服务器 ,此服务器收到查询时,如果要查询的域名,包含在本地配置区域资源中,则返回解析结果给客户机,完成域名解析,此解析具有权威性。

4、如果要查询的域名,不由本地DNS服务器区域解析,但该 服务器 已 缓存 了此网址映射关系,则调用这个IP地址映射,完成域名解析,此解析不具有权威性。

5、如果本地DNS服务器本地区域文件与缓存解析都失效,则根据本地DNS服务器的设置(是否设置转发器)进行查询,如果未用转发模式,本地DNS就把请求发至 根DNS ,根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理,并会返回一个负责该 顶级域名服务器 的一个IP。本地DNS服务器收到IP信息后,将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后,如果自己无法解析,它就会找一个管理.com域的下一级DNS服务器地址(qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后,就会找qq.com域服务器,重复上面的动作,进行查询,直至找到www.qq.com主机。

端口号

端口号---具有网络功能的应用软件的标识号。注意,端口号是不固定的,即可以由用户手工可以分配(当然,一般在软件编写时就已经定义)。当然,有很多应用软件有公认的默认的端口,比如FTP:20和21,HTTP:80,TELNET:23等等,这里就不一一列举了。一个软件可以拥有多个端口号,这证明这个软件拥有不止一个网络功能。

0-1023是公认端口号,即已经公认定义或为将要公认定义的软件保留的,而1024-65535是并没有公共定义的端口号,用户可以自己定义这些端口的作用。

那么端口号到底有什么作用呢?请大家继续往下看。

当一台电脑启动了一个可以让远程其他电脑访问的程序,那么它就要开启至少一个端口号来让外界访问。我们可以把没有开启端口号的电脑看作是一个密封的房间,密封的房间当然不可能接受外界的访问,所以当系统开启了一个可以让外界访问的程序后它自然需要在房间上开一个窗口来接受来自外界的访问,这个窗口就是端口。

那么为什么要给端口编号来区分它们呢,既然一个程序开了一个端口,那么不是外部信息都可以通过这个开启的端口来访问了吗?答案是不可以。为什么呢?因为数据是用端口号来通知传输层协议送给哪个软件来处理的,数据是没有智慧的,如果很多的程序共用一个端口来接受数据的话,那么当外界的一个数据包送来后传输层就不知道该送给哪一个软件来处理,这样势必将导致混乱。

上一次提到提到在一个经过OSI第四层传输层封装的数据段的第四层报头里包含两个端口号,既源端口号和目的端口号,目的端口号的作用上面已经介绍了,下面让我们了解一下原端口号吧。

源端口号一般是由系统自己动态生成的一个从1024-65535的号码,当一台计算机A通过网络访问计算机B时,如果它需要对方返回数据的话,它也会随机创建一个大于1023的端口,告诉B返回数据时把数据送到自己的哪个端口,然后软件开始侦听这个端口,等待数据返回。而B收到数据后会读取数据包的源端口号和目的端口号,然后记录下来,当软件创建了要返回的数据后就把原来数据包中的原端口号作为目的端口号,而把自己的端口号作为原端口号,也就是说把收到的数据包中的原和目的反过来,然后再送回A,A再重复这个过程如此反复直到数据传输完成。当数据全部传输完A就把源端口释放出来,所以同一个软件每次传输数据时不一定是同一个源端口号.

端口分类 逻辑意义上的端口有多种分类标准,下面将介绍两种常见的分类:

1、 按端口号分布划分

(1)知名端口(Well-Known Ports)

知名端口即众所周知的端口号,范围从0到1023,这些端口号一般固定分配给一些服务。比如21端口分配给FTP服务,25端口分配给SMTP(简单邮件传输协议)服务,80端口分配给HTTP服务,135端口分配给RPC(远程过程调用)服务等等。

(2)动态端口(Dynamic Ports)

动态端口的范围从1024到65535,这些端口号一般不固定分配给某个服务,也就是说许多服务都可以使用这些端口。只要运行的程序向系统提出访问网络的申请,那么系统就可以从这些端口号中分配一个供该程序使用。比如1024端口就是分配给第一个向系统发出申请的程序。在关闭程序进程后,就会释放所占用的端口号。

不过,动态端口也常常被病毒木马程序所利用,如冰河默认连接端口是7626、WAY 2.4是8011、Netspy 3.0是7306、YAI病毒是1024等等。

2、按协议类型划分

按协议类型划分,可以分为TCP、UDP、IP和ICMP(Internet控制消息协议)等端口。下面主要介绍TCP和UDP端口:

(1)TCP端口

TCP端口,即传输控制协议端口,需要在客户端和服务器之间建立连接,这样可以提供可靠的数据传输。常见的包括FTP服务的21端口,Telnet服务的23端口,SMTP服务的25端口,以及HTTP服务的80端口等等。

(2)UDP端口

UDP端口,即用户数据包协议端口,无需在客户端和服务器之间建立连接,安全性得不到保障。常见的有DNS服务的53端口,SNMP(简单网络管理协议)服务的161端口,QQ使用的8000和4000端口等等。

常用的端口号

【21端口】

21端口主要用于FTP(File Transfer Protocol,文件传输协议)服务。

【23端口】

23端口主要用于Telnet(远程登录)服务,是Internet上普遍采用的登录和仿真程序。

【25端口】

25端口为SMTP(Simple Mail Transfer Protocol,简单邮件传输协议)服务器所开放,主要用于发送邮件,如今绝大多数邮件服务器都使用该协议。

【53端口】

53端口为DNS(Domain Name Server,域名服务器)服务器所开放,主要用于域名解析,DNS服务在NT系统中使用的最为广泛。

【69端口】

TFTP是Cisco公司开发的一个简单文件传输协议,类似于FTP。

【80端口】

80端口是为HTTP(HyperText Transport Protocol,超文本传输协议)开放的,这是上网冲浪使用最多的协议,主要用于在WWW(World Wide Web,万维网)服务上传输信息的协议。

【443 端口】

服务:Https

说明:网页浏览端口,能提供加密和通过安全端口传输的另一种HTTP。

【109、110端口】

109端口是为POP2(Post Office Protocol Version 2,邮局协议2)服务开放的。

110端口是为POP3(邮件协议3)服务开放的,POP2、POP3都是主要用于接收邮件的。

使用ajax请求本地md文件

注意1,如果是POST请求,要设置请求头,因为xhr ajax默认content-type是text/plain,而一般ajax请求或者表单的content-type是application/x-www-form-urlencoded,要注意后端可以解析的content-type格式

关于ajax content-type详细内容看这里 传送门

注意2,XMLHttpRequest在IE8以下不兼容,IE8以下使用ajax的方法是ActiveXObject('Microsoft.XMLHttp'),所以可以做一下兼容:

当然也可以用try-catch

执行结果是:

在JavaScript中解析markdown需要用到一些js解析库,目前比较流行的是marked.js和showdown.js 二者比较

根据github上的star和bootcdn上的使用情况,选择marked作为解析库

解析结果:(红色部分是引用,也就是md语法">")

结果显而易见,没有样式

所以接下来要布置一下md渲染的样式,这里采用 github-markdown-css ,同时将展示md内容的标签附上样式class="markdown-body",渲染结果如下:

经过上面三步,已经可以成功请求到本地的markdown文件。回过头来看整个过程,觉得xhr ajax请求应该封装成一个外部函数来调用。

今天小编要跟大家分享的文章是关于学习Web前端要知道的JavaScript、Ajax、jQuery知识。今天小编将详细解读JavaScript、ajax、jQuery是什么?他们可以实现什么?想要学习Web前端的小伙伴们来和小编一起看一看吧!

1、JavaScript

·___ㄒ澹

javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能(其编写的程序可以被嵌入到HTML或XML页面中,并直接在浏览器中解释执行)。

·___槌刹糠郑

核心(ECMAScript)、文档对象模型(DocumentObjectModel,简称DOM)、浏览器对象模型(BrowserObjectModel,简称BOM)

·___枋觯

Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言,如今越来越广泛地使用于Internet网页制作上。

Javascript是由Netscape公司开发的一种脚本语言(scripting

language),或者称为描述语言。在HTML基础上,使用Javascript可以开发交互式Web网页。

Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。

Javascript短小精悍,又是在客户机上执行的,大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。

主流的javaScript框架有:YUI,Dojo,Prototype,jQuery...

2、AJax

·___ㄒ澹

AJAX即“AsynchronousJavaScriptandXML”(异步JavaScript和XML),AJAX并非缩写词,而是由JesseJamesGaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。

_JAX不是一个技术,它实际上是几种技术,每种技术都有其独特之处,合在一起就成了一个功能强大的新技术。

·___槌桑

基于XHTML和CSS标准的表示;

使用Document

ObjectModel进行动态显示和交互;

使用XML和XSLT做数据交互和操作;

使用XML

HttpRequest与服务器进行异步通信;

使用JavaScript绑定一切。

·___枋觯

Ajax是结合了Java技术、XML以及JavaScript等编程技术,可以让开发人员构建基于Java技术的Web应用,并打破了使用页面重载的管理。

Ajax技术使用非同步的HTTP请求,在Browser和WebServer之间传递数据,使Browser只更新部分网页内容而不重新载入整个网页。

Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

3、jQuery

·___ㄒ澹

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML

documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

·___氐悖

轻量级、链式语法、CSS1-3选择器、跨浏览器、简单、易扩展;

jQuery是一种独立于服务器端代码的框架,独立于ASP.NET或者JAVA;

jQuery是当前很流行的一个JavaScript框架,使用类似于CSS的选择器,可以方便的操作HTML元素,拥有很好的可扩展性,拥有不少插件。

·___枋觯

对于程序员来说,简化javascript和ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。

对于用户来说,改善了页面的视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。javaScript框架实际上是一系列工具和函数。

4、三者的关系

下面我用一张导图来阐述这三者的关系:

解释:

javaScript是用于Web客户端开发的脚本语言,Ajax是基于JS语言,主要组合JS、CSS、XML三种技术的新技术,是用于创建交互式网页应用的网页开发技术。jQuery是JS的框架,基于JS语言,集合Ajax技术开发出来的JS库,封装JS和Ajax的功能,提供函数接口,大大简化了Ajax,JS的操作。

以上就是小编今天为大家分享的关于学习Web前端要知道的JavaScript、Ajax、jQuery知识的文章,希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利,成为一名优秀的Web前端工程师!

原文链接:#/u/155352/blog/789347

SHAPE\*MERGEFORMAT

SHAPE\*MERGEFORMAT