javascript之使用Ajax事件

最新推荐文章于 2022-07-25 19:17:05 发布

bboyjoe

最新推荐文章于 2022-07-25 19:17:05 发布

阅读量1k

点赞数

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

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

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

XMLHttpRequest对象定义的事件：

abort——在请求被终止时触发（ProgressEvent）;

error——在请求失败时触发（ProgressEvent）;

load——在请求成功完成时触发（ProgressEvent）;

loadend——在请求已完成时触发，无论成功还是发生错误（ProgressEvent）;

loadstart——在请求开始时触发（ProgressEvent）;

progress——触发以提示请求的进度（ProgressEvent）;

readystatechange——在请求生命周期的不同阶段触发（Event）;

timeout——如果请求超时则触发（ProgressEvent）;

注：考虑到浏览器对其它事件的支持还不到位，readystatechange是目前唯一能可靠追踪请求进度的事件。

ProgressEvent对象定义的额外属性：

lengthComputable——如果能够计算数据流的长度则返回true;

loaded——返回当前已载入的数据量；

total——返回可用的数据总量；

<!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">
        table{
            margin:10px;
            border-collapse: collapse;
            float: left;
        }
        th,td{
            padding: 4px;
        }
        div{
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <button>Apples</button>
        <button>Cherries</button>
        <button>Bananas</button>
    </div>
    <div id="target">
        加载内容
    </div>
    <table id="events" border="1">

    </table>
    <script>
        //使用XMLHttpRequest定义的一次性事件
        var buttons=document.getElementsByTagName("button");
        for(var i=0;i<buttons.length;i++){
            buttons[i].οnclick=handleButtonPress;
        }
        var httpRequest;
        function handleButtonPress(e){
            clearEventDetails();
            httpRequest=new XMLHttpRequest();
            httpRequest.onreadystatechange=handleResponse;
            httpRequest.οnerrοr=handleError;
            httpRequest.οnlοad=handleLoad;
            httpRequest.onloadend=handleLoadEnd;
            httpRequest.οnlοadstart=handleLoadStart;
            httpRequest.οnprοgress=handleProgress;
            httpRequest.open("GET", e.target.innerHTML+".html");
            httpRequest.send();
        }
        function handleResponse(e){
            displayEventDetails("readystate("+ httpRequest.readyState +")");
            //处理响应
            if(httpRequest.readyState==4 && httpRequest.status==200){
                document.getElementById("target").innerHTML= httpRequest.responseText;
            }
        }
        function handleError(e){displayEventDetails("error",e);}
        function handleLoad(e){displayEventDetails("load",e);}
        function handleLoadEnd(e){displayEventDetails("loadend",e);}
        function handleLoadStart(e){displayEventDetails("loadstart",e);}
        function handleProgress(e){displayEventDetails("progress",e);}
        function clearEventDetails(){
            document.getElementById("events").innerHTML="<tr><th>Event</th><th>lengthComputable</th><th>loaded</th><th>total</th></tr>"
        }
        function displayEventDetails(eventName,e){
            if(e){
                document.getElementById("events").innerHTML+="<tr><td>"+eventName+"</td><td>"+ e.lengthComputable+"</td><td>"+ e.loaded+"</td><td>"+ e.total+"</td></tr>";
            }else{
                document.getElementById("events").innerHTML+="<tr><td>"+eventName+"</td><td>NA</td><td>NA</td><td>NA</td></tr>";
            }
        }
    </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>

bboyjoe

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript之使用Ajax事件

XMLHttpRequest对象定义的事件：abort——在请求被终止时触发（ProgressEvent）;error——在请求失败时触发（ProgressEvent）;load——在请求成功完成时触发（ProgressEvent）;loadend——在请求已完成时触发，无论成功还是发生错误（ProgressEvent）;loadstart——在请求开始时触发（Progress
复制链接

扫一扫

专栏目录