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。

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

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

猜你喜欢