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起步的更多相关文章

  1. 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)

    其他网站开发相关资料            超强HTML和xhtml,CSS精品学习资料下载汇总                                               最新htm ...

  2. 初识JavaScript，Ajax，jQuery，并比较三者关系

    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...

  3. JavaScript实现Ajax小结

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...

  4. 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  5. javascript版Ajax请求

    什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...

  6. Javascript与Ajax

    不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...

  7. javascript进阶——Ajax

    统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...

  8. Javascript and AJAX with Yii（在yii 中使用 javascript 和ajax）

    英文原文:http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii /*** http://www.yiiframework. ...

  9. javascript实现ajax

    什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...

随机推荐

  1. thinkphp使后台的字体图标显示异常

    thinkphp使后台的字体图标显示异常 相似问题 1.thinkPHP的这些图标都不显示了-CSDN论坛https://bbs.csdn.net/topics/391823415 解答: 发现在别的 ...

  2. Android控件-TabHost（二）

    这边再补充一种更为灵活的方法,可以把TabWidget隐藏,用(RadioGroup+RadioButton)来代替,并利用监听器的方式来实现监听点击点击跳转Activity. 在讲解之前,先补充几点 ...

  3. dos 实用命令搜集

    dos 命令: 1.netstat -an 2.XP下打开凭证管理:  control keymgr.dll 3.刷新DHCP协议,重新自动获取IP *   ipconfig/release 命令来丢 ...

  4. yum配置中driver-class-name: com.mysql.jdbc.Driver报错

    错误: 原因: 解决方法:把方框中的<scope>runtime</scope>删掉

  5. centos下安装redis/mysql等基础环境

    1.修改语言 阿里云的ECS默认语言是:en_US.UTF-8,需要改成zh_CN.UTF-8 修改方法:vim /etc/locale.conf,然后重启. 查看方法:echo $LANG 2.安装 ...

  6. P2186 小Z的栈函数

    P2186 小Z的栈函数 题目描述 小Z最近发现了一个神奇的机器,这个机器的所有操作都是通过维护一个栈来完成的,它支持如下11个操作: NUM X:栈顶放入X. POP:抛弃栈顶元素. INV:将栈顶 ...

  7. 流媒体技术 rtp/rtcp/rtsp资料精华！

     流媒体技术 rtp/rtcp/rtsp资料精华! 流媒体技术 流媒体是指在网络中使用流式(Sreaming)传输技术进行传输的连续时基媒体.如音频数据流或视频数据流,而不是一种新的媒体.流媒体技 ...

  8. poj1328Radar Installation 贪心

    Radar Installation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 64472   Accepted: 14 ...

  9. 自建的IPV6管道

    前阵子琢磨IPV6,建立了一个给本机分配IPV6地址的管道,不怎么稳定  http://6tu.me

  10. jQuery源码04 data() : 数据缓存

    /* Implementation Summary 1. Enforce API surface and semantic compatibility with 1.9.x branch 2. Imp ...