1、ajax: AJAX是指一种创建交互式网页(操作人员和系统之间存在交互作用的信息处理方式,即:访问者在移动鼠标,显示的内容在不断变化,就像对话一样有互动呈现。一打开网站所有内容都展现完了,那是老式的非交互布局)应用的网页开发技术,是一种技术而不是框架。通俗点来说,就是页面发送请求之后,还可以在当前页面进行操作,不用被阻塞着等待请求的响应,即异步请求。
2、ajax框架:将ajax进行封装的框架,这些框架提供了Ajax快捷操作的方法,如快速异步获取一个页面,一个字符串、一个XML或JSON等。并通过回调函数对返回结果进行操作,用于实现ajax。主要包括:jQuery,prototype,MooTools,ASP.NET AJAX,Ajax.NET Professional,ExtJs等。
2.1、主要框架介绍
2.1.1 jQuery:jQuery是一个轻量级(规模较小,但是功能比较全面)的javaScript(Web 的编程语言)库,也是一个快速、简洁的js框架,兼容各种浏览器和css3(用于控制网页的样式和布局),使用户能更方便的处理HTML document、events、实现用户效果,并且方便为网页提供ajax交互。
2.1.1 mootools:是一个简洁、模块化、面向对象的JavaScript库。它能够帮助你更快、更简单地编写可扩展和兼容性强的JavaScript代码。
2.1.3 prototype:是一个基础类库,对JS做了大量的扩充,并且能很好的支持ajax。
2.1.4 另外一些不常用的框架:(链接:https://www.jianshu.com/p/8953775f3c65)
DWR(direct web remoting):DWR是一个Java库,可以帮助开发者轻松实现服务器端的Java和客户端的JavaScript相互操作、彼此调用。
Apache Wicket:Apache Wicket是一个针对Java的Web开发框架,与Struts、WebWork、Tapestry类似。其特点在于对HTML和代码进行了有效的分离(有利于程序员和美工的合作),基于规则的配置(减少了XML 等配置文件的使用),学习曲线较低(开发方式与C/S相似),更加易于调试(错误类型比较少,而且容易定位)。
Dojo Tookit:Dojo是一个强大的面向对象的JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供AJAX、events、packaging、CSS-based querying、animations、JSON等相关操作API;Dijit是一个可更换皮肤、基于模板的WEB UI控件库;DojoX包括一些创新/新颖的代码和控件:DateGrid、charts、离线应用、跨浏览器矢量绘图等。
Spry framework:Adobe Spry是一个面向Web设计人员而不是开发人员的AJAX框架,它使得设计人员不需要了解复杂的AJAX技巧也能在一个HTML页面中创建丰富体验成为了可能。
YUI:YUI(Yahoo User Interface),是由雅虎开发的一个开源的JavaScript函数库,它采用了AJAX、 DHTML和DOM等诸多技术。YUI包含多种程序工具、函数库以及网页操作界面,能够更快速地开发互动性高且丰富的网站应用程序。
2.2、框架之间的区别
2.2.1 jQuery和mootools的区别:jQuery优于api和DOM,以及出色的插件。但是在面对一些大型项目的时候,一些功能特性上的缺陷往往需要借助插件,这就有可能导致插件乱用,导致代码逐渐冗余,故jQuery更适用于动态的小中站点。而mootools虽API和DOM都不及jQuery,但是其API和面向对象的设计更适用于大型网站。
2.2.2 jQuery和prototype的区别:jQuery是通过构建一个特殊对象$来扩充,将所有的功能都放在$里;而prototype是通过原型来扩展JS的功能的。比如:
//============加载页面============ // JQuery $ ( document ). ready ( function () { // Code }); // JQuery Shorthand $ ( function () { // Code }); // Prototype document . observe ( 'dom:loaded' , function () { // Code }); //============根据ID获取============ // JQuery $ ( "#idname" ); // Prototype $ ( "idname" ); //============根据类名获取============ // JQuery $ ( ".classname" ); // Prototype $$ ( '.classname' ); //============根据第一个符合的类名获取============ // JQuery $ ( ".classname:first-child" ); // Prototype $$ ( '.classname' )[ 0 ]; //============根据ID绑定监听事件============ // JQuery $ ( "#id" ). bind ( 'click' , function () { // Code }); // JQuery Shorthand $ ( "#id" ). click ( function () { // Code }); // Prototype $ ( "#id" ). observe ( 'click' , function () { // code }); //============根据符合的类名绑定监听事件============ // JQuery $(".classname").bind('click',function(){ // code }); // JQuery Shorthand $ ( ".classname" ). click ( function () { // code }); // Prototype $$ ( ".classname" ). invoke ( 'observe' , 'click' , function () { // code }); //============结束终止事件============ // JQuery $ ( "#id" ). click ( function () { //code return false ; }); // Prototype $ ( "id" ). observe ( 'click' , function ( e ) { //code Event . stop ( e ); }); //============结束终止事件============ // JQuery $.get(url,function(data){ alert(data . name ); }, 'JSON' ); // Prototype new Ajax . Request ( url , { method : 'get' , onSuccess : function ( transport , json ) { alert ( json . name ); } });
2.2.3 jQuery和mootools的区别:Mootools跟prototypejs相类似,语法几乎一样。但它提供的功能要比prototypejs多,而且更强大。比如增加了动画特效、拖放操作等等。
3、ajax的使用过程:
(1)创建XMLHttpRequest对象用于和服务器交换数据:
var xhr; if (window.XMLHttpRequest) {//现代主流浏览器
xhr = new XMLHttpRequest();////XMLHttpRequest本身是一个构造函数,可以使用new命令生成实例。它没有任何参数。
} else {// 针对浏览器,比如IE5或IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
(2)open()准备发送资源请求给服务器(即准备发送请求):
①xhr.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
②xhr.send();使用get方法发送请求到服务器。xhr.send(string);使用post方法发送请求到服务器。
get()和post()的区别:
①get()是从服务器获取数据,且在浏览器退/刷新时是无害的;post()是向服务器传递数据,退回时会再次请求数据。
②get()传送的数据量较小,且不安全,不超过2KB;post()没有限制,且安全性高。
③get()把参数包含在URL中;post()是通过request body传递参数的。
④get()只支持ascll字符;post()没有限制,允许二进制。
//get:准备和执行其实可以称作一步, xhr.open("GET", "index.html", true);//准备发送 xhr.send();//执行发送 //post xhr.open("POST", "demo_post.asp", true); xhr.send();
(3)执行发送:xhr.send()
//======open()方法======== void open( string method,//GET、POST、PUT、DELETE、HEAD等 string url,//目标地址 optional boolean async,//表示请求是否为异步,默认为true。如果设为false,则send()方法只有等到收到服务器返回了结果,才会进行下一步操作。 optional string user,//表示用于认证的用户名,默认为空字符串。 optional string password //表示用于认证的密码,默认为空字符串。 ); //如果对使用过open()方法的 AJAX 请求,再次使用这个方法,等同于调用abort(),即终止请求 //======send()方法======== //get var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.example.com/?id=' + encodeURIComponent(id), true ); xhr.send(null); //post var xhr = new XMLHttpRequest(); var data = 'email=' + encodeURIComponent(email) + '&password=' + encodeURIComponent(password); xhr.open('POST', 'http://www.example.com', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(data);
(4)回调:xhr.onreadystatechange = functiion(){};
//完整例子 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ // 通信成功时,状态值为4 if (xhr.readyState === 4){ if (xhr.status === 200){ console.log(xhr.responseText); } else { console.error(xhr.statusText); } } }; xhr.onerror = function (e) { console.error(xhr.statusText); }; xhr.open('GET', '/endpoint', true); xhr.send(null);
4、如何解决框架之间共享冲突
//方法一: <html> <head> <script src="Mootools.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict();//释放jquery中$定义,并直接使用jQuery代替平时的$。 jQuery(document).ready(function(){ jQuery("div").hide(); }); $('someid').style.display = 'none';//此处中的$为原Mootools中的$,使用方法不变 </script> </head> <body> </body> </html> /** * noConflict()方法释放 jQuery 对 $ 变量的控制 也可为jQuery 变量规定新的名称。 * style="visibility: hidden;":直接隐藏,但占用的页面空间是不变的。 * style="display:none":后一种方法直接是不显示,因此不占用的页面空间。 */ //方法二 <html> <head> <script src="Mootools.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); //将你使用的jquery代码放到document ready方中 jQuery(document).ready(function($){ // 此处为jQuery的$定义 $("div").hide(); }); //此处为Mootools的定义 $('someid').style.display = 'none'; </script> </head> <body> </body> </html> //方法三 <html> <head> <script src="Mootools.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict();//以$j来替代jQuery中的$,同时区分mootools $j(document).ready(function(){ $j("div").hide(); }); $('someid').style.display = 'none'; //原mootools中的$照旧使用 </script> </head> <body></body> </html>
//转载于:https://blog.csdn.net/kictpov/article/details/6033691?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.nonecase