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:
mootools是一个简洁、模块化、面向对象的JavaScript库。它能够帮助你更快、更简单地编写可扩展和兼容性强的JavaScript代码。
2.1.3 prototype：
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 prototypejs和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、如何解决框架之间共享冲突
//方法一：
/**
* noConflict()方法释放 jQuery 对 $ 变量的控制 也可为jQuery 变量规定新的名称。
* style="visibility: hidden;":直接隐藏，但占用的页面空间是不变的。
* style="display:none":后一种方法直接是不显示，因此不占用的页面空间。
*/
//方法二
//方法三
//转载于：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