Ajax学习（一）Ajax简单的异步调用

一个很简单的Ajax异步调用，是在Visual Studio 2005里做的，没有理论，一个实例清楚明了。

1、打开VS2005新建一个站点。

2 、“添加新项” 新建一个XML文件来存放要被调用的数据，文件名是XMLFile.xml ，添加代码：

 

<? xml version="1.0" encoding="utf-8"  ?>
< table  border ="1" >
     < tr >
       < td > 111 </ td >
       < td > 222 </ td >
       < td > 333 </ td >
     </ tr >
     < tr >
       < td > 444 </ td >
       < td > 555 </ td >
       < td > 666 </ td >
     </ tr >
</ table >

 

3、“添加新项” 新建一个HTML页，添加代码：

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > Ajax异步调用 </ title >
</ head >
< body >
     < div  style ="background-color:Yellow"  id ="mytext" > Ajax异步调用 </ div >
     < input  type ="button"  value ="更新"  onclick ="startHTTP()"   />
</ body >
</ html >

< script  type ="text/javascript" >
var  xmlhttp;
function  createHTTP()
 {
     // 根据不同的浏览器创建XMLHttpRequest
     if (window.ActiveXObject)
    {
       xmlhttp = new  ActiveXObject( " Microsoft.XMLHTTP " );
    }
     else   if (window.XMLHttpRequest)
    {
       xmlhttp = new  XMLHttpRequest();
    }
 }
// 开始调用
function  startHTTP()
{
     // 创建对象
    createHTTP();
     // 状态变化与事件挂钩
    xmlhttp.onreadystatechange  =  StateDO;
     // 获取XML文件数据
    xmlhttp.open( " GET " , " XMLFile.xml " , true );//其中GET为HTTP请求方法。XMLFile.xml为数据文件路径。true表示异步，改为false就是同步
     // 发送消息
    xmlhttp.send( null );null就是不带任何参数
}
function  StateDO()
{
     // 判断是否完成状态
     if  (xmlhttp.readystate  ==   4 ) //0未初始化1初始化2发送数据3数据正在传送4异步调用完成
    {
         // 判断是否执行成功
         if  (xmlhttp.status  ==   200 )//表示成功
        {
             // 更新页面
            document.getElementById( " mytext " ).innerHTML  =  xmlhttp.responsetext;
        }
    }
}   
</ script >

 

4、把HTML页设为起始页运行。点更新按钮，可以看到页面没有刷新，数据就被调出来了。

最好放在IIS里运行

 

下一篇： Ajax学习（二）Ajax局部刷新

http://blog.csdn.net/wlj0804/archive/2007/10/19/1833624.aspx