10
7
2011
5

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: 1659
Avatar_small
لی ویوسوہ ہو یار 说:
2021年5月27日 16:56

this is really nice to read..informative post is very good to read..thanks a lot! 123movies

Avatar_small
لی ویوسوہ ہو یار 说:
2021年5月30日 19:48 Smmvaly is the Best Cheapest wholesale SMM Reseller Panel for easy social media promotion. The main provider of Fastest TikTok Fans, Instagram followers, Facebook Likes and YouTube Views services. One Of The Best SMM Panel That Understands Your Needs & Delivers Your Concerns In On Time. Best in Market, Competitive Price. LIVE Chat Support. Wholesale smm panel
Avatar_small
لی ویوسوہ ہو یار 说:
2021年6月02日 18:37

Pretty nice post. I just stumbled upon your weblog and wanted to say that I have really enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again soon! Lifeguard courses near me

Avatar_small
لی ویوسوہ ہو یار 说:
2021年6月05日 19:00

Hello I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. 토토사이트

Avatar_small
لی ویوسوہ ہو یار 说:
2021年6月07日 16:01 I am always looking for some free kinds of stuff over the internet. There are also some companies which give free samples. But after visiting your blog, I do not visit too many blogs. Thanks. website

登录 *


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