小白使用接口方法（超简单）

---

缘由

需要访问的api:

https://sou.jiaston.com/search.aspx?key=斗破苍穹&page=1&siteid=app2

1. 由于最近写项目的时候，想要使用开放的免费的API.作为 一个后端小白，不知道如何调
用，使用。
2. 起初，我认为只需要进行ajax请求就可以调用，但是我发现我还是太天真了。有关ajax跨域的问题就出现了，没了解过，咱也不懂。于是看尚硅谷的ajax视频。（下面部分就是部分笔记。）
3. 看完视频后，发送jousp，和CORS 的方式无法解决我需要解决的问题。（很焦虑）
4. 后来晚上想了想如何解决的方法，前端的方式解决不了，后端可以由URL类可以进行解决。所以，问题是得到基本的解决了。剩下的查blog即可。

这是一个博主写的，很仔细，我认为很好：

点击这里进入

还可以看这里：

java发送http的get、post请求实现代码

还可以看这里：

java发起http请求获取返回的Json对象方法

以下是我看视频的笔记：

文档地址：

E:\ajax课件\课件\Ajax课件.pdf
视频：尚硅谷的ajax 快速上手的视频。黑马的更详细（想要可以灵活的使用api）
	

js的ajax方法：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

xhr.open(method, url); //post,get  请求的路径

//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

//发送请求
xhr.send(body) //get 请求不传 body 参数，只有 post 请求

//接收响应

//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据

xhr.onreadystatechange = function (){
	if(xhr.readyState == 4 && xhr.status == 200){
		var text = xhr.responseText;
		console.log(text);
	}
}

jquery 方式

略

跨域问题

jsonp

//.动态的创建一个 script
var script = document.createElement("script");

//设置 script 的 src，设置回调
script.src = "http://localhost:3000/testAJAX?callback=abc";

function abc(data) {
	alert(data.name);
};

//.将 script 添加到 body 中
document.body.appendChild(script);

jquery

$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function(data) {

}

CORS

直接发送 一般的ajax请求即可。

我自己实现的方式

实现的接口还是上面的那个接口：

https://sou.jiaston.com/search.aspx?key=斗破苍穹&page=1&siteid=app2

但是这个会进行unicode编码：

https://sou.jiaston.com/search.aspx?key=%E6%96%97%E7%A0%B4%E8%8B%8D%E7%A9%B9&page=1&siteid=app2

需要解码的工具类：
unicode解码的简单工具类

实现的代码：

以后端为例子：

@RequestMapping("getAPI")
    @ResponseBody
    public String getAPi(){
        return bookService.getAPI();
    }

 @Override
    public String getAPI() {

        String message ="";
        StringBuffer buffer = new StringBuffer();

        try{
            URL url = new URL("https://sou.jiaston.com/search.aspx?key=%E6%96%97%E7%A0%B4%E8%8B%8D%E7%A9%B9&page=1&siteid=app2");
            HttpURLConnection urlCon= (HttpURLConnection)url.openConnection();

            if(200==urlCon.getResponseCode()){
                InputStream is = urlCon.getInputStream();
                InputStreamReader isr = new InputStreamReader(is,"utf-8");
                BufferedReader br = new BufferedReader(isr);
                String str = null;
                while((str = br.readLine())!=null){
                    buffer.append(str);
                }
                br.close();
                isr.close();
                is.close();
                message = buffer.toString();

            }
        }catch(Exception e){
            e.printStackTrace();
        }

        return message;
    }

这里注意url,一定是这样的，不然返回没有data的结果

前端：使用ajax

//点击阅读按钮，进行发送ajax请求
    //需要者本书的名称
    function readBook() {
        alert("点击了,发送ajaxi请求了");

        $.get("getAPI",{},function (date1) {
            //Converts a JavaScript Object Notation (JSON) string into an object.
           var parse = JSON.parse(date1);
           console.log(parse.data[0].Id);
        });

    }

由于返回的是一个字符串，所以需要进行转换为js对象。

结果展示：



使用这个方法就可以，非常方便的使用api接口了。
有些接口是使用jsonp的方法可以获取的。像这种直接返回json的。可以这样来进行获取数据。

根据具体的参数，来进行拼接字符串。来进行实现。

总结一下

凡事都带自己亲手实践后，便会成长。这个问题，一直再想如何解决。毕竟一个人自学，没有什么人可以求助的。凡事还得靠自己。（辛酸）