AJAX(AsynchronousJavaScriptandXML,异步JavaScript和XML),是创建交互式Web应用程序的主要开发技术。网上也有很多关于AJAX的框架。本文总结了11个最常用的框架。
1.jQuery
jQuery是一个轻量级的Javascript库,兼容CSS3和各种浏览器。jQuery让用户更容易处理HTML文档、事件,实现动画效果,轻松地为网站提供AJAX交互。
2.MooTools
MooTools是一个简洁、模块化、面向对象的JavaScript库。它可以帮助您更快、更轻松地编写可扩展且兼容的JavaScript代码。Mootools类似于prototypejs,语法几乎相同。但是它提供了比prototypejs更多的功能,更强大。例如,添加了动画效果、拖放操作等。
3.原型
Prototype是由SamStephenson编写的一个非常优雅的JavaScript基础类库,它对JavaScript做了很多扩展,旨在简化动态Web应用程序的开发。Prototype很好地支持AJAX。国内外有很多基于此类库的效果库,他们也做得很好。
4.ASP.NETAJAX
ASP.NETAJAX是一个完整的开发框架,易于与现有的ASP.NET程序结合。通常,复杂的功能只需要在页面上拖动几个控件即可,无需了解深层工作原理。用于外部服务器端编程的ASP.NETAJAX控件工具包包含大量独立的AJAX控件和对原始ASP.NET服务器控件的AJAX功能扩展,实现起来非常简单。
5.阿帕奇检票口
ApacheWicket是一个用于Java的Web开发框架,类似于Struts、WebWork和Tapestry。特点是HTML和代码有效分离(有利于程序员和美工之间的合作)、基于规则的配置(减少了XML等配置文件的使用)、学习曲线低(开发方法类似于C/S)),更容易调试(错误类型更少,更容易定位)。
6.道场工具包
Dojo是一个强大的面向对象的JavaScript框架。它主要由三个模块组成:Core、Dijit、DojoX。Core提供AJAX、事件、打包、基于CSS的查询、动画、JSON等相关操作API;Dijit是一个可换肤、基于模板的WEBUI控件库;DojoX包括一些创新/新颖的代码和控件:DateGrid、图表、离线应用程序、跨浏览器矢量图形等等。
7.DWR(直接网络远程处理)
DWR是一个Java库,可以帮助开发者轻松实现服务器端Java和客户端JavaScript之间的相互操作和调用。
8.Spry框架
AdobeSpry是面向网页设计师而非开发人员的AJAX框架。它使设计人员可以在HTML页面中创建丰富的体验,而无需了解复杂的AJAX技术。
9.YUI(雅虎用户界面)库
YUI(YahooUserInterface)是雅虎开发的一个开源的JavaScript函数库,它使用了AJAX、DHTML和DOM等多种技术。YUI包含多种程序工具、函数库和Web界面,可以更快速地开发交互性强、内容丰富的网站应用程序。
10.谷歌网络工具包
GoogleWebToolkit(GWT)是一种开源Java开发框架,它使不使用第二种浏览器语言的开发人员能够更轻松地编写AJAX应用程序,例如GoogleMaps和Gmail。
11.零知识框架
ZK是一个开源的、XUL/HTML兼容的、用Java编写的AJAX框架。使用此框架,您无需编写JavaScript代码即可创建支持Web2.0的富Internet应用程序(RIA)。最大的好处是设计AJAXWeb应用程序与设计桌面应用程序一样容易和简单。ZK包括一个基于AJAX的、事件驱动的、高度交互的引擎,还提供了各种丰富的、可重用的XUL和HTML组件,以及一个基于XML的用户界面设计语言ZK用户界面标记语言(ZUML)。

ajax

ajax框架实现步骤

//1.创建ajax对象
varxhr=newXMLHttpRequest();
//2.告诉Ajax对象将请求发送到哪里以及如何发送请求
//1)请求方法2)请求地址
xhr.open(‘get’,’http://localhost:3000/first’);
//3.发送请求
xhr.send();
//4.从服务端获取数据到客户端
xhr.onload=函数(){
console.log(xhr.responseText)
}
获取参数传递
//创建ajax对象
varxhr=newXMLHttpRequest();
//获取用户在文本框中输入的值
varnameValue=username.value;
varageValue=age.value;
//拼接请求参数
varparams=’用户名=’+nameValue+’&age=’+ageValue;
//配置ajax对象
xhr.open(‘get’,’http://localhost:3000/get?’+params);
//发送请求
xhr.send();
//从服务器端响应中获取数据
xhr.onload=函数(){
console.log(xhr.responseText)
}
后传参数
//创建ajax对象
varxhr=newXMLHttpRequest();
//获取用户在文本框中输入的值
varnameValue=username.value;
varageValue=age.value;
//拼接请求参数
varparams=’用户名=’+nameValue+’&age=’+ageValue;
//配置ajax对象
xhr.open(‘post’,’http://localhost:3000/post’);
//设置请求参数格式的类型(post请求必须设置)
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
//发送请求
xhr.send(参数);
//从服务器端响应中获取数据
xhr.onload=函数(){
console.log(xhr.responseText)
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注