javascript之Ajax起步

最新推荐文章于 2022-08-18 15:42:39 发布

bboyjoe

最新推荐文章于 2022-08-18 15:42:39 发布

阅读量817

点赞数

分类专栏： Ajax 文章标签：前端网页设计 javascript ajax html5

本文链接：https://blog.csdn.net/bboyjoe/article/details/47021137

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

XMLHttpRequest readyState属性的值：

UNSENT——0——已创建XMLHttpRequest对象；

OPENED——1——已调用open方法；

HEADERS_RECEIVED——2——已收到服务器响应的标头；

LOADING——3——已收到服务器响应；

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].οnclick=handleButtonPress;
        }
        function handleButtonPress(e){
            //创建XMLHttpRequest对象
            var httpRequest=new XMLHttpRequest();
            //给readystatechange事件设置一个事件处理器
            httpRequest.onreadystatechange=handleResponse;
            //使用open方法来指定HTTP方法和需要请求的URL
            httpRequest.open("GET", e.target.innerHTML+".html");
            //给服务器发送数据
            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>

按下Apples按钮后，浏览器会异步执行并取回所请求的文档：

bboyjoe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript之Ajax起步

XMLHttpRequest readyState属性的值：UNSENT——0——已创建XMLHttpRequest对象；OPENED——1——已调用open方法；HEADERS_RECEIVED——2——已收到服务器响应的标头；LOADING——3——已收到服务器响应；DONE——4——响应完成或已失败；上海远地资产管理有限公司
复制链接

扫一扫