使用XMLHttpRequest进行浏览器和服务器的交互

最新推荐文章于 2024-10-11 08:30:00 发布

原创最新推荐文章于 2024-10-11 08:30:00 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

Javascript 同时被 2 个专栏收录

41 篇文章

订阅专栏

JS成品代码

17 篇文章

订阅专栏

本文介绍了如何使用XMLHttpRequest对象进行浏览器与服务器的交互，重点强调了HTTP响应状态码、AJAX无刷新特性、兼容性问题（尤其是IE8及以下版本）、同源策略限制以及跨域解决方案——JSONP。通过示例展示了XMLHttpRequest的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：

1.使用javascript发出HTTP请求时，需要用到XMLHttpRequest对象

2.HTTP相应包括一个相应码，指示是否有错误，request.status == 200 为正常

3.应用中无需重新加载页面，即所谓的AJAX

4.注意XMLHttpRequest的兼容性，1.0和2.0版本都要兼顾，ie8以下只支持1.0，所以使用时要注意，

使用request.onreadystatechange = function.... 来代替onload

使用request.readyState == 4 && request.status == 200 来进行判断 (4为1.0)

5.此方法只能用于浏览器和服务器在同一域（url）的情况，如果跨域，比如到别的域名的服务器去取数据，就会产生跨域的安全问题，会被浏览器组织，所以要用jsonp来取代使用，具体见jsonp的文章

6.目前来看，jsonp是一种取代它的好办法

例子：

window.onload = function()
{
var url = "http://localhost/gumball/sales.json";   //服务器取数据地址
var request = new XMLHttpRequest();   //创建对象
request.open("GET", url);  //芝麻开门
request.onreadystatechange = function()   
{
if (request.readyStatus == 4 && request.status == 200)
{
updateSales(request.responseText);
}
};
request.send(null);   //发送数据为空
*/
}


function updateSales(responseText)

{
var salesDiv = document.getElementById("sales");

var sales = JSON.parse(responseText); //将串转换为js对象
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);  //隔行显示
}
}
}