XMLHttpRequest

最新推荐文章于 2024-01-14 16:51:38 发布

学习笔记666

最新推荐文章于 2024-01-14 16:51:38 发布

阅读量601

点赞数

分类专栏： HTML5 文章标签： xmlhttprequest

本文链接：https://blog.csdn.net/github_26672553/article/details/51290852

版权

HTML5 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

1.如何从javascript做出请求

<!DOCTYPE html>
<html>
<head>
    <title>地理定位跟踪</title>
</head>
<body>
<h1>销售数据列表</h1>
<div id="sales">

</div>
</body>
<script type="text/javascript">
    /*
    如何从javascript做出请求
    */  
    window.onload = function(){
        var url = "http://localhost/sales.json";

        // 使用XMLHttpRequest构造函数创建一个新的请求对象
        var request = new XMLHttpRequest();
        request.onload = function(){
            if (request.status == 200) {
                // console.log("请求成功");
                // console.log(request.responseText);
                updateSales(request.responseText);
            }
        };
        // 使用HTTP GET是获取HTTP数据的标准方法
        request.open("GET",url);
        // 这里把请求发送到服务器，如果不打算向远程服务器发送任何数据，就要传入null
        request.send(null);
    }

    // 把请求返回来的数据展示到页面
    function updateSales(responseText){
        var salesDiv = document.getElementById("sales");

        // 因为我这里取回来的数据是一个JSON字符串，需要转换为一个真正的JS对象
        var sales = JSON.parse(responseText);
        // console.log(sales);
        // 遍历所得到的数组，向DOM增加新元素
        for(var i=0;i<sales.length;i++){
            var sale = sales[i];
            var div = document.createElement("div");
            div.setAttribute("class","saleItem");
            div.innerHTML = sale.name + "==>" + sale.time + "==>" + sale.sales;
            salesDiv.appendChild(div);
        }
    }
</script>
</html>

sales.json:

[
    {"name":"ARTESIA","time":1308774240669,"sales":8},
    {"name":"LOS","time":1308774240669,"sales":2},
    {"name":"PASADENA","time":1308774240669,"sales":8},
    {"name":"STOCKTON","time":1308774240669,"sales":2},
    {"name":"FRESNO","time":1308774240669,"sales":2}
]

2.较老的浏览器不支持XMLHttpRequest onload属性
我们使用request.onload定义了一个函数，从服务器获取数据的请求完成时就会调用这个函数。这是XMLHttpRequest Level 2的一个特性，XMLHttpRequest Level2还相当新，所以很多浏览器可能还不支持，你还可以继续使用版本1的特性：

function init (){
        var url = "http://localhost/sales.json";
        var request = new XMLHttpRequest();

        request.onreadystatechange = function(){
            if (request.readyState == 4 && request.status == 200) {
                updateSales(request.responseText);
            }
        };
        request.open("GET",url);
        request.send(null);
    }

3.IE 8-
在IE9以前，IE浏览器没有XMLHttpRequest对象，而是ActiveXObject和XDomainRequest。关于这2个，这里不作详解。

学习笔记666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest

1.如何从javascript做出请求<!DOCTYPE html><html><head> <title>地理定位跟踪</title></head><body><h1>销售数据列表</h1><div id="sales"></div></body><script type="text/javascript"> /* 如何从javascript做出请求
复制链接

扫一扫