AJAX技术的详解及应用

最新推荐文章于 2024-09-14 14:18:13 发布

moodboy1982

最新推荐文章于 2024-09-14 14:18:13 发布

阅读量867

点赞数

分类专栏： HTML/CSS/JAVASCRIPT 文章标签： ajax xmlhttprequest function url 浏览器 microsoft

本文链接：https://blog.csdn.net/moodboy1982/article/details/1602264

版权

HTML/CSS/JAVASCRIPT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以下原贴:老鹰
<一>方法

一、创建 XMLHttpRequest 对象
定义：
根据浏览器的不同，创建XMLHttpRequest的方法也不相同，但大致可分为两类：
1、Microsft IE浏览器
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        和
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
2、处理 Mozilla 和非 Microsoft 浏览器
    xmlHttp = new XMLHttpRequest();
应用：
var xmlHttp = false;

try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");     //先有Msxml2.XMLHTTP来创建IE游览器上的对象
} catch (e) {
try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //如果上面的创建失败，则有此句来创建
} catch (e2) {
    xmlHttp = false;
}
}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {    //如果上面的全失败（非IE浏览器）
xmlHttp = new XMLHttpRequest();    //这是上面的均失败后适用于非IE浏览器
}

二、发送
    xmlHttp.open(method,url,synchronization)
    xmlHttp.send([argv])
    open()方法中的三个参数：1、method是指传递参数的方法：Get或Post
                                          2、url是指服务端文件的地址
                                          3、synchronization有两个值是指是否同步：true或false。true表示同步，false表示不同步
    send()方法中的参数：argv是指发送的参数，一般如果是以Get 发送的话，那么这里可以为null

应用：
   xmlHttp.open("get","abc.asp?name=glede",true);
   xmlHttp.send(null);

三、XmlHttpRequest对象属性
1、onreadystatechange        每次状态改变所触发事件的事件处理程序
2、readyState 对象状态值： 0 = 未初始化（uninitialized） 1 = 正在加载（loading） 2 = 加载完毕（loaded） 3 = 交互（interactive） 4 = 完成（complete）
3、responseText            从服务器进程返回的数据的字符串形式
4、responseXML            从服务器进程返回的DOM兼容的文档数据对象
5、status                       从服务器返回的数字代码，比如404（未找到）或200（就绪）
6、statusText                 伴随状态码的字符串信息

应用：
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
           if (xmlHttp.status == 200) {
         var message = xmlHttp.responseText; //获取XMLHTTP返回的值
          }
     }
}

<二> 实例：

1、用AJAX实现无刷新更新新闻：
//原创者：老鹰
function ajax(URL,DivId,IntervalDate)//参数URL为地址,DivId为DIV的ID，IntervalDate为间隔时间
{
window.setInterval("CreateXMLHTTP('"+URL+"','"+DivId+"')",IntervalDate);
}
//XMLHTTP连接,接受参数url为地址，DivId为DIV的id
function CreateXMLHTTP(url,DivId)
{
var xmlHttp = false;

   //判断浏览器
   try {
               xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
             }
    catch (e) {
           try {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                 }
   catch (e2) {
                          xmlHttp = false;
                    }
              }
     if (!xmlHttp && typeof XMLHttpRequest != 'undefined') //判断是不是Firefox浏览等
          {
             xmlHttp = new XMLHttpRequest();
    if (xmlHttp.overrideMimeType)
       {
                   xmlHttp.overrideMimeType('text/xml');
               }
        }
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
           if (xmlHttp.status == 200) {
         var message = xmlHttp.responseText; //获取XMLHTTP返回的值
      document.getElementById(DivId).innerHTML = message ;//把返回的值赋给对应的ID
      }
           }
   }
     xmlHttp.open("get",url,true);
//解决中文编码
   xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   xmlHttp.setRequestHeader("Content-Type","charset=gb2312");
xmlHttp.send(null);
}

2、用AJAX实现注册用户名检测
<!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" c />
<title>AJAX检测用户名</tile>
<script language="javascript>
//AJAX函数
//编写者：老鹰 QQ:22683485
//2007年5月

function checkUid()
{
url="validate.asp?uid="+document.form1.uid.value;
if (document.form1.uid.value.length>=1)
{
     CreateXMLHTTP(""+url+"",'ShowUid');
}
}

function CreateXMLHTTP(url,DivId)   //参数说明：url为地址，DivId为<div>的ID
{
var xmlHttp = false;
   //判断浏览器
   try {
               xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
             }
    catch (e) {
           try {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                 }
   catch (e2) {
                          xmlHttp = false;
                    }
              }
     if (!xmlHttp && typeof XMLHttpRequest != 'undefined') //判断是不是Firefox浏览等
          {
             xmlHttp = new XMLHttpRequest();
    if (xmlHttp.overrideMimeType)
       {
                   xmlHttp.overrideMimeType('text/xml');
               }
        }
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
           if (xmlHttp.status == 200) {
         var message = xmlHttp.responseText; //获取XMLHTTP返回的值
      document.getElementById(DivId).innerHTML = message ;//把返回的值赋给对应的ID
      }
           }
   }
     xmlHttp.open("get",url,true);
//解决中文编码
   xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   xmlHttp.setRequestHeader("Content-Type","charset=gb2312");
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="form1" method="post" action="?action=reg">

<div style="float:left;">
    <input name="uid" type="text" id="uid" size="10" maxlength="15" >
</div>
<Div id="ShowUid" style="float:left"></Div>

</form>
</body>
</html>

validate.asp的内容：
<%
Response.charset="gb2312"    '如果不加此句，客户端中文有可能显示为乱码
uid=Replace(uid,"'","''")

''''安全判断代码省略
''''连接数据库的代码就省略
uid=Request.QueryString("uid")
Sql="select uid from member where uid='"&uid&"'"
Set Rs=conn.Execute(Sql)
If Not (Rs.Eof Or Rs.Bof) Then
    Response.Write("<font color=red>此用户名已存在，请另选用户名</font>")
Else
    Response.Write("<font color=blue>恭喜您，此用户名未注册，您可以使用！</font>")
End If
Rs.Close:Set Rs=Nothing
%>

----------------------------------------文章原创：老鹰(QQ:22683485)-----------------------------------------------------------------------