展开飞翔的翅膀

最新推荐文章于 2025-04-14 21:04:08 发布

乐游之神话

最新推荐文章于 2025-04-14 21:04:08 发布

阅读量524

点赞数

文章标签： xmlhttprequest ajax javascript asynchronous function xhtml

本文链接：https://blog.youkuaiyun.com/zxz1337/article/details/4167207

版权

Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
它：
使用XHTML+CSS来表示信息；
使用JavaScript操作DOM（Document Object Model）进行动态显示及交互；
使用XML和XSLT进行数据交换及相关操作；
使用XMLHttpRequest对象与Web服务器进行异步数据交换；
使用JavaScript将所有的东西绑定在一起。
使用SOAP以XML的格式来传送方法名和方法参数。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于Ajax的“派生／合成”式（derivative/composite）的技术正在出现

，如“AFLAX”。Ajax的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器目前包括：Internet Explorer、Mozilla、Firefox、Opera、Konqueror及Mac OS的Safari。

但是Opera不支持XSL格式对象，也不支持XSLT[2]。[以上一段来自维基百科，自由的百科全书 AJAX]

Ajax的这种交互，现在可以说是很流行很常用的吧，比如说QQ群信息，csdn上的资源下载后的评论，csdn上的在线聊天等等，还有很多很多应该都是用到Ajax技术的！
如何实现Ajax呢？
首先是要实现创建XMLHttpRequest 对象，贴一下自己用的代码吧：

    //建立XMLHttpRequest对象函数

var xmlhttp;
function createXHR()
{
      try
      {
          xmlhttp=new ActiveXObject("Msxm12.XMLHTTP"); //支持不同浏览器版本，下同
      }
      catch(e)
      {
          try
          {
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
              try
              {
                  xmlhttp=new XMLHttpRequest();
                  if(xmlhttp.overrideMimeType)
                  {
                       xmlhttp.overrideMimeType("text/xml");
                  }
               }
               catch(e){}
           }
       }
       if(!xmlhttp)
       {
            return false;
       }
}

   在使用的时候就是要创建XMLHttpRequest！
   写个简单的例子吧：我是用PHP实现的，原理上一样的：
   以下是test.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax应用举例</title>
</head>
<script type="text/javascript" src="ajax.js"></script>
<body>
<input type="text" name="username" οnblur="doAjax( 'chkusername.php?username='+this.value )" /><div id="chk"></div>

</body>
</html>

以下是ajax.js,一是实现调用doAjax，一是实现返回

var xmlhttp;
function createXHR()
{
      try
      {
          xmlhttp=new ActiveXObject("Msxm12.XMLHTTP"); //支持不同浏览器版本，下同
      }
      catch(e)
      {
          try
          {
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
              try
              {
                  xmlhttp=new XMLHttpRequest();
                  if(xmlhttp.overrideMimeType)
                  {
                       xmlhttp.overrideMimeType("text/xml");
                  }
               }
               catch(e){}
           }
       }
       if(!xmlhttp)
       {
            return false;
       }
}

function doAjax( url )
{
    createXHR();
    xmlhttp.onreadystatechange=requestAjax;
    xmlhttp.open( "GET", url, true );
    xmlhttp.send( null );
}

function requestAjax()
{
    if(xmlhttp.readyState==4)
    {
        if(xmlhttp.status==200)
        {
            document.getElementById('chk').innerHTML = xmlhttp.responseText;
        }
    }
}

以下是chkusername.php:
<?php

$username = @$_GET['username'];

echo $username;

?>

三个文件放在同一目录下就OK了。

以上基本上就实现了一个由Ajax实现的交互了，可以在chkusername.php里面实现数据库的操作，实现判断用户名是否在数据库里存在，我就不多说了！