您的位置：首页 > 理论基础 > 计算机网络

XMLHttpRequest

2016-05-01 16:37 429 查看

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个，这里不作详解。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航