IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台!
  • 登录
  • 注册
  • 设为首页
  • 加入收藏
  • 网站首页
  • IT风向标
  • 网站优化
  • Html
  • CSS
  • JavaScript
  • ASP
  • Php/Mysql
  • Flash
  • Ajax
  • 源码下载
  • 精美桌面
  • 供求信息
  • 超稳定100M虚拟主机只要100元,还送50M邮箱!
  • 文字广告招商中...
  • 会员注册 | 用户登录 | 我要投稿
  • 信息订阅
兼容多浏览器的AJAX入门实例(超详细注释) 您现在正在浏览:首页 > Ajax > 
兼容多浏览器的AJAX入门实例(超详细注释)

作者: 发布时间:2008-06-18 21:36:20 来源:互联网
ajax,越来越多的被用在了网页的交互上,使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。
下面是一个简单的ajax实例:
原码:
ajax.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=gb2312" />
<title></title>
<script type="text/javascript">
<!--
//Ajax是建立在XMLHttp组件下的技术,本例详细语法参考压缩包内xmlhttp手册

var xmlHttp
//建立XMLHTTP对象调用MS的ActiveXObject方法
//如果成功(IE浏览器)则使用MS ActiveX实例化创建一个XMLHTTP对象
//非IE则转用建立一个本地Javascript对象的XMLHttp对象 (此方法确保不同浏览器下对AJAX的支持)
function createXMLHttp(){
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
}

//建立主过程
function startXMLHttp(){
createXMLHttp(); //建立xmlHttp 对象
xmlHttp.onreadystatechange =dodo;//xmlHttp下的onreadystatechange方法 控制传送过程
xmlHttp.open("get","1.asp",true); //传送方式 读取的页面 异步与否
xmlHttp.send(); //发送
}

function dodo(){
    if(xmlHttp.readystate==4){  // xmlHttp下的readystate方法 4表示传送完毕
   if(xmlHttp.status==200){ // xmlHttp的status方法读取状态(服务器HTTP状态码)  200对应OK 404对应Not Found(未找到)等
       document.getElementById("content").innerHTML=xmlHttp.responseText  //xmlHttp的responseText方法 得到读取页数据
           }
}

}
-->
</script>
</head>

<body>
<span id="content">替换内容</span><br>
<input type="button"  onclick="javascript:startXMLHttp()" value="AJAX获取"/>
</body>
</html>


被读取的页面:
1.asp
程序代码 程序代码
<%
'-------------------------------------------
'//禁止缓存该页 让AJAX读取该页始终为最新而非过期缓存页
Response.Expires = 0 
Response.Expiresabsolute = Now() - 1 
Response.AddHeader "pragma","no-cache" 
Response.AddHeader "cache-control","private" 
Response.CacheControl = "no-cache"
'-------------------------------------------
response.Charset="GB2312" '//数据返回的编码类型 显示中文数据必须
'-------------------------------------------
response.Write(now())'//得到当前时间
%>

演示地址:attachments/month_0708/ajax.html
  
【评论】【加入收藏夹】【大 中 小】【打印】【关闭】
※ 相关信息
 ·Ajax入门例子[转自:acaizi的专栏]  (2008-06-18 21:34:32)
 ·ajax+php无刷新二级联动下拉菜单(省市联动)源码  (2008-05-01 23:37:21)
 ·使用AJAX技术实现网页无闪自动局部刷新  (2008-04-10 15:54:21)
 ·AJAX技术汇总  (2008-04-06 21:25:26)
 ·Ajax实战(Ajax in action中文版)  (2008-04-04 22:04:00)
 ·利用AJAX技术实现网页无刷新进度条显示  (2008-02-15 23:23:23)
 ·Ajax 图片幻灯片放映[php]  (2008-01-28 17:57:42)
 ·'AjaxPro'未定义错误的原因&javascript顺序执行&AjaxPro机制  (2008-01-28 17:56:40)
 ·喜欢Ajax的十大理由  (2008-01-19 16:21:16)
 ·Ajax调试的小技巧  (2008-01-13 21:36:17)

发表评论
查看评论 
用户名: 密码:
验证码: 匿名发表
[注册帐号]
[控制面板]
[用户登陆]
[修改资料]
[用户收藏]
[我的状态]
[退出登陆]
 
文章搜索
     
    [添加文章]   [管理文章]
最新技术文档
    ·中国移动188号段将于1月8日起在深圳正式放号
    ·PHP与Javascript的两种交互方式
    ·使用wordpress中的函数 (PHP)
    ·js倒计时效果-精确到秒 (Javascript)
    ·PHP无刷新删除数据
    ·PHP文件系统处理类
    ·PHP文件缓存数据类
    ·PHPMailer邮件类利用smtp.163.com发送邮件方
    ·PHP的POST方式
    ·md5 结合 crypt =无敌密码
技术文档排行榜
    ·天气预报小偷,根据IP自动判断地址
    ·超经典计算机使用问题105答
    ·CSS网页布局入门教程:下拉及多级弹出式菜单
    ·'AjaxPro'未定义错误的原因&javascript顺
    ·[初学者必读]网页制作之HTML基础知识
    ·DIV&CSS打造自动伸展三栏复合布局
    ·近1000本javascript电子图书下载列表
    ·CSS 文字樣式技巧 (摘自一台湾网站,确实很
    ·阿里妈妈广告的投放技巧
    ·ajax+php无刷新二级联动下拉菜单(省市联动)
关于站点 - 广告服务 - 联系我们 - 免责声明 - 程序支持 - 网站地图 - 留言中心 - 返回顶部

Copyright © 2007-2008 www.Jishubu.com online services. All rights reserved. Template designed by laogui.
违法不良信息举报中心 津ICP备07002356号