ajax呼叫cxf webservice介面和跨域
1.配置webservice
(可以參考部落格上cxf webservice的配置http://blog.csdn.net/zhshchilss/article/details/43763271)
按照上述配置,就可以使用java客戶端呼叫介面了
ajax的呼叫
1.額外的配置
新增兩個jar包:cors-filter-1.7.jar,java-property-utils-1.9.jar
web.xml新增filter:
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
上述配置是解決跨域問題的
後臺webservice介面
@WebService
public class Hello implements IHello{
public String sayHello(@WebParam(name="name") String name){
return "hello: " + name;
}
public List<Object> sayList() {
Person p = new Person();
p.setName("劉胡蘭");
p.setAge(22);
List<Object> list = new ArrayList<Object>();
list.add("2") ;
list.add("你好");
list.add(p);
// TODO Auto-generated method stub
return list;
}
/**
* 不知道怎麼傳物件
*/
public Person sayMap(String id , Person person ) {
Person p = new Person();
p.setName("劉胡蘭");
p.setAge(22);
// TODO Auto-generated method stub
return p;
}
public String findData(String type) {
JSONObject obj = new JSONObject() ;
if(type.equals("string")){
obj.put("data", sayHello("劉德華")) ;
}else if(type.equals("map")){
obj.put("data", sayMap(null, null)) ;
}else if(type.equals("list")){
obj.put("data", sayList()) ;
}
return obj.toJSONString() ;
}
ajax呼叫程式碼:
//ajax的各個屬性,也可以換一下,看看都報什麼問題
$.ajax({
//type必須get
type: 'get',
//contentType: 'application/json',
//這個路徑,webs是工程名,IService是在beans.xml配置的介面Hello的路徑,findData是Hello裡的方法,方法不用配置,呼叫哪個直接/方法名就可以
url: 'http://*.*.*.*:8080/webs/IService/findData',
//引數名必須arg0
data:{arg0:'list'},
//返回必須xml
dataType: 'xml',
success: function(result) {
var nodes = result.getElementsByTagName("return") ;
var value = nodes[0].firstChild.nodeValue ;
alert(value);
},
error: function(result, status) {
alert('error='+status);
}
});
期間遇到的問題:
1.ajax使用get之外的呼叫方式,後臺報錯(網上沒找到解決辦法)
2.後臺的入參如public Person sayMap(String id , Person person ) ,
ajax如果傳資料啊{id:1},後臺報錯。傳 data:{arg0:'list'},後臺就可以接到。
但是如果多個引數,第二個之後的還沒找到傳參欄位是啥
3.dataType需要是xml,因為返回的資料是xml格式的東西
4.success裡面解析資料,得到返回的return
其中,接口裡面的四個方法
返回string的介面,ajax接的的資料為:
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<ns2:sayHelloResponse xmlns:ns2="http://test.zhshch.com.webs/">
<return>hello: null</return>
</ns2:sayHelloResponse>
</soap:Body>
</soap:Envelope>
返回list的介面,ajax返回資料為:
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<ns2:sayListResponse xmlns:ns2="http://test.zhshch.com.webs/">
<return xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema" xsi:type="xs:string">2</return>
<return xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema" xsi:type="xs:string">你好</return>
<return xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ns2:person">
<age>22</age>
<name>劉胡蘭</name>
</return>
</ns2:sayListResponse>
</soap:Body>
</soap:Envelope>
返回vo的介面,ajax返回資料位:
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<ns2:sayMapResponse xmlns:ns2="http://test.zhshch.com.webs/">
<return>
<age>22</age>
<name>劉胡蘭</name>
</return>
</ns2:sayMapResponse>
</soap:Body>
</soap:Envelope>
如上三中,如果解析return的資料,不容易分辨解析vo,list,string
所以這裡對於ajax呼叫的介面,後臺一律定義為
public String findData(String type) {
JSONObject obj = new JSONObject() ;
//測試各種情況
if(type.equals("string")){
obj.put("data", sayHello("劉德華")) ;
}else if(type.equals("map")){
obj.put("data", sayMap(null, null)) ;
}else if(type.equals("list")){
obj.put("data", sayList()) ;
}
return obj.toJSONString() ;
}
一個入參,字串或json字串
所有返回,都返回json字串
然後前臺的接到的資料為:
json
string
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<ns2:findDataResponse xmlns:ns2="http://test.zhshch.com.webs/">
<return>{"data":"hello: 劉德華"}</return>
</ns2:findDataResponse>
</soap:Body>
</soap:Envelope>
vo:
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<ns2:findDataResponse xmlns:ns2="http://test.zhshch.com.webs/">
<return>{"data":{"age":22,"name":"劉胡蘭"}}</return>
</ns2:findDataResponse>
</soap:Body>
</soap:Envelope>
list
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<ns2:findDataResponse xmlns:ns2="http://test.zhshch.com.webs/">
<return>{"data":["2","你好",{"age":22,"name":"劉胡蘭"}]}</return>
</ns2:findDataResponse>
</soap:Body>
</soap:Envelope>
通過解析得到json字串
success: function(result) {
var nodes = result.getElementsByTagName("return") ;
var value = nodes[0].firstChild.nodeValue ;
//value的資料結構{data:****} ;
alert(value);
//然後把value轉成json物件,json.data就是後臺傳過來的vo,list,字串等
},
這是ajax呼叫webservice的例子
網上找了很多其他的例子,但是在本地都一直報錯。
這裡是我本地可以使用的例子