tsailer
- 浏览: 51429 次
- 性别:
- 来自: 深圳
-
<!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>
<title>new document</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<H1>This is an ajax demo</H1>
<form>
<input type="button" value="Fetch the message" onclick="getData('data.txt','dataDiv')"/>
</form>
<div id="dataDiv">
<p>The fetch message will appear here</p>
</div>
</body>
<script language="JavaScript" type="text/javascript">
<!--
//alert(null);
var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}
//以上代码是创建一个XMLHttpRequest对象
//下面是一个使用这个XMLHttpRequest对象的函数，这个函数获取服务器的一个文件内容并显示到网页
function getData(dataSource,divID)
{
if(XMLHttpRequestObject)
{
var obj=document.getElementById(divID);
XMLHttpRequestObject.open("GET",dataSource);
XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange=function ()
{
//alert(XMLHttpRequestObject.readyState);
//alert("status :"+XMLHttpRequestObject.status);
if(XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
{
//alert("11111111");
obj.innerHTML=XMLHttpRequestObject.responseText;
}
}
//alert("111");
XMLHttpRequestObject.send(null);
}
}
window.onbeforeunload=function(){alert("refresh me or close me!");}
//-->
</script>
</html>
注意该html文件夹下要有一个data.txt
同时要在服务器上才能有相应的效果
<a href="#"></a>
指向本连接，不刷新页面
可以用
window.onbeforeunload = function(){ alert("refresh or close this page!");};看是否刷新页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>new document</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<H1>This is an ajax demo</H1>
<form>
<input type="button" value="Fetch the message" onclick="getData('data.txt','dataDiv')"/>
</form>
<div id="dataDiv">
<p>The fetch message will appear here</p>
</div>
</body>
<script language="JavaScript" type="text/javascript">
<!--
//alert(null);
var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}
//以上代码是创建一个XMLHttpRequest对象
//下面是一个使用这个XMLHttpRequest对象的函数，这个函数获取服务器的一个文件内容并显示到网页
function getData(dataSource,divID)
{
if(XMLHttpRequestObject)
{
var obj=document.getElementById(divID);
XMLHttpRequestObject.open("GET",dataSource);
XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange=function ()
{
//alert(XMLHttpRequestObject.readyState);
//alert("status :"+XMLHttpRequestObject.status);
if(XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
{
//alert("11111111");
obj.innerHTML=XMLHttpRequestObject.responseText;
}
}
//alert("111");
XMLHttpRequestObject.send(null);
}
}
window.onbeforeunload=function(){alert("refresh me or close me!");}
//-->
</script>
</html>
注意该html文件夹下要有一个data.txt
同时要在服务器上才能有相应的效果
<a href="#"></a>
指向本连接，不刷新页面
可以用
window.onbeforeunload = function(){ alert("refresh or close this page!");};看是否刷新页面
分享到：
发表评论
-
JS的replace方法
2011-08-05 10:34 1138from http://www.cnblogs.com/mxw ... -
要写出在各大主流浏览器上都兼容的JS代码，就要关注他们的区别，下是IE和FF综合考虑的通用DOM！
2011-08-04 14:36 896来源于 http://hi.baidu.com/g ... -
<input type="text" id="start" />输入true取布尔true
2011-07-28 14:22 830"true" and true is di ... -
Js获取当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天
2011-07-27 17:47 4717字符串转日期型+Js当前日期时间+日期验证+判断闰年+日期的天 ... -
高效http页面优化法则一【JS对DOM的操作】
2011-07-08 10:58 996很多人都认为JS的效率 ... -
form page jump
2011-07-07 10:49 824页面跳转 <input type="hidd ... -
jquery widget sample
2011-07-06 08:39 3406<!DOCTYPE html PUBLIC &quo ... -
jquery apply wait for update
2011-07-05 10:36 1622<!DOCTYPE html PUBLIC &quo ... -
deal with a great quantity domelements add event wait for update
2011-06-29 14:34 1119<!DOCTYPE html PUBLIC " ... -
JS中的attachEvent、addEventListener如何传递参数
2011-06-29 14:02 6243<!DOCTYPE html PUBLIC " ... -
window.onload 和 $(document).ready 区别 待续......
2011-06-27 09:50 2717jquery 学习之一(js中window ... -
js operate frame
2011-06-14 14:04 1167我的页面框架如下 <frameset rows=&quo ... -
js中frame的调用
2011-06-14 12:27 1016js中frame的调用 关键词 ... -
js 事件冒泡 和其它问题
2011-06-10 09:25 779js事件冒泡 <html> <head> ... -
js inner iframe get dom of parent
2011-06-02 15:00 702parent.$("#id");//jqu ... -
add event to all the dom elements in one page except one dom
2011-05-18 10:20 840<!DOCTYPE html PUBLIC &quo ... -
count down 倒计时
2011-05-13 12:42 550<!DOCTYPE html PUBLIC " ... -
js IE与FireFox的兼容性问题 事件
2011-05-13 09:16 984# window.event * IE：有windo ... -
deal with href remove the same element
2011-05-11 09:38 771var url="http://zhidao.bai ... -
document.form.item 问题集合的(0)和[0]取法
2011-05-09 15:10 1892<!DOCTYPE html PUBLIC " ...
相关推荐
关于Ajax的常见面试题 1，Ajax和javascript的区别？ javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。 Javascript是由...
本卷从最易于理解和使用的那部分入手，介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分，包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...
Android Webview虽然提供了页面加载及资源请求的钩子，但是对于h5的ajax请求并没有提供干涉的接口，这意味着我们不能在webview中干涉javascript发起的http请求，而有时候我们确实需要能够截获ajax请求并实现一些功能...
在ajax中使用post方法，用常规的参数格式：param1=a1¶m2=a2 ，当参数长度过长时，依然提交不成功。比如我们经常这样写一个ajax的post请求： $.ajax({ type: "post", // post or get contentType:"application...
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件
ajax ajax原理 ajax代码 ajax编程 ajax学习
ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效
使用Ajax实现从服务器读取数据，包括Ajax实现的详细步骤
ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...
学习的网上的一个ajax版注册程序，对界面进行了改变！是适合学习ajax的朋友的一个好的例子！
掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件...
并应用上述知识开发了8个基于AJAX的Web应用系统，如基于AJAX的文件和图像处理、AJAX祝福墙、AJAX留言簿、AJAX聊天室、AJAX RSS阅读器、AJAX相册、基于AJAX的电子邮件处理等。最后以两个大型的AJAX Web应用系统（基于...
Ajax + JavaScript + MySQL 实现的Ajax分页功能
Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码
第 1 部分:Ajax 简介 第 2 部分:: 使用 JavaScript 和 Ajax 发出异步请求 第 3 部分: Ajax 中的高级请求和响应 第 4 部分: 利用 DOM 进行 Web 响应 第 5 部分: 操纵 DOM 第 6 部分: 建立基于 DOM 的 Web 应用程序 第...
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
ajax 分页ajax 分页ajax 分页
看到网上很多想用ajax的树的例子，很奇怪，明明TreeView自带AJAX功能，取非要自己去写一大堆代码， 工作量增加了，而性能又没有提高多少 正好自己这次用到了，就做了一个例子，供大家一起研究参考 注：顺便下载了一...
ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解