江苏龙网

  1. 主页 > 生活百科 > >

ajax跨域的基本流程( 二 )

ajax


如果服务器认为这个请求可以接受 ， 就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源 ， 可以回发'*'） 。
如果没有这个头部 ， 或者有这个头部但源信息不匹配 ， 浏览器就会驳回请求 。正常情况下 ， 浏览器会处理请求 。注意 ， 请求进而响应都不包含cookie信息 。
目前 ， 所有浏览器都支持该功能 ， IE浏览器不能低于IE10 。整个CORS通信过程 ， 都是浏览器自动完成 ， 不需要用户参与 。对于开发者来说 ， CORS通信与同源的AJAX通信没有差别 ， 代码完全一样 。浏览器一旦发现AJAX请求跨源 ， 就会自动添加一些附加的头信息 ， 有时还会多出一次附加的请求 ， 但用户不会有感觉 。
因此 ， 实现CORS通信的关键是服务器 。只要服务器实现了CORS接口 ， 就可以跨源通信 。
平时的ajax请求可能是这样的:
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open("POST", "/damonare",true);
xhr.send();</script>
以上damonare部分是相对路径 ， 如果我们要使用CORS ， 相关Ajax代码可能如下所示：
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
xhr.send();</script>
代码与之前的区别就在于相对路径换成了其他域的绝对路径 ， 也就是你要跨域访问的接口地址 。
服务器端对于CORS的支持 ， 主要就是通过设置Access-Control-Allow-Origin来进行的 。如果浏览器检测到相应的设置 ， 就可以允许Ajax进行跨域的访问 。
2.2 图像Ping
我们知道 ， 一个网页可以从任何网页中加载图像 ， 不用担心跨域不跨域 。这也是在线广告跟踪浏览量的主要方式 。我们也可以动态的创建图像 ， 使用它们的onload和onerror事件处理成西来确定是否接收到了响应 。
动态创建图像经常用于图像Ping 。
图像Ping是与服务器进行简单、单向的跨域通信的一种方式 。请求的数据是通过查询字符串形式发送的 ， 而响应可以是任意内容 ， 但通常是像素图或204响应 。通过图像Ping ， 浏览器得不到任何具体的数据 ， 但通过侦听load和error事件 ， 它能知道响应是什么时候收到的 。
来看下面的例子 。
var img = new Image();
img.onload = img.onerror = function () { console.log('Done');
};
img.src = https://www.isolves.com/it/cxkf/yy/js/2019-07-09/'http://www.example.com/test?name=Nico';
这里创建了一个Image的实例 ， 然后将onload和onerror事件处理程序指定为同一个函数 。这样无论是什么响应 ， 只要请求完成 ， 就能得到通知 。请求从设置src属性那一刻开始 ， 而这个例子在请求中发送了一个name参数 。
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数 。
图像Ping有两个主要的缺点：
只能发送GET请求 。无法访问服务器的响应文本 。
因此 ， 图像Ping只能用于浏览器与服务器间的单向通信 。
2.3 JSONP
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写 ， 是应用JSON的一种新方法 。JSONP与JSON看起来差不多 ， 只不过是被包含在函数调用中的JSON ， 如下 。
callback({'name': 'Azure'});
JSONP由两部分组成：回调函数和数据 。回调函数是当响应到来时应该在页面中调用的函数 。回调函数的名字一般是在请求中指定的 ， 而数据就是传入回调参数中JSON数据 。下面是一个典型的JSONP请求 。
http://xxx.net/json/?callback=handleResponse
这个URL是在请求一个JSONP地理定位服务 。通过查询字符串来指定JSONP服务的回调参数是很常见的 ， 就像上面的URL所示 ， 这里指定的回调函数的名字叫handleResponse() 。
JSONP是通过动态<script>元素来使用的 ， 使用时可以为src属性指定一个跨域URL 。
这里的<scriot>元素与<img>元素类似 ， 都有能力不受限制的从其他域加载资源 。因为JSONP是有效的JS代码 ， 所以在请求完成后 ， 即在JSONP响应加载到页面中以后 ， 就会立即执行 。来看一个例子 。


推荐阅读


上一篇：莴笋炒榨菜 莴笋炒茄子

下一篇：怎样蒸包子，这样蒸包子又白又松软