码迷,mamicode.com
首页 > 编程语言 > 详细

浅谈JavaScript、jQuery、AJAX、JSON 这四个之间的关系

时间:2018-09-20 21:20:29      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:解决   ntb   影响   数据   允许   带来   函数   nod   put   

1. JavaScript

JavaScript(简称js)是一种主要运行于浏览器中的弱类型的动态脚本语言,可以用来实现网页上的一些高级功能,
如数据验证处理、页面动态效果、定时任务、与用户交互、发送/接收服务器端数据等等。

① js中的变量在声明的时候不需要指定类型,其实际类型由程序运行中的赋值决定,
② 函数可变。js允许在运行过程中使用eval动态执行字符串里的命令,也可以通过new Function等方式由字符串动态构造函数
③ 函数可以被创建、修改、删除,可以从已有函数构造出新函数
④ 对象的成员可代变,可以动态添加、删除成员属性或成员方法。

弱类型指的是js中的变量在参与运算的时候可以根据实际需要动态转换类型。
js也可以在浏览器之外的其他场合使用,如服务器端的Node.js、java的Rhino、无界面浏览器PhantomJS等。

2. jQuery

jQuery是js的一个工具库,由John Resig在2006年发布。
j代表JavaScript,query是“查询”的意思。也就是说,这个库的意图是基于JavaScript的查询。查询的目标是什么?答案是DOM(文档对象模型)结构中的Node(节点)。一个网页就是一个html文档,而网页上的所有内容都是节点,包括文档节点、元素节点、文本节点、注释节点、属性节点等等。而jQuery的查询最主要针对的是元素节点,如段落(p)、锚点(a)、表格(table)等,同时jQuery还可以用attr方法方便地对元素节点的属性进行读取/设置。

在jQuery出现之前,在js程序中获取元素节点比较麻烦,例如获取id为elem1的节点:
document.getElementById(‘elem1‘)
或者是获取页面上的所有checkbox元素,首先需要获取input类型的元素:
document.getElementsByTagName(‘input‘)
然后对获得的元素列表进行for循环处理,逐个判断其类型是否为checkbox。
如果有更多元化的查询要求,则对应的js代码也会相当复杂。虽然有一些库可以解决这方面的需求,但强大程度、易用性等方面都不太理想。John Resig发现了一个盲点——css样式应用到页面上的元素时,是有一套规则的,即css选择器,浏览器可以通过css选择器找到匹配的元素并将指定的样式应用到这些元素上。也就是说,通过css选择器可以有效地进行元素查找定位,但它最初只被用于样式领域。

于是,John Resig根据css选择器编写了jQuery选择器,并对选择器的规则进行了扩充,从而让元素查找变得非常方便。
例如,上面2个例子用jQuery可以写为:
$(‘#elem1‘)

$(":checkbox")
同时,jQuery还有一个核心思想——链式操作,例如:
$(‘div.con‘)
.height(100)
.show();
这样的连续调用可以让代码书写更加简洁,也就是jQuery自己的口号:写的更少,做的更多此外,jQuery还提供了浏览器兼容、样式读写、事件绑定与执行、动画等特性,后来又加入了ajax、promise等,再加上方便的插件编写机制,对整个js的生态圈产生了重大的影响,可以说是js历史上影响力最大的一个库。

3. ajax

ajax全称Asynchronous JavaScript and XML(异步的JavaScript与XML),是网页无需刷新页面、使用js与服务器进行交互的一种技术。

有时候会有这样一种需求:只希望更改页面上的一个区域。然而在从前的技术框架内只能刷新整个页面,带来的后果是:
①需要重新传输整个页面,服务器端与客户端的流量消耗都会比较大;
②如果是动态页,服务器端需要重新生成整个页面,即使是那些客户原本不想要刷新的区域,增大了服务器的负担。ajax的基本流程可以概括为:页面上js脚本实例化一个XMLHttpRequest对象,设置好服务器端的url、必要的查询参数、回调函数之后,向服务器发出请求,服务器在处理请求之后将处理结果返回给页面,触发事先绑定的回调函数。这样,页面脚本如果想要改变一个区域的内容,只需要通过ajax向服务器获取与该区域有关的少量数据,在回调函数中将该区域的内容替换掉即可,不需要刷新整个页面。

XMLHttpRequest在发送请求的时候,有两种方式:同步与异步。同步方式是请求发出后,一直到收到服务器返回的数据为止,浏览器进程被阻塞,页面上什么事也做不了。而异步方式则不会阻塞浏览器进程,在服务端返回数据并触发回调函数之前,用户依然可以在该页面上进行其他操作。ajax的核心是异步方式,而同步方式只有在极其特殊的情况下才会被用到。

XMLHttpRequest在早期IE浏览器里是使用ActiveX来实现的,并不是浏览器自身的对象。
后来其他各家浏览器也都实现了XMLHttpRequest对象,而高版本IE也把XMLHttpRequest改为了浏览器的内建对象。

4. JSON

JSON全称JavaScript Object Notation(js对象标记法),从名称上就可以看出来,JSON是基于JavaScript的,是JavaScript的一个子集。JSON是用JavaScript语法来表示数据的一种轻量级语言。

从ajax的命名中我们就可以看到,数据交换是通过XML格式进行的。在ajax刚出现的时候,绝大多数应用都是采用XML格式,
也有少数使用纯文本的。但是XML格式有一个缺点,就是文档构造复杂,需要传输比较多的字节数。在这种情况下,JSON的轻便性逐渐得到重视,
后来替代XML成为ajax最主要的数据传输格式。可以举个简单的例子感受一下二者的区别:
<!--XML-->
<?xml version="1.0" encoding="utf-8"?>
<root>
<article>
  <title>Article Title1</title>
  <content>content1</content>
</article>
<article>
  <title>Article Title2</title>
  <content>content2</content>
</article>
</root>
<!--JSON-->
{
"article" : [
  {
  "title": "Article Title1",
  "content": "content1"
  },
  {
  "title": "Article Title2",
  "content": "content2"
  }
 ]
}
XML规范实际上是比较复杂的,单纯作为数据传输来说它太重了。

浅谈JavaScript、jQuery、AJAX、JSON 这四个之间的关系

标签:解决   ntb   影响   数据   允许   带来   函数   nod   put   

原文地址:https://www.cnblogs.com/MJ1234/p/9683076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!