第三步 添加 JavaScript 代码 |
为实现获取服务器上的地图列表的功能,需要添加 JavaScript 代码到 HelloREST.html 页面的如下地方:
<script type="text/javascript"> //示例代码添加的地方 </script>
加入 getcommit()方法,用于获取浏览器支持的 XMLHTTP 组件。
//示例代码添加的地方
//获取浏览器支持的 XMLHTTP 组件 function getcommit(){ var commit = null; try{ commit = new ActiveXObject("Msxml2.XMLHTTP"); }catch(ex){ try{ commit = new ActiveXObject("Microsoft.XMLHTTP"); }catch(ex){ this.commit=null; } } if(!commit && typeof XMLHttpRequest != "undefined"){ commit = new XMLHttpRequest(); } return commit; }
在 getcommit()方法的下面编写 getMapsList()方法,用于获取地图列表。
function getMapsList(){ //获取 XMLHttpRequest 对象 var commit=getcommit(); //HTTP 请求的方法类型,这里是 GET var method="GET"; //请求的地址 var url="http://localhost:8090/iserver/services/map-china400/rest/maps.json"; //设置是否为异步通信 var async=false; //用户名和密码,当服务器需要验证时指定 var user=""; var password=""; //消息体(Entity Body)内容 var entry=null; //建立 HTTP 连接 commit.open(method,url,async,user,password); //设置消息头(Message Headers) commit.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); //发送 HTTP 请求 commit.send(entry); //commit.responseText 就是接收的服务器响应 //解析从服务器端返回的 json 字符串,解析为一个 JavaScript 对象。 var response = json_parse(commit.responseText, null); //获取用作显示的 Div 容器。 var container = document.getElementById('container'); //获取地图的个数 var len=response.length; container.innerHTML=""; for(var i=0;i<len;i++){ container.innerHTML += '<li>地图名:' + response[i].name + ',访问路径:' + response[i].path + '</li>'; } }