JavaScript，jQuery与Ajax的关系

首先让我们来看看它们分别是什么：

1、（JavaScript）JS是一门前端语言。

2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。

3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

AJAX即原生的XMLHttpRequest可以返回binary、text、xml格式的数据，经过封装的ajax库可以使用json格式。

Jquery是一个优秀的Javascript库。兼容各种浏览器使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。
两者其实不能作对比，一个是技术，一个是JS库的名称。

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。。

能做什么：

JavaScript

用JavaScript可以做很多事情，使网页更具交互性，给站点的用户提供更好,更令人兴奋的体验。
JavaScript使你可以创建活跃的用户界面，当用户在页面间导航时向他们反馈。
使用JavaScript来确保用户以表单形式输入有效的信息，这可以节省你的业务时间和开支。
使用JavaScript，根据用户的操作可以创建定制的HTML页面。
JavaScript还可以处理表单，设置cookie，即时构建HTML页面以及创建基于Web的应用程序。

特点：

1、解释性：javascript是一种解释语言，源代码不需要经过编译，直接在浏览器上运行时被解释。

2、基于对象：javascripth是一种基于对象的语言，能运用自己已经创建了的对象，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、事件驱动：JavaScript可以直接对用户或客户输入做出响应，无需经过web服务程序。他对用户的响应，是以事件驱动的方式进行的，所谓事件驱动，指的是在主页执行了某种操作所产生的动作，此动作称为“事件”。

4、跨平台：JavaScript依赖于浏览器本身，与操作环境无关。只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。

5、安全性：JavaScript是一种安全性语言。它不允许访问本地的磁盘，并不能将数据存入服务器上；不允许对网络文本进行修改和删除，只能通过浏览器实现信息浏览或动态交互。可有效的防止数据丢失。

能做什么：

jQuery

1.方便快捷获取DOM元素 (如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码，而使用jQuery只需要一行代码就足够了。例如，找到所有应用了.content class样式的div中所有的P标签，只需要下面的一行代码)

1 $('div.content').find('p');

2.动态修改页面样式 (使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如，找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式，代码如下)

1 $('ul > li:first').addClass('active');

3.动态改变DOM内容 (使用jQuery我们可以很容易地对页面DOM进行修改，例如，为ID为"container"的元素添加一个链接)

1 $('#container').append('<a href="more.html">more</a>');

4.响应用户的呼叫操作 (jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性)

1   $('button.show-details').click(function() {
2   $('div.details').show();
3   } );

5.微页面添加动态效果 (jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利)

1.            $(function () {
2             $("#btnShow").click(function () {
3                 $("#msubject").hide("slow");
4             });
5             });

6.统一ajax操作 (jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发)

1.   function (data, type) {
2     // 对Ajax返回的原始数据进行预处理
3     return data  // 返回处理后的数据
4     }

7.简化常见的JavaScript任务 (除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等))

1  $.each(obj, function(key, value) {
2   total += value;
3  });

特点：

1.强大的选中器，css选择器，伪类选择器

2.大量的APl函数，简化DOM操做

3. 链式操作（方法）

Ajax

能做什么：

1.可以在不刷新页面的情况和服务器通信 (异步交互，就是只有当用户操作到了那个模块才会有数据交换，实现局部刷新数据 , 用户体验更好，只加载用户操作的模块，不用等整个页面加载完。就像淘宝的首页，你不往下滚动，下面的内容是永远不会加载的，往下滚动的时候，网速不是特别快的时候你就能看见数据加载了，那个就是AJAX技术了)

2.可以用来使静态网站访问后台数据库,也可以做无刷新页面表单提交

特点：

1.局部刷新，具有更好的用户体验

2.ajax只需要产地少量的数据，具有更高的执行效率

三者的关系

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

JavaScript，jQuery与Ajax的关系

猜你喜欢