如何学习Ajax 框架

本篇文章为大家展示了如何学习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。

上述内容就是如何学习Ajax 框架，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网VUE频道。