javascript之Ajax起步
XMLHttpRequest readyState属性的值：
UNSENT——0——已创建XMLHttpRequest对象。
OPENED——1——已调用open方法；
HEADERS_RECEIVED——2——已收到server响应的标头；
LOADING——3——已收到server响应。
DONE——4——响应完毕或已失败；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产）。是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
</style>
</head>
<body>
<div>
<button>Apples</button>
<button>Cherries</button>
<button>Bananas</button>
</div>
<div id="target">
载入内容
</div>
<script>
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
//创建XMLHttpRequest对象
var httpRequest=new XMLHttpRequest();
//给readystatechange事件设置一个事件处理器
httpRequest.onreadystatechange=handleResponse;
//使用open方法来指定HTTP方法和须要请求的URL
httpRequest.open("GET", e.target.innerHTML+".html");
//给server发送数据
httpRequest.send();
}
function handleResponse(e){
//处理响应
if(e.target.readyState==XMLHttpRequest.DONE && e.target.status==200){
document.getElementById("target").innerHTML= e.target.responseText;
}
}
</script>
</body>
</html>
apples.html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apples</title>
</head>
<body>
<p>
<img src="images/apple.png"/>
苹果（Apple），是最常见的水果，[1] 苹果树属于蔷薇科。落叶乔木。叶椭圆形，有锯齿。 其果实球形。味甜，口感爽脆。且富含丰富的营养。是世界四大水果之冠。苹果通常为红色。只是也有黄色和绿色。 苹果是一种低热量食物。每100克仅仅产生60千卡热量。苹果中营养成份可溶性大，易被人体吸收。故有“活水”之称，其有利于溶解硫元素，使皮肤润滑娇嫩.
</p> </body>
</html>
bananas.html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apples</title>
</head>
<body>
<p>
<img src="images/banana.png"/>
香蕉（学名：Musa nana Lour.）芭蕉科芭蕉属植物，又指其果实。热带地区广泛栽培食用。
香蕉味香、富于营养。终年可收获。在温带地区也非常受重视。植株为大型草本。从根状茎发出，由叶鞘下部形成高3～6公尺(10～20尺)的假杆；
叶长圆形至椭圆形。有的长达3～3.5公尺(10～11.5尺)，宽65公分(26寸)，10～20枚簇生茎顶。 穗状花序大，由假杆顶端抽出，花多数，淡黄色；果序弯垂。结果10～20串。约50～150个。
植株结果后枯死。由根状茎长出的吸根继续生殖。每一根株可活多年。原产亚洲东南部：台湾、海南、广东、广西等地区均有栽培。
</p> </body>
</html>
cherries.html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apples</title>
</head>
<body>
<p>
<img src="images/cherries.jpg"/>
大樱桃是我国北方落叶果树中继中国樱桃之后果实成熟最早的果树树种。 中医药学觉得。大樱桃具有调中补气。祛风湿的功能。 农业专家称：积极发展大樱桃生产，有着广阔的前景。樱桃属于蔷薇科落叶乔木果树。
</p> </body>
</html>
按下Applesbutton后，浏览器会异步运行并取回所请求的文档：
javascript之Ajax起步的更多相关文章
- 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)
其他网站开发相关资料 超强HTML和xhtml,CSS精品学习资料下载汇总 最新htm ...
- 初识JavaScript，Ajax，jQuery，并比较三者关系
一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
- JavaScript实现Ajax小结
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...
- 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- javascript版Ajax请求
什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...
- Javascript与Ajax
不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...
- javascript进阶——Ajax
统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...
- Javascript and AJAX with Yii（在yii 中使用 javascript 和ajax）
英文原文:http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii /*** http://www.yiiframework. ...
- javascript实现ajax
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
随机推荐
- 2015北京网络赛 G Boxes BFS+打表
G Boxes 题意:n个位置摆有n个箱子,每次移动只能把相邻的垒起来,且上面的必须小于下面的.求摆成升序需要移动多少步. 思路:这里的n很小,只有7.但是bfs最快的情况需要2s左右,所以就打表了. ...
- Hive的单节点集群详细启动步骤
说在前面的话, 在这里,推荐大家,一定要先去看这篇博客,如下 再谈hive-1.0.0与hive-1.2.1到JDBC编程忽略细节问题 Hadoop Hive概念学习系列之hive三种方式区别和搭建. ...
- pig安装配置
pig的安装配置很简单,只需要配置一下环境变量和指向hadoop conf的环境变量就行了 1.上传 2.解压 3.配置环境变量 Pig工作模式 本地模式:只需要配置PATH环境变量${PIG_HOM ...
- DOM操作系列-01
]常见事件: //onclick 点击时触发事件. //ondblclick 双击时触发事件. //onkeydown 按键按下 //onkeypress 点击按键 //onke ...
- 如何在Ubuntu14.04中创建Python虚拟环境
在Ubuntu14.04中安装Python相对比较容易些,最简单的安装方法就是apt-get安装了,具体的教程可以戳这篇文章:在Ubuntu14.04中如何安装Python3和切换py2和py3环境. ...
- 小试VS 2017 开发Python Django项目过程一
一.新建项目python ->django web 项目 (选择带bootstrap风格与twwriter)项目名称iepiececomputing (ie计件计算)跳出窗体 -> 添加虚 ...
- SPI总线工作模式
一.SPI总线工作模式 SPI总线有四种工作模式,是由时钟极性选择(CPOL)和时钟相位选择(CPHA)决定的. CPOL = 0 ,SPI总线空闲为低电平,CPOL = 1, SPI总线空闲为高电平 ...
- Spark 性能相关參数配置具体解释－任务调度篇
作者:刘旭晖 Raymond 转载请注明出处 Email:colorant at 163.com BLOG:http://blog.csdn.net/colorant/ 随着Spark的逐渐成熟完好, ...
- eclipse的项目栏
点击window然后选择show view 然后选择project Explorer就会出现项目栏
- select选择框实现跳转
select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...