上一周使用ajax调用第三方接口遇到跨域,一系列的解决方法都没有实现,
发现都需要服务端的支持,最总自己编写后台获取到数据在调用。
当时就是使用的HttpURLConnection类,现在做一个总结。
一、操作步骤
- 根据url地址创建URL对象
- url.openConnection() 得到HttpURLConnection
- 设置HttpURLConnection的配置(会根据配置生成http请求头信息)
- httpConn.connect()建立与服务器的TCP连接
- 通过httpConn得到输出流,并写入参数
- 通过httpConn得到输入流,并读取服务器返回信息(这时才真正产生http请求发送给服务器,但可以根据配置来改变;一般返回可能是html字符串)
二、实例
用ajax获取到 (http://www.xiaoliaoba.cn/api) 给定接口的数据,进去后先显示5条,点击显示更多,在加5条。
- 工具类(核心)
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.InetSocketAddress;
import java.net.MalformedURLException;
import java.net.Proxy;
import java.net.URL;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
/**
*
* 描述:请求url工具类
* @since 1.0
* @author lsliang 2017年3月6日
*/
public class HttpURLConnectionTools {
private static final Log LOG = LogFactory.getLog(HttpURLConnectionTools.class);
/**
* 描述:通过get方式请求
* @param urlStr String url地址
* @return String 所获得的数据
* @since 1.0
* @author lsliang 2017年3月6日 创建方法
*/
public static String httpURLConectionGET(String urlStr){
StringBuffer json = new StringBuffer();
try {
URL url = new URL(urlStr); // 把字符串转换为URL请求地址
HttpURLConnection connection = (HttpURLConnection) url
.openConnection();// 打开连接
connection.connect(); //连接会话
//获取输入流
InputStreamReader in = new InputStreamReader(
connection.getInputStream());
BufferedReader reader = new BufferedReader(in);
String line = "";
while((line = reader.readLine()) != null){
json.append(line);
}
in.close();
reader.close();
connection.disconnect();
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
LOG.debug("连接失败", e);
} catch (IOException e) {
// TODO Auto-generated catch block
LOG.debug("读取数据失败", e);
}
return json.toString();
}
}
- controller
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.lsl.tools.HttpURLConnectionTools;
/**
*
* 描述:获取笑话controller
* @since 1.0
* @author lsliang 2017年3月6日
*/
@Controller
public class GetJokeController {
/**
*
* 描述:获取笑话
* @param req HttpServletRequest
* @return String 笑话数据
* @since 1.0
* @author lsliang 2017年3月6日 创建方法
*/
@ResponseBody
@RequestMapping(value = "/getJoke.do", produces="text/html;charset=UTF-8")
public String getJoke(HttpServletRequest req) {
String urlStr = packageURL(req);
String joke = HttpURLConnectionTools.httpURLConectionGET(urlStr);
return joke;
}
/**
*
* 描述:封装url
* @param req HttpServletRequest
* @return String 封装好的url
* @since 1.0
* @author lsliang 2017年3月6日 创建方法
*/
private String packageURL(HttpServletRequest req){
String url = req.getParameter("url");
String count = req.getParameter("count");
String page = req.getParameter("page");
String key = req.getParameter("key");
StringBuffer urlStr = new StringBuffer();
urlStr.append(url);
urlStr.append("?");
urlStr.append("count=");
urlStr.append(Integer.valueOf(count));
urlStr.append("&");
urlStr.append("page=");
urlStr.append(Integer.valueOf(page));
urlStr.append("&");
urlStr.append("key=");
urlStr.append(key);
return urlStr.toString();
}
}
- js
/**
* 描述:过滤数据中的html标签
* @author lsliang 2017-03-05
*/
var htmldecode = function(str) {
str = str.replace(/&/gi, '&');
str = str.replace(/ /gi, ' ');
str = str.replace(/"/gi, '"');
str = str.replace(/'/g, "'");
str = str.replace(/</gi, '<');
str = str.replace(/>/gi, '>');
str = str.replace(/<br[^>/]*>(?:(rn)|r|n)?/gi, 'n');
return str;
}
//初始页码为1
var currentPage = 1;
/**
* 描述:获取传入页码的数据
* @author lsliang 2017-03-05
*/
var getJoke = function(page) {
$.ajax({
type : "get",
url : "getJoke.do",
data : {
"url" : "http://api.xiaoliaoba.cn/Index/duanzi.html",
"count" : 5,
"page" : page,
"key" : "436263d0bc4f3d7a6a73655a01d42a40"
},
dataType : "json",
success : function(joke) {
if(joke.error_code !== "0"){
alert(joke.reason);
}else{
if(joke.result.length === 0){
alert("已没有更多的笑话了!");
}else{
$.each(joke.result, function(i, v) {
var str = "<tr><td>" + v.title + "</td><td>"
+ htmldecode(v.content) + "</td><td>" + v.time
+ "</td></tr>";
$("#msg").append(str);
});
}
}
},
error: function(error){
// alert(JSON.stringify(error));
alert("对不起,接口异常!");
}
});
};
$(function() {
//页面加载获取第一页的5条数据
getJoke(currentPage);
//现实更多按钮点击事件
$("#clickMe").click(function() {
//点击显示更多,页码加1
currentPage = currentPage + 1;
getJoke(currentPage);
});
});
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/joke.js"></script>
</head>
<body>
<table id="msg">
<tr>
<td>title</td>
<td>content</td>
<td>updatetime</td>
</tr>
</table>
<button id="clickMe">显示更多</button>
</body>
</html>