js中的XMLHTTPRequest

最新推荐文章于 2022-09-21 21:03:44 发布

weixin_30596023

最新推荐文章于 2022-09-21 21:03:44 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/themost/p/9428237.html

本文通过一个具体的示例展示了如何使用 JavaScript 的 XMLHttpRequest 对象发起 HTTP 请求并处理响应。此过程包括设置请求方式、监听加载完成事件、解析 JSON 数据以及更新页面内容。

window.onload = function(){
    //var url = "http://localhost:8000/sales.json";
    var url = "http://gumball.wickedlysmart.com";
    //从JaveScript发出一个HTTP请求， 需要使用XMLHttpRequest对象
    var request = new XMLHttpRequest();
    request.open("GET", url);
    request.onload = function(){
        if (request.status === 200){
            console.log(request.responseText);
            updateSales(request.responseText);
        }
    };
    request.send(null);
}

function updateSales(responseText){
    var salesDiv = document.getElementById("sales");
    //要把responseText串转换未JSON，可以使用JSON.parse方法，反之使用JSON.stringify
    var sales = JSON.parse(responseText);
    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 + " sold " + sale.sales + " gumballs";
        salesDiv.appendChild(div);
    }
}