10
7
2011
0

AJAX技术的详解及应用(自网络

作为ajax的复习。PS:并不保证本文内容中的信息是正确的,仅供参考!!!

转自:AJAX技术的详解及应用


<一>方法



一、创建 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
%>
 

Category: Web摘记 | Tags: javascript ajax | Read Count: 1142

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com