第五篇：移动APP开发- ajax请求以及服务端编写
前面把页面结构以及页面跳转做完以后，接下来就是数据获取。
首先就是列表数据获取，其次是详情页数据获取。
在前端中我们通过ajax请求java编写的接口获取数据，而今天要记录的就是前端请求接口的方式以及后端服务端数据接口的编写。
一.前端获取数据方式
我们都知道在传统的单例项目中，前端使用JSP，通过ajax以及表单提交，后端通过Struts2或者springMVC的dispatcher拦截这些请求从而返回数据，以往调用接口也是使用java调用远程接口，然后将数据返回到前端，现在问题来了：我们直接在前端中使用ajax去调用远程接口就有跨域问题，因为Ajax是不支持跨域问题的，因此我们是访问不到远程服务接口的。
关于跨域问题有一篇很好的博客推荐：https://segmentfault.com/a/1190000012469713
其实对于一个对前端不太了解的人来说跨域我是真的不太懂的，网上关于HBuilder开发APP解决ajax的跨域问题方案很多，不过许多都不行，你可以写个服务端简单的servlet，然后用官网那个ajax页面调用你的远程servlet，我当初解决方法说一下（我也不知道原理）
将页面引入的mui.js中大概3155行的setHeader('X-Requested-With', 'XMLHttpRequest');这句话注释掉。
当然可如果在真机运行时一般不会出现这个问题的。
请注意：跨域问题报错为：
XMLHttpRequest cannot load http://avst.tv/webAPP/web/index.php.
No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'http://127.0.0.1:8020'
is therefore not allowed access其他可能就是你的请求与返回的数据格式有问题了。
因为是请求的json数据，所以直接使用mui封装的mui.getJSON()。
mui.getJSON(
"http://qcph5j.natappfree.cc/YSJ/cxf/rest/product/List",
data,
function(rsp) {});由于在官网中有一个列表获取数据的例子，所以我将请求地址以及字段修改后就可以了
同样的详情页请求数据也是如此。
这里面有vue的影子，它用来将请求数据写入到html的元素中去，如果不喜欢使用它，完全可以使用jquery进行循环插入数据。
下面就是列表打开详情页：
首先在列表中预加载详情页，同时将部分数据传到详情页：
mui.plusReady(function() {
//预加载详情页
webview_detail = mui.preload({
url: 'product_info.html',
id: 'news_detail',
styles: {
"render": "always",
"popGesture": "hide",
"bounce": "vertical",
"bounceBackground": "#efeff4",
}
});
});
//打开详情
function open_detail(item) {
//触发子窗口变更新闻详情
mui.fire(webview_detail, 'get_detail', {
guid: item.guid,
title:item.title,
author:item.author,
time:item.time,
cover:item.cover
});
setTimeout(function () {
webview_detail.show("slide-in-right", 300);
},150);
}这样打开详情页之后就可以将传入过来的数据直接使用例如：{{guid}}来将guid数据写道html组件中。
之后剩余数据可以再次使用ajax去服务端请求。
二.服务端开发接口
客户端能够请求了，服务端接口就要进行开发了。
这里不讲解和数据库的交互了，主要简单的列出自己开发接口的方式。
采用rest风格的webservice进行接口开发，没错就是使用基于jax-rs风格
首先maven依赖
UTF-8
1.8
1.8
3.0.0
4.1.6.RELEASE
3.4.0
junit
junit
4.11
test
org.apache.cxf
cxf-rt-frontend-jaxws
${cxf.version}
org.apache.cxf
cxf-rt-frontend-jaxrs
${cxf.version}
org.apache.cxf
cxf-rt-transports-http
${cxf.version}
com.fasterxml.jackson.jaxrs
jackson-jaxrs-json-provider
2.4.1
org.springframework
spring-core
${spring.version}
org.springframework
spring-web
${spring.version}
org.springframework
spring-oxm
${spring.version}
org.springframework
spring-tx
${spring.version}
org.springframework
spring-jdbc
${spring.version}
org.springframework
spring-webmvc
${spring.version}
org.springframework
spring-aop
${spring.version}
org.springframework
spring-context-support
${spring.version}
org.springframework
spring-test
${spring.version}
org.mybatis
mybatis
${mybatis.version}
org.mybatis
mybatis-spring
1.3.0
javax.mail
mail
1.4
com.alibaba
fastjson
1.2.49
javax.servlet
javax.servlet-api
3.1.0
然后是编写接口：
package com.sjyang.webservice.serve;
/**
* @Author:Yangsaijun
* @Description:商品管理接口
* @Date Created in 16:55 2018/9/11
*/
import com.alibaba.fastjson.JSONObject;
import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
/***
* @Produces注释用来指定将要返回给client端的数据标识类型（MIME）。
* @Produces可以作为class注释，也可以作为方法注释，方法的@Produces注释将会覆盖class的注释。
* @Consumes与@Produces相反，用来指定可以接受client发送过来的MIME类型，同样可以用于class或者method，也可以指定多个MIME类型，一般用于@PUT，@POST
* @Path获取url中指定参数名称，例如@Path("{username"})
* @QueryParam 获取get请求中的查询参数
* @FormParam获取post请求中表单中的数据
* @BeanParam获取请求参数中的数据，用实体Bean进行封装
*
*/
@Path("/product")
@Produces({MediaType.APPLICATION_JSON})
@Consumes({MediaType.APPLICATION_JSON})
public interface Product {
//获取商品列表
@GET
@Path(value="/List")
public String getList();
@GET
@Path(value="/res1")
public Response getResponse();
@GET
@Path(value="/string/{name}")
public String getJson(@PathParam("name")String name);
@POST
@Path(value="/user")
public String postJson();
}
其中的注解如果规定Get请求则必须使用get请求，否则不通。然后编写实现类：
package com.sjyang.webservice.serve.impl;
import com.alibaba.fastjson.JSONObject;
import com.sjyang.webservice.serve.Product;
import javax.ws.rs.core.Response;
import javax.ws.rs.core.Response.Status;
/**
* @Author:Yangsaijun
* @Description
* @Date Created in 17:13 2018/9/11
*/
public class ProductImp implements Product {
/**
* 获取商品列表
* @return
*/
@Override
public String getList() {
String json = "[{\"id\":69729,\"from_id\":\"36kr\",\"title\":\"自定义标题\",\"summary\":\"不知道\",\"column_id\":\"208\",\"column_name\":\"列明\",\"author_name\":\"作者名\",\"author_email\":\"邮箱\",\"author_avatar\":\"\",\"post_id\":\"5152966\",\"cover\":\"https:\\/\\/pic.36krcnd.com\\/201809\\/12085419\\/1ffhy23bq6acvfxm!heading\",\"content\":\"\",\"views_count\":48,\"comments_count\":0,\"published_at\":\"2018-09-12 17:01:28\",\"store_at\":\"0000-00-00 00:00:00\",\"type\":\"news\",\"created_at\":\"2018-09-12 17:12:05\",\"updated_at\":\"2018-09-12 17:12:05\"}]";
return json;
}
@Override
public Response getResponse() {
Response.ResponseBuilder rb = Response.status(Status.OK);
return rb.entity("Hello").build();
}
@Override
public String getJson(String name) {
JSONObject json = new JSONObject();
json.put("name","ysj");
return json.toJSONString();
}
@Override
public String postJson() {
JSONObject json = new JSONObject();
json.put("name","ysj");
return json.toJSONString();
}
}
然后就是spring的配置文件配合CXF进行发布服务了：
这里因为我自己写了两个接口类，所以发布了两个，里面一共10个接口。
最后就是项目启动web.xml该做的事情了：
Archetype Created Web Application
contextConfigLocation
classpath:applicationContext.xml
org.springframework.web.context.ContextLoaderListener
cxf
org.apache.cxf.transport.servlet.CXFServlet
1
cxf
/cxf/*
60
index.jsp
启动项目，测试一下吧，访问地址是这样的几个部分组成：
http://IP:端口号/项目名/web.xml中cxf应该拦截的名/发布的地址/接口类定义的地址/方法前的地址
以我的为例：
http://localhost:8080/YSJ/cxf/rest/product/List就可以在浏览器里直接获取json数据啦
组合下：
