Ajax 框架学习笔记
一.xmlhttprequest 对象的三个重要的属性。
onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:
xmlhttp.onreadystatechange=function()
{
// 我们需要在这里写一些代码
}
readystate 属性
readystate 属性存有服务器响应的状态信息。每当 readystate 改变时,onreadystatechange 函数就会被执行。
这是 readystate 属性可能的值:
状态 |
描述 |
0 |
请求未初始化(在调用 open() 之前) |
1 |
请求已提出(调用 send() 之前) |
2 |
请求已发送(这里通常可以从响应得到内容头部) |
3 |
请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) |
4 |
请求已完成(可以访问服务器响应并使用它) |
我们要向这个 onreadystatechange 函数添加一条 if 语句,来测试我们的响应是否已完成(意味着可获得数据):
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readystate==4)
{
// 从服务器的response获得数据
}
}
responsetext 属性
可以通过 responsetext 属性来取回由服务器返回的数据。
二.基本源码:
var xmlhttp
function showcustomer(str)
{
xmlhttp=getxmlhttpobject();
if (xmlhttp==null)
{
alert ("your browser does not support ajax!");
return;
}
//设置请求响应的url
var url="getcustomer_xml.asp";
url=url+"?q="+str;
url=url+"&sid="+math.random();
xmlhttp.onreadystatechange=statechanged;
xmlhttp.open("get",url,true);
xmlhttp.send(null);
}
function statechanged()
{
if (xmlhttp.readystate==4)
{
//responsetext 以字符串返回 http 响应
//document.getelementbyid("txthint").innerhtml=xmlhttp.responsetext;
//responsexml 以 xml 返回响应
//服务器端contenttype 属性为 response 对象设置了 http 内容类型。该属性的默认值是 "text/html"。服务器端返回responsexml 要把内容类型设置为 xml。
var xmldoc=xmlhttp.responsexml.documentelement;
document.getelementbyid("companyname").innerhtml=
xmldoc.getelementsbytagname("compname")[0].childnodes[0].nodevalue;
document.getelementbyid("contactname").innerhtml=
xmldoc.getelementsbytagname("contname")[0].childnodes[0].nodevalue;
document.getelementbyid("address").innerhtml=
xmldoc.getelementsbytagname("address")[0].childnodes[0].nodevalue;
document.getelementbyid("city").innerhtml=
xmldoc.getelementsbytagname("city")[0].childnodes[0].nodevalue;
document.getelementbyid("country").innerhtml=
xmldoc.getelementsbytagname("country")[0].childnodes[0].nodevalue;
}
}
function getxmlhttpobject()
{
var xmlhttp=null;
try
{
// firefox, opera 8.0+, safari
xmlhttp=new xmlhttprequest();
}
catch (e)
{
// internet explorer
try
{
xmlhttp=new activexobject("msxml2.xmlhttp");
}
catch (e)
{
xmlhttp=new activexobject("microsoft.xmlhttp");
}
}
return xmlhttp;
}
三.ajax框架:基于浏览器的应用框架,基于服务器端的应用框架。
1.基于浏览器的应用框架一般分为两种:
aplication frameworks:提供了浏览器功能,但其最著名的还是在于通过窗口生成组件建立桌面gui。 如:dojo,qooxdoo,javafx,yui,extjs(最开始的名字是yui-ext,因为扩展了yui的库,后来发展为可选择扩展jquery和prototype就改名字为ext),flex(与extjs有很多相似),tibet等。
infrastructural frameworks:提供基本的框架功能和轻便式浏览器端操作,让开发者去创建具体应用,主要功能包括:
-
- 基于xmlhttprequest组件的浏览器交互功能
- xml解析和操作功能
- 根据xmlhttprequest的返回信息进行相应的dom操作
- 一些特殊情况下,和其他的浏览器端技术如flash(或java applets)等集合到一起应用
如:jquery(代码量少),prototype,mootools(功能比prototype强大,设计比prototype完善,从prototype中汲取很多有益的设计理念),google ajaxslt,flash/javascript,等。
2.基于服务器端的应用框架通常以下面两种方式工作(尽管它们根据不同的语言进行了分类) :
html/js generation(html/js生成):通过服务器端生成html和js代码在传递给浏览器端进行直接运行 。如:ext gwt。
远程交互:javascript调用服务器端函数(例如调用java函数)并返回给javascript的回调句柄,或者请求服务器端数据信息,例如session信息,数据库查询等。 如dwr。