ajax框架(实现步骤)

ajax框架

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框架实现步骤

//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)
}