ionic云开发系列二之调用webservice

在上一篇文章已经讲了框架的搭建，接下来讲一下怎么调用webservice获取数据吧，这里将为大家介绍的是JAX-RS，就是Java API for RESTful Web Services，不要问我为什么用它，如果你知道它有多么方便就不会问了。

1. 新建一个maven项目，项目依赖如下（pom.xml）：

<project ...>

	<repositories>
		<repository>
			<id>maven2-repository.java.net</id>
			<name>Java.net Repository for Maven</name>
			<url>http://download.java.net/maven/2/</url>
			<layout>default</layout>
		</repository>
	</repositories>

	<dependencies>
	
		<dependency>
			<groupId>com.sun.jersey</groupId>
			<artifactId>jersey-server</artifactId>
			<version>1.8</version>
		</dependency>

	</dependencies>
	
</project>

对，你没有看错，只依赖了一个jersey-server包，是不是很神奇

2. 建一个普通的java类当作我们的webservice类，代码如下：

package com.ndh.rest;
 
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.core.Response;
 
@Path("/hello")
public class HelloWorldService {
 
	@GET
	@Path("/{param}")
	public Response getMsg(@PathParam("param") String msg) {
 
		String output = "Jersey say : " + msg;
 
		return Response.status(200).entity(output).build();
 
	}
 
}

熟悉RESTful开发的你看到这样的代码肯定不会陌生吧

3. 再来配置一下web.xml，加上jersey的ServletContainer容器和指定你的webservice文件夹：

<web-app id="WebApp_ID" version="2.4"
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>Restful Web Application</display-name>

	<servlet>
		<servlet-name>jersey-serlvet</servlet-name>
		<servlet-class>
                     com.sun.jersey.spi.container.servlet.ServletContainer
                </servlet-class>
		<init-param>
		     <param-name>com.sun.jersey.config.property.packages</param-name>
		     <param-value>com.ndh.rest</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>jersey-serlvet</servlet-name>
		<url-pattern>/rest/*</url-pattern>
	</servlet-mapping>

</web-app>

4. 配置完了就来运行吧，呵呵

5. 细心的同学可能会问了，这不是javaweb编程吗，好像不是webservice吧，这也难怪，简单的不像是webservice，那我们用js调用一下吧

var xhr = new XMLHttpRequest();
xhr.open("GET","http://127.0.0.1:8080/RESTfulExample/rest/json/metallica/get",true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      alert(xhr.responseText);
    }
}
xhr.send();

然后你看到了什么？没错，弹了个空白的alert框，我用的是google浏览器，按一下F12，看到了红色的提示：

没错，一看就猜了个大概，跨域访问的问题，那怎么解决呢，网上搜了一下，解决方法如下：

Response加上允许跨域的请求头：

return Response.status(200).header("Access-Control-Allow-Origin","*").entity(output).build();

OK，再试试，这回能看到了吧：

细心的同学就会发问了，不能每个返回都加这玩意儿吧，我也是这么想的，程序员总是想方设法偷懒，继续网上搜呀搜，终于找到了，一个是自己动手写过滤器：

package your.package;

public class CORSFilter implements ContainerResponseFilter {

    @Override
    public ContainerResponse filter(ContainerRequest creq,ContainerResponse cresp) {

        cresp.getHttpHeaders().putSingle("Access-Control-Allow-Origin","*");
        cresp.getHttpHeaders().putSingle("Access-Control-Allow-Credentials","true");
        cresp.getHttpHeaders().putSingle("Access-Control-Allow-Methods","GET,POST,DELETE,PUT,OPTIONS,HEAD");
        cresp.getHttpHeaders().putSingle("Access-Control-Allow-Headers","Content-Type,Accept,X-Requested-With");

        return cresp;
    }
}

然后web.xml再配置一下：

<servlet>
<servlet-name>CORS Filter</servlet-name>
<servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
 <init-param>
    <param-name>com.sun.jersey.spi.container.ContainerResponseFilters</param-name>
    <param-value>your.package.CORSFilter</param-value>
 </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>CORS Filter</servlet-name>
    <url-pattern>/webservices/*</url-pattern>
</servlet-mapping>

好像挺麻烦的，再找一下有没有更好的方法，终于找到了这个网站： cros

我们点一下这个

就看到了这句话：Access-Control-Allow-Origin: *

点一下下方的tomcat，终于找到了，原来tomcat已经帮我们写好了，就等我们配置了：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

修改一下加上我们的初始化参数和允许的url正则表达式：

<filter>
	<filter-name>CorsFilter</filter-name>
	<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
	<init-param>
		<param-name>cors.allowed.origins</param-name>
		<param-value>*</param-value>
	</init-param>
</filter>
<filter-mapping>
	<filter-name>CorsFilter</filter-name>
	<url-pattern>/rest/*</url-pattern>
</filter-mapping>

OK，把我们的返回那句话简化回来：

return Response.ok(output).build();

再继续访问，弹出框显示Jersey say : svygh123，OK了。

PS::::我的js调用是写在上一节检出的ionic项目的www/js/controller.js里面的哦，随便定义一个函数，在按钮上绑定单击就可以测试了。

下一节再说一下怎么返回json吧。