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。