使用JS、ajax访问WebService跨域

原文链接：http://blog.csdn.net/qq_18895659/article/details/51785273

如需转载请联系听云College团队成员小尹邮箱：yinhy#tingyun.com

通过js来访问webservice有两种不同的形式

1、通过SOAP协议进行访问。

发送的全部是XML数据，且必须是POST请求。

2、通过HTTP的get/post方式进行访问。

此种情况又分成不同的形式，此种情况必要在cxf下发布。因为jdk1.6基本的发布不支持Http,soap1.2。

使用AJAX跨域访问WebService-之基于SOAP的xml数据：

JS一直存在跨域访问的问题。

目前的jQuery不支持跨域访问。如果要进行访问必须使用jQuery的jsonp数据形式。但原始的ajax可以通过get/post方式跨域访问http上的资源。以下是通过jax发布webservice。并通过js实现访问webService.

第一步：书写一个webService，通过Endpoint端点服务发布。

[java] view plain copy 在CODE上查看代码片派生到我的代码片
import javax.jws.WebMethod;  
import javax.jws.WebParam;  
import javax.jws.WebResult;  
import javax.jws.WebService;  
import javax.xml.ws.Endpoint;  
  
//1、表示这是一个web服务  
@WebService  
public class HelloService {  
    /** 
     * 1、至少保证一个可以对外公开的服务 
     *    对外提供服务无非就是提供个方法给外部调用,如果一个服务类没有方法,那发布它是没有意义的 
     */  
  
    public String sayHello(@WebParam(name="name") String name){  
        System.out.println("sayHello()..."+name);  
        return  "hello " + name;  
    }  
    public static void main(String[] args) {  
        /** 
         * Endpoint 服务端点类,利用该类来发布服务 
         * 参数1：服务的发布地址 
         * 参数2：服务的实现者 
         *  
         * publish发布成功后，会启动一个新线程来监听对 http://ip地址/hello 这个地址的请求 
         */  
        Endpoint.publish("http://192.168.1.109:8080/hello", new HelloService());  
        //接着就可以查看wsdl了浏览器中打开:http://172.16.35.55:8080/hello?wsdl  
        //如果正常返回就说明发布成功 so easy!      
        //问个多线程问题....以下输出语句能执行吗？  
        System.out.println("web服务已经启动...");  
          
        //注意：必须至少要有一个公共方法，否则发布异常. 静态方法，和final修饰的方法不会被发布   
    }  
}

第二步：书写XMLHttpRequest的ajax对像，设法获取请求webService的XML数据和WebService返回的数据，以便于数据解析。

[html] view plain copy 在CODE上查看代码片派生到我的代码片
<html>  
<head>  
<title>通过ajax调用WebService服务</title>  
<script>  
              
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");  
        function sendMsg(){  
       var name = document.getElementById('name').value;  
      //服务的地址  
       var wsUrl = 'http://192.168.1.102:8080/hello';  
      //请求体  
      var soap = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://ws.luowg.com/"              
  
                  xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">' +   
                  ' <soapenv:Body> <q0:sayHello><name>'+name+'</name>  </q0:sayHello> </soapenv:Body>         
                                                                  </soapenv:Envelope>';  
                //打开连接  
                xhr.open('POST',wsUrl,true);  
                  
                //重新设置请求头  
                xhr.setRequestHeader("Content-Type","text/xml;charset=UTF-8");  
                  
                //设置回调函数  
                xhr.onreadystatechange = _back;  
                  
                //发送请求  
                xhr.send(soap);  
            }     
            function _back(){  
                if(xhr.readyState == 4){  
                    if(xhr.status == 200){  
                            //alert('调用Webservice成功了');  
                            var ret = xhr.responseXML;  
                            var msg = ret.getElementsByTagName('return')[0];  
                            document.getElementById('showInfo').innerHTML = msg.text;  
                            //alert(msg.text);  
                        }  
                       }  
                  }  
</script>  
</head>  
    <body>  
    <input type="button" value="发送SOAP请求" onclick="sendMsg();">  
    <input type="text" id="name">  
    <div id="showInfo">  
    </div>  
     </body>  
</html>

想阅读更多技术文章，请访问听云技术博客，访问听云官方网站感受更多应用性能优化魔力。