利用Ajax在极速数据上获取信息

今天我们谈谈Ajax使用的实例，我们调取一个三方网站“极速数据”的数据，实现Ajax的练习。

什么是Ajax

首先我们先来谈谈什么是Ajax
Ajax 是一种用于创建快速动态网页的技术。
在不用重新加载整个网页的情况下，让网页实现局部刷新。

Ajax的使用

我们结合“极速数据”上面的新闻的接口，用Ajax获取数据。

首先我们找到自己的key，在请求实例处进行替换，然后我们看到请求参数有三个，分别是channel，num，start。，按要求填好数据后，我们就可以进行调用了。
下面是调用的代码

$.ajax({
      type:"get",
      url:"https://api.jisuapi.com/news/get?channel=头条&start=0&num=10&appkey=yourappkey",
      async:false,
      dataType:"jsonp",
      success:function(data){
        console.log("success");
        console.log(data);
      },
      error:function(e){
        console.log(e);
      }
})

在执行完后，我们可以看到控制台打印的数据如下图

这样就实现了对第三方接口的调用并且获取到了数据，当我们想在Ajax外使用这些获取到的数据时，可以把整个Ajax赋给一个值，代码如下

var news = $.ajax({
    type:"get",
    url:"https://api.jisuapi.com/news/get?channel=头条&start=0&num=10&appkey=yourappkey",
    async:false,
    dataType:"jsonp",
    success:function(data){
      console.log("success");
    },
    error:function(e){
      console.log(e);
    }
  });
  console.log(news);

然后我们先打印出来这个值

发现我们需要的数据位置为：
news>responseJSON>result>list，此时我们只需要调用这些数据即可。

var newdata;
  var news = $.ajax({
      type:"get",
      url:"https://api.jisuapi.com/news/get?channel=头条&start=0&num=10&appkey=yourappkey",
      async:false,
      dataType:"jsonp",
      success:function(){
        console.log("success");
      },
      error:function(e){
        console.log(e);
      }
  });
  setTimeout(function(){
    newdata = news.responseJSON.result.list;
    console.log(newdata);
  },1000)

从这个网站上获取数据需要一定的时间,所以需要加上定时器,这时就将数据存到本地缓存中自己调用了
在急速数据这个网站上，还有很多免费的接口供大家联系调用，作为刚学习Ajax的小白，拿来练手非常合适。也欢迎大家有问题来问我，大家一起进步。