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.基于浏览器的应用框架一般分为两种:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfzwzj.html