Ajax 框架学习笔记

一.xmlhttprequest 对象的三个重要的属性。

onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlhttp.onreadystatechange=function()

{

  // 我们需要在这里写一些代码

  }

readystate 属性

readystate 属性存有服务器响应的状态信息。每当 readystate 改变时，onreadystatechange 函数就会被执行。

这是 readystate 属性可能的值：

我们要向这个 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。