关于ajax跨域实战的一个小demo(真正的干货上篇)

jsonp1.png

jsonp.png

jsonp2.png

众所周知，ajax技术只有在同源的前提下使用，我是刚入行的小白，才疏学浅，http的无状态协议的原则，也指导ajax访问非同域的api的时候回报一个不是同源的错，自己也是找了很久，才把这个东西解决，虽然玩的不6但是这个问题我已经知道怎么解决了，今天就分享一个demo，帮助大家彻底理解使用ajax调用非本地资源，说了这么多废话赶紧进入正题。

今天首先要准备一个api，我这边有两个api可以供大家选择，其中一个是已经写好的一个demo但是他不需要跨域这个我也不懂，其实是学来的。另外一个是自己发掘的，你们大家都可以使用，但是有一点我想说，就是如果你们相传到github上面的话，我有一个建议一定要找https协议的api，因为github不支持非https的一切api，又说了一堆废话，正式开始吧。

首先我想一下这二个demo的实现功能。

这个demo实现的就是一个ajax获取非同源数据的时候，用jsonp方式来获取，我这边将会给大家提供两种方式一种是原生js封装jsonp，另外一种方式就是调用jQuery封装好的ajax，我分两次说完，那么就开始了。

我先上一段效果吧给大家看一下，最终实现的效果是什么样的

大致说一下 这些图片还有文字都是通过ajax请求回来的而不是不过这个没有跨域我先讲这个是怎么实现的，当我第二篇的时候就把另外的demo一起说一下，因为如果直接上跨域还要说一下别的知识，html页面，有两个部分，一个是请求回来的图片数据和新闻链接，当你点击的时候会进入相应的网页具体的文章就会浮现出来，下面的几个按钮是我写的丑陋的分页按钮，但是他已经可以实现分页的功能了。每页请求的数目规定在api里面，我就把他们分成了几个页面加载，来实现一个分页的功能，说的可嫩不太清楚，来看代码吧。

首先这个api全称是 https://route.showapi.com/181-1?&showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&num=10
showapi_appid：这就是一个公用的appid
showapi_sign：这个算是一个登陆密码吧，就这理解，我也是偶然得来的
num：这个参数是请求文章数目

=========================手动分割线===========================
这是公共用的数据库供大家学习。
下面开始讲代码
先分享思路，这个首先通过ajax对象获取我们想要的东西，这个要用到一个XMLHttpRequest 对象那我们先创建一个这个对象
这里用原生ajax
创建对象 我习惯用const
const xmlHttp = new XMLHttpRequest();
然后拆解我们的api，url
const url = 'https://route.showapi.com/181-1';
创建我们要发送的数据比如appid 等这些参数
所以
const sendData = {
showapi_appid: '30603',
showapi_sign: '98960666afeb4992ae91971d13494090',
num: 8 //每一页请求多少条数据
}
然后我们把url完整的拼接起来，有人可能问我为什么这么写，要写成对象的样子吧url拆解，我的理解是为了代码的健壮性，还有就是为了修改方便，不把他写死。
现在我们开始吧url拼接起来这里顺便复习一下扫描对象的方法for in 这个方法，
建立一个空数组来存放url的参数对象
let params = [ ]
for( let key in sendData){
params.push(key + '=' sendData[key] )
}
然后将数组中每一个元素用&拼接成字符串数组转字符串
const postData = parmas.join('&')
试着打印一下
console.log(postData)
然后用我们的XHR对象的方法连接url 之前把XRH存到了 xmlHttp中所以
xmlHttp.open('GET', url + '?' +postData ,true ) 这里异步请求默认可以不写 true
需要我们发送一个消息通常默认这个send的消息为空或者null
xmlHttp.send(null)
最后我们需要检查一下他状态，用到了一个onreadystateChange的事件
这个事件是检查返回状态是否正确的
判断一下这里有两个判断的一个状态1，2，3，4我们要让他走过这个四个步骤还有一个就是状态吗status=200的时候让他返回一些东西，或者执行一些东西。

xmlHttp.onreadystatechange = function(){
if(xmlHttp.readtState===4&&xmlHttp.status===200){
let result = JSON.parse(xmlHttp.response); // 注意这里我们用JSON对象的parse方法把url接收回来的数据字符串编程json对象
let dataList = result.showapi_resbody.newlist // 注意这里 因为json对象里面一般有数组我们取他们的数组，这时候你需要查看一下之前
https://route.showapi.com/181-1?&showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&num=10 这个api里面 直接打开 就可以看见 很容易的showapi_resbody对象相面
newlist 是一个数组 所以我们要那里面的东西并且把它放进我们dataList的变量里面 大家可以打印一下看一下你是不是应获取到这个 Object了呢
console.log(dataList)

}

}

以下是完整代码，可能有地方是多余或者有问题，大家可以修改，有什么建议请简讯我，谢谢大家支持。

    
    
    
    





    

        

        

        

        

        

        

        

        

    


    

        
1
        
2
        
3
        
4
        
5
        
6