关于AJAX请求JSON数据(解决responseText空的问题)

JavaScript 专栏收录该内容
27 篇文章 0 订阅

AJAX请求服务器提供的JSON数据

大家在前后端交互时,前台网页会和后台服务器以及数据库进行交互。感觉比较基础的就是将从后台获取的数据显示到页面中。最近,刚开始使用AJAX处理数据交互,遇到一些问题,并且解决了,做以下分享。

众所周知,AJAX的核心是XMLHttpRequest对象。它完成了对数据的请求以及获取。见下:

var xhr = new XMLHttpRequest();
var url = "要访问的服务器地址的数据页面";
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        alert(this.responseText);
        var myObject = JSON.parse(this.responseText);
    }
};
xhr.send(null);

代码的含义大家估计都懂,看看MDN,看看书都明白。我说下自己遇到的问题,在对服务器的数据访问时,总是获取不到responseText的值,不是null,是空白。代码很简单,含义很明了,就是不知道为什么获取不到服务器提供给我的json数据。

我访问的url可以在本机浏览器访问到数据页面。显示的是JSON数据,可就是无法通过
xhr对象获取数据。网上的答案大多是代码出现问题,导致无法获取。甚至有些朋友说是浏览器的问题(ff不支持?),更可笑的是有人把ture改为false(他还成功了?),异步和同步不都是访问数据吗?更改后对responseText的值没有任何影响。本质上是涉及到了同源策略的问题。

简单来说:两个页面的协议、域名、端口号都得相同才能互相通信。

我的页面ip地址明显和服务器的ip地址不同,所以是不同源的访问。服务器本身是拒绝的。在浏览器的检查窗口进行查看,network(网络)那里请求是成功的,显示200,对啊我可以访问到数据页面,就是获取不到数据,所以显示获取到的字节是0字节。我赶紧去联系后台姐姐,她竟然没有把自己的访问权限设置为*。

要想实现获取数据,必须解决同源问题。js中的跨域方案很多很多,一种比较简单而且公认的标准方案是CORS。

后台服务器需要在url的响应头中添加如下代码:

Access-Control-Allow-Origin:*

不同后台语言格式不同,大家自行解决。本人本机测试用的node.js,服务器那边的java程序没太注意。

//node.js设置响应头
    res.setHeader('Access-Control-Allow-Origin', '*');

后台设置好后,我这边的请求它就很快响应,并且获取到了指定url的JSON数据,返回给了xhr对象的responseText。接下来就可以对数据进行随意蹂躏了。

一般的用法是将数据导入到表格吧,才疏学浅。

直接显示

<div id="list"></div>
document.getElementById('list').innerHTML = 'xhr.responseText';

表格
大概思想是,将json数据反序列化为js对象,然后将对象中的json数据一一对应到表格中,少不了循环,少不了动态添加td。

//假设头结构已就位<thead></thead>
<tbody id="staff-body">
</tbody>
<script>
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://xxx.xxx.x.xxx:9999/User/userList", true);
    xhr.send(null);
    xhr.onreadystatechange = function (){
    if (xhr.readyState === 4 && xhr.status === 200) {
        var _json = JSON.parse(xhr.responseText);
        var tbody = document.getElementById('staff-body');
        for (var i = 0; i < _json.length; i++){
            var h = _json[i];
            var html = "";
            var _tr = document.createElement('tr');
            html += "<td class='alt'>" + h.address + "</td>";
            html += "<td class='alt'>" + h.email + "</td>";
            html += "<td class='alt'>" + h.id + "</td>";
            html += "<td class='alt'>" + h.log_name + "</td>";
            html += "<td class='alt'>" + h.name + "</td>";
            html += "<td class='alt'>" + h.password + "</td>";
            html += "<td class='alt'>" + h.sex + "</td>";
            html += "<td class='alt'>" + h.tel + "</td>";
            html += "<td class='alt'>" + h.email + "</td>";
            html += "<td class='alt'>" + h.birthday + "</td>";
            html += "<td class='alt'>" + h.last_time + "</td>";
            html += "<td class='alt'>" + h.last_ip + "</td>";
            html += "<td class='alt'><button>更新</button></td>";
            html += "<td class='alt'><button>删除</button></td>";

            _tr.innerHTML = html;
            tbody.appendChild(_tr);
            }
        }
    };
</script>

代码非常粗略,而且可能会有错,感觉自己也没讲太清楚,有问题希望大家可以和我沟通沟通,这样我就会学到很多东西。虽然jq,框架、模板等请求获取数据很easy,可额偏爱原生js。

  • 3
    点赞
  • 5
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值