|
|
3#
楼主 |
发表于 2018-4-25 15:34:13
|
只看该作者
< html >
< head >
< title > JS Interface Test </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< script type ="text/javascript" src ="http://test.com/json.txt" ></ script >
< script type ="text/javascript" >
alert(json.programmers[ 0 ].firstName + ',' + json.programmers[ 0 ].lastName + ',' + json.programmers[0 ].email);
alert(json.programmers[ 1 ].firstName + ',' + json.programmers[ 1 ].lastName + ',' + json.programmers[1 ].email);
alert(json.programmers[ 2 ].firstName + ',' + json.programmers[ 2 ].lastName + ',' + json.programmers[2 ].email);
alert(json.authors[ 0 ].firstName + ',' + json.authors[ 0 ].lastName + ',' + json.authors[ 0 ].genre);
alert(json.authors[ 1 ].firstName + ',' + json.authors[ 1 ].lastName + ',' + json.authors[ 1 ].genre);
alert(json.authors[ 2 ].firstName + ',' + json.authors[ 2 ].lastName + ',' + json.authors[ 2 ].genre);
alert(json.musicians[ 0 ].firstName + ',' + json.musicians[ 0 ].lastName + ',' + json.musicians[ 0].instrument);
alert(json.musicians[ 1 ].firstName + ',' + json.musicians[ 1 ].lastName + ',' + json.musicians[ 1].instrument);
</ script >
</ head >
< body >
</ body >
</ html >
运行后可看到运行结果与《 JSON 知识总结入门篇》第一个实例的运行结果一致。
3. http 接口
3.1 接口方式说明和优缺点
需要为第三方提供一个接口，本来打算继续使用 Web Service接口，结果那边的开发人员说，他们没有
使用过Web Service接口（是做 IPTV的一个公司），希望我们能够提供 http方式的接口。
另外我们一般在提供 Web Sservice接口的同时，也对外提供 http接口。
3.2 开发实例
3.2.1 向http接口发送消息的使用小程序
本实例对自己提供请求信息为xml格式的http接口，将xml格式的请求信息发给http接口的地址后，将
调用接口的返回消息简单的显示在页面，为了简便起见，笔者没有对js代码进行包装。
该html文件代码如下：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=GB2312" >
< title > http interface test </ title >
< meta http-equiv ="pragma" content ="no-cache" >
< meta http-equiv ="cache-control" content ="no-cache" >
< meta http-equiv ="expires" content ="0" >
< script >
// XMLHttpRequest
var http_request = false ;
function send_request(method, url, content, responseType, callback) {
http_request = false ;
// XMLHttpRequest
if (window.XMLHttpRequest) {
// Mozilla
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// MIME
http_request.overrideMimeType( " text/xml " );
}
} else if (window.ActiveXObject) {
// IE
try {
http_request = new ActiveXObject( " Msxml2.XMLHTTP " );
} catch (e) {
try {
http_request = new ActiveXObject( " Microsoft.XMLHTTP " );
}
catch (e) {}
}
}
if ( ! http_request) {
window.alert( " XMLHttpRequest create Error. " );
return false ;
}
if (responseType.toLowerCase() == " text " || responseType.toLowerCase() == " xml " ) {
http_request.onreadystatechange = callback;
} else {
window.alert( " error responseType. " );
return false ;
}
if (method.toLowerCase() == " get " ) {
http_request.open(method, url, true );
} else if (method.toLowerCase() == " post " ) {
http_request.open(method, url, true );
http_request.setRequestHeader( " Content-Type " , " text/xml " );
} else {
window.alert( " http method error. " );
return false ;
}
http_request.send(content);
}
function submitInfo()
{
var form = document.httpTestForm;
var pathInfo = form.pathInfo.value;
var xmlInfo = form.xmlInfo.value;
form.returnInfo.value = " wait " ;
send_request( " POST " , pathInfo, xmlInfo, " xml " , showHttpTestBack);
}
function showHttpTestBack() {
if (http_request.readyState == 4 )
{
if (http_request.status == 200 )
{
var responseInfo = http_request.responseText;
var form = document.httpTestForm;
form.returnInfo.value = responseInfo;
}
}
}
</ script >
</ head >
< body >
< form name ="httpTestForm" action ="" method ="post" >
< table width ="100%" border ="1" >
< tr >
< td colspan ="2" align ="center" >
< b > http interface Test </ b >
</ td >
</ tr >
< tr >
< td > xmlInfo: </ td >
< td >
< textarea id ="xmlInfo" name ="xmlInfo" cols ="100" rows ="5" ></ textarea >
</ td >
</ tr >
< tr >
< td > pathInfo: </ td >
< td >
< input type ="text" name ="pathInfo" value ="http://192.168.2.154:16000/Mbd/http/video" size="100" />
</ td >
</ tr >
< tr >
< td > returnInfo: </ td >
< td >
< textarea name ="returnInfo" id ="returnInfo" cols ="100" rows ="5" ></ textarea >
</ td >
</ tr >
< tr >
< td colspan ="2" align ="center" >
< input type ="button" name ="submitButton1" value ="Submit" onclick ="javascript:submitInfo()" />
</ td >
</ tr >
</ table >
</ form >
</ body >
</ html >
访问该页，页面很简单，输入正确的 xml请求消息，和正确的路径信息，点击“ Submit”按钮，通过 ajax调用
http端口，并在成功取得信息后将返回结果显示在最后一个文本框：
3.2.2 作为提供商提供http接口
在这个实例中，服务器提供了一个 http接口，在这里是一个 jsp页面的访问地址，实际应用过程中，可以是Servlet或 Action的访问地址，在这个实例中，客户端发送 http get发送请求，带上了 hotel（宾馆信息）和name（顾客姓名）， http接口程序拿到参数信息后，根据一定算法检查分配空闲房间号，这里为了简便起见，只是随机的生成一个数字返回给客户端。 http接口的简单程序 httpInterface.jsp如下所示：
<% @ page language = " java " contentType = " text/html; charset=UTF-8 " pageEncoding = " UTF-8 " %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<%
Double room = 500 * Math.random();
out.write( " hotel= " + request.getParameter( " hotel " )
+ " ;name= " + request.getParameter( " name " )
+ " ;room= " + room.intValue());
out.close();
%>
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< title > http Interface </ title >
< meta http-equiv ="pragma" content ="no-cache" >
< meta http-equiv ="cache-control" content ="no-cache" >
< meta http-equiv ="expires" content ="0" >
</ head >
< body >
</ body >
</ html >
可在 IE 上带上参数访问这个地址，可看到参考的结果信息，例如访问 http://IP:端口 / 应用名称/httpInterface.jsp?hotel=motel&name=amigo ，参考返回结果如下：
hotel=motel;name=amigo;room=407 |
|
/1 
关于我们
发表于 2018-4-25 15:33:00
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
微信
收藏
置顶服务
换色服务
