【第一期】Ajax跨域

ajax跨域

ajax跨域简单来说,就是网站A调用B网站的数据。说到这里还要再说一个那就是什么叫同源策略。同源策略其实就是它会阻止ajax跨域访问(就是阻止数据响应使用)。同源策略: 就是一种约定,是浏览器的一种安全功能。同源: 同协议,同域名, 同端口 跨域就是不同源。有同源策略,当获取一个网站数据时会报错,可以在相应主体里面看到服务器响应了浏览器的请求,将结果返回了浏览器, 但是却被浏览器阻拦了。如下:

解决同源策略有三种方式:

1)服务器代理

2)cors (跨资源共享)

3)jsonp

1)服务器代理它的原理就是,后台PHP有一个函数叫 它可以访问到本地数据也可以访问互联网数据,从而实现的跨域。

2)cors 跨域cors 意思就是跨域资源共享原理:就是在服务器端(PHP文件中)声明一下要不要进行同源限制3)jsonp跨域jsonp就是解决ajax跨域的一种方案。原理:利用src和href两个属性,可以跨域访问,利用这一“漏洞”发送ajax请求。就是在一个文件(比如www.study.com/jsonp/index.html)中用script标签引入另一个文件中的数据(比如www.demo.com/jsonp.php)。如数据为123,在相应主体中能看到,已经返回回来了。如果为aaa()就是返回一个函数调用的字符串,所以请求的文件要有一个函数定义。如果为aaa('{"name":"zs", "age":12}'),就是函数调用的参数为{"name":"zs", "age": 12} 。对象也能作为函数调用的参数。总结:什么数据都可以返回回来的。注意:jsonp不算ajax? ,因为ajax需要实例化XMLHttpRequest对象,调用open、send等方法、属性和事件来完成。而jsonp是利用了src属性的漏洞来完成的跨域请求。

ajax跨域jsonp方式

$.post $.get $.ajax都能发送跨域请求。但是,$.post和$.get是要依靠cors方式的,只有$.ajax能使用jsonp方式

核心:设置请求类型为get方式 type:‘get’设置返回的数据类型dataType 为 dataType:‘jsonp’一个额外参数json,可以是任意参数英文字符串,但一般默认为callback, jsonp:‘callback’该参数会产生一个随机字符串前端使用该字符串创建一个函数后端接收该字符串作为返回函数的名称例如: 使用jsonp发送跨域请求

执行结果为:

而 sucess参数就是函数定义

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180825G17I0S00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券