推荐一个读者做的不错的编程学习网站:

网站：潜安
域名：http://www.qianani.com

另外将会不定期推送近期网站用到的一些技术，讲一些核心原理，今天为第一篇

问题由来：

最近一直在优化两个Python学习网站，自己给自己提点需求，看看能不能实现，比如下方为http://www.python88.cn网站，在这个网站中，我做了一个功能，检测用户是否在该网站扫码并输入验证码，如果扫码验证过，则在后端记录并返回前端打印出来"right",如果没有扫码验证，则返回“error"，返回这样标记的目的是为了通过这个标志是否做出右下角的弹窗，如果没有验证的用户，则会弹出右下角的弹窗，当然在这个网站中这点已经很容易实现了

接下来需求就来了，下方是http://www.python66.cn第二个网站，因为我想通过http://python66.cn向http://python88.cn网站引流,点击弹窗能跳转到http://88.cn网站，同样，我也想通过用户能否获取在第一个网站扫码（返回的right或error）来判断是否弹出下方的弹窗，这样则牵涉到跨域请求

什么是跨域请求：

举个例子：假如一个域名为http://aaa.cn的网站，它发起一个资源路径为http://aaa.cn/book/100.html的 Ajax 请求，那么这个请求是同域的，因为资源路径的协议、域名以及端口号与当前域一致（例子中协议名默认为http，端口号默认为80）。但是，如果发起一个资源路径为http://bbb.com/doc的 Ajax 请求，那么这个请求就是跨域请求，因为域不一致，与此同时由于安全问题，这种请求会受到同源策略限制。

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术（还有其他方式也可以跨域请求），jsonp可以跨域请求数据，它的原理主要是利用了<script><img>标签具有src属性可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。

如何理解<script><img>标签具有src属性标签可以跨域链接资源？

比如这是我在csdn的文章，里面的图片引入的是我http://python88.cn的网站图片，就是典型的跨域，包括我们<script>标签，有时候也会通过src引入一些网络上的框架，也是这个道理，jsonp就是通过这样的原理来实现的跨域

原理基于上面原理，但是一般我们在用的时候，通过jQuery封装好的方法来进行使用，下面开始上代码

1、首先我在后端视图中定义一个book_ip_sign2函数，并同步配置url

说明，jsonp跨域请求只能接受get请求，不支持post请求

def book_ip_sign2(request):user_ip = request.META['REMOTE_ADDR']print("***********")print(user_ip)engine = get_local_engine()ip_df = pd.read_sql("find_ip_num", engine)ip_list = list(ip_df["ip"])if user_ip not in ip_list:print("新的用户IP")func = request.GET.get('callback', None)context = {"user_ip": user_ip, "book_click_sign": "error","find_ip_num":num}return HttpResponse("%s(%s)"%(func,context))else:current_user = FindIpNum.objects.filter(ip=user_ip)current_num = current_user[0].numif current_num < 3:func = request.GET.get('callback', None)context = {"user_ip": user_ip, "book_click_sign": "error","find_ip_num":current_num}return HttpResponse("%s(%s)"%(func,context))elif current_num >= 3:func = request.GET.get('callback', None)context = {"user_ip": user_ip, "book_click_sign": "right", "find_ip_num":current_num}return HttpResponse("%s(%s)"%(func,context))

对于上面代码，看着很多，不过你可以忽略那些业务逻辑，只需要看返回的数据即可，我这里主要想返回三个数据（book_click_sign , current_num, user_ip)，直接将这几个构造成context通过JsonResponse返回是不行的，前端会报错,后来找了点资料，发现要跟回调函数拼接，也就是下面的，func是回调函数名，通过拼接用HttpResponse进行返回

func = request.GET.get('callback', None)
context = {"user_ip": user_ip, "book_click_sign": "right", "find_ip_num":current_num}
return HttpResponse("%s(%s)"%(func,context))

前端查看该返回结果是这样的，括号中就是我们返回前端的数据，也是回调函数的参数（回调函数名+参数）

jQuery17104493579000703556_1550910515349('error_0_139.227.3.199')

2、前端jsonp请求

前端引入jQuery，通过$.ajax进行请求，注意这里的jsonp和ajax原理完全不一样，这里$.ajax .done .fail此类只是jQuery官方将两种请求封装成了看起来类似的方法

核心请求头就是url，type,dataType这些，如果请求成功，则通过.done写js逻辑，如果请求失败则通过.fail写js逻辑

返回的data: 后端回调函数括号中的参数即返回前端的最终data

error_0_139.227.3.199

$.ajax({url:'http://www.python88.cn/book_ip_sign2/',type:'get',dataType:'jsonp',
})
.done(function(data){book_click_sign = data.book_click_sign;find_ip_num = data.find_ip_num;user_ip = data.user_ip;console.log(user_ip)console.log(find_ip_num)console.log(book_click_sign)if(book_click_sign=="error"){$("#hzw_showmsg").delay(5000).slideDown(1000);}else{console.log("放过一次")}
})

大家如果想测试，可以去http://www.python66.cn前端栏目下载源码,下载后是一个html文件,通过控制台就能看到跨域请求返回的结果