JavaScript、Ajax与jQuery的关系

Dear 丶 2022-09-27 03:59 217阅读 0赞

>   
> 
> 
> **一、简要概括：**
> 
>      （1）JS是一种用于Web客户端开发的**脚本语言**。
> 
>      （2）Ajax是一种编程**技术**，主要用途是提供**异步刷新**（只刷新页面的局部），使客户端与服务器间的数据交换只发生在局部页面文档。
> 
>      （3）jQuery是JavaScript的一个**框架**，基于JavaScript语言，集合Ajax技术开发出来的JS库，**封装JS和Ajax**的功能，**提供函数接口**，大大简化了Ajax，JS的操作。
> 
> **二、三者关系**
> 
> **![20170307082756394][]**  
> 
> 
> **解释：**
> 
>      1）JavaScript是用于Web客户端开发的脚本语言。
> 
>      2）Ajax是基于JS语言，主要组合JS、CSS、XML三种技术的新技术，是用于创建交互式网页应用的网页开发技术。
> 
>      3）jQuery是JS的框架，基于JS语言，集合Ajax技术开发出来的JS库，封装JS和Ajax的功能，提供函数接口，大大简化了Ajax，JS的操作。
> 
> **三、基本认识**
> 
> **1. JavaScript**
> 
> **          定义：**
> 
>         JavaScript的简写形式就是JS，是由Netscape公司开发的一种脚本语言，一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能（其编写的程序可以被嵌入到HTML或XML页面中，并直接在浏览器中解释执行）。
> 
> **         组成部分：**
> 
>      核心（ECMAScript）、文档对象模型（DocumentObject Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）
> 
> ![20170307082739815][]  
> 
> 
>          **描述：**
> 
>          JavaScript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。
> 
> JavaScript是由 Netscape公司开发的一种脚本语言（scriptinglanguage），或者称为描述语言。在HTML基础上，使用JavaScript可以开发交互式Web网页。
> 
> JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。
> 
>         JavaScript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
> 
>         主流的JavaScript框架有：YUI，Dojo，Prototype，jQuery，...
> 
> **        JavaScript可以做什么？**
> 
>         用JavaScript可以做很多事情，使网页更具交互性，给站点的用户提供更好,更令人兴奋的体验。JavaScript使你可以创建活跃的用户界面，当用户在页面间导航时向他们反馈。
> 
>         JavaScript来确保用户以表单形式输入有效的信息，这可以节省你的业务时间和开支。
> 
>         使用JavaScript，根据用户的操作可以创建定制的HTML页面。
> 
>         JavaScript还可以处理表单，设置cookie，即时构建HTML页面以及创建基于Web的应用程序。
> 
> **       JavaScript不能做什么？**
> 
>        JavaScript是一种客户端语言。（实际上，也存有服务器端实现的JavaScript版本）。也就是说，设计它的目的是在用户的机器上执行任务，而不是在服务器上。因此，JavaScript有一些固有的限制，这些限制主要出于如下**安全原因：**
> 
>        （1） JavaScript不允许读写客户机器上的文件。这是有好处的，因为你肯定不希望网页能够读取自己硬盘上的文件，或者能够将病毒写入硬盘，或者能够操作你的计算机上的文件。唯一例外是，JavaScript可以写到浏览器的cookie文件，但是也有一些限制。
> 
>       （2）JavaScript不允许写服务器机器上的文件。尽管写服务器上的文件在许多方面是很方便的（比如存储页面点击数或用户填写表单的数据），但是JavaScript不允许这么做。相反，需要用服务器上的一个程序处理和存储这些数据。这个程序可以是Perl或者PHP等语言编写的CGI运行在服务器上的程序或者Java程序
> 
>        （3）JavaScript不能关闭不是它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器。
> 
>        （4）JavaScript不能从来自另一个服务器的已经打开的网页中读取信息。换句话说，网页不能读取已经打开的其它窗口中的信息，因此无法探查访问这个站点冲浪者还在访问其它哪些站点。
> 
>  
> 
> **2．Ajax**
> 
> **      定义：**
> 
>       AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett 创造的名词，是指一种创建交互式网页应用的网页开发技术。
> 
>      AJAX不是一个技术，它实际上**是几种技术**，每种技术都有其独特之处，合在一起就成了一个功能强大的新技术。
> 
> **     组成：**
> 
>     基于XHTML和CSS标准的表示；
> 
>           使用Document ObjectModel进行动态显示和交互；
> 
>           使用XML和XSLT做数据交互和操作；
> 
>           使用XMLHttpRequest与服务器进行异步通信；
> 
>      使用JavaScript绑定一切。
> 
> **    描述：**
> 
>           Ajax是结合了**Java**技术、**XML**以及**JavaScript**等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的管理。
> 
>           Ajax技术使用非同步的HTTP请求，在Browser和Web Server之间传递数据，使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框架实际上是一系列工具和函数。
> 
>  
> 
>  
> 
>  
> 
> 参考：
> 
> \[1\] [ http://blog.csdn.net/caozhangyingfei0109/article/details/10296157][http_blog.csdn.net_caozhangyingfei0109_article_details_10296157]
> 
> \[2\] [ http://blog.163.com/favour\_love/blog/static/1774171512013631102710715/][http_blog.163.com_favour_love_blog_static_1774171512013631102710715]
> 
>  
> 
>  
> 
>

[20170307082756394]: /images/20220708/206ace1c11794f14bb438d85b142ece6.png
[20170307082739815]: /images/20220708/3b0e8ee7497445459dfe02b74036268f.png
[http_blog.csdn.net_caozhangyingfei0109_article_details_10296157]: http://blog.csdn.net/caozhangyingfei0109/article/details/10296157
[http_blog.163.com_favour_love_blog_static_1774171512013631102710715]: http://blog.163.com/favour_love/blog/static/1774171512013631102710715/