JavaScript之跨域恳求解决方案ITeye - 千亿集团

JavaScript之跨域恳求解决方案ITeye

2019年04月03日08时14分15秒 | 作者: 运凯 | 标签: 恳求,跨域,办法 | 浏览: 1332

浏览器处于安全原因,在运用 Ajax 进行恳求拜访时,不允许跨域恳求。
由于这涉及到(被浏览器增加在每次恳求的恳求头中的)Cookie 会被外域服务器读取到。

不过咱们发现,Web页面上运用 script 标签加载js文件时则不受是否跨域的影响。也便是能够加载其它域名下的 javascript 文件。(不仅如此,咱们还发现但凡具有"src"这个特点的标签都具有跨域的才能,比方 script 、 img 、 iframe );
基于此,完成跨域恳求,只需要动态加载 js 文件就能够了。
可是动态加载 js 后,应该调用那个办法处理这些数据。咱们只好把这个回调办法的称号以参数的办法传递给服务器。

这便是JSONP的完成原理:

1、动态的向页面中增加 src 特点为其它域名资源的 script 标签。
2、把回调办法写到 src 参数里,一同传递给服务器。
3、服务器在回来的 javascript 文件中,调用这个回调办法。


一、完成原理

 !DOCTYPE html 
 html 
 head 
 title /title 
 script type="text/javascript" 
 // callback function.
 var flightHandler = function(data){
 console.log(data);
 // 该 url 会回来一段 javascript 代码。
 var url = "http://remote.xx.com/xx?code=CA1998 callback=flightHandler";
 // 创立script标签
 var script = document.createElement(script);
 script.setAttribute(src, url);
 // 把script标签参加head,此刻调用开端
 document.getElementsByTagName(head)[0].appendChild(script); 
 /script 
 /head 
 body 
 /body 
 /html 


服务器端端回来值:
var obj = {
 "code": "CA1998",
 "price": 1780,
 "tickets": 5
flightHandler(obj);


为了不引起 obj 变量名抵触,写成 JSONP (JSON with Padding) 格局:
flightHandler({
 "code": "CA1998",
 "price": 1780,
 "tickets": 5





二、运用 JQuery 时,它把这种办法封装在了 ajax 办法中
但这绝不是 ajax 恳求,完成原理不同。
$.ajax({
 type: "get",
 async: false,
 url: "http://remote.xx.com/xx?code=CA1998",
 dataType: "jsonp",
 jsonp: "callback",
 jsonpCallback:"flightHandler",
 success: function(data){
 console.log(data);
 error: function(){
 alert(fail);




$.ajax({
 type: "get",
 async: false,
 url: "http://remote.xx.com/xx?code=CA1998",
 jsonp: "callback",
 jsonpCallback:"?", 
 success: function(data){
 console.log(data);
 error: function(){
 alert(fail);

如果在 url 中含有 callback=? ,则 jquery 会认为是发送 jsonp 格局的恳求。
并主动生成一个随机的回调函数名,传递给服务器。



JQuery 主动生成的 callback 办法名是怎么调用 sucess 办法的?

$.ajax({
 url: http://url.of.my.server/submit,
 dataType: "jsonp",
 jsonp: callback,
 jsonpCallback: jsonp_callback

jsonp is the querystring parameter name that is defined to be acceptable by the server while the jsonpCallback is the javascript function name to be executed at the client.
When you use such url:

url: http://url.of.my.server/submit?callback=?

the question mark ? at the end instructs jQuery to generate a random function while the predfined behavior of the autogenerated function will just invoke the callback -the sucess function in this case- passing the json data as a parameter.

$.ajax({
 url: http://url.of.my.server/submit?callback=?,
 success: function (data, status) {
 mySurvey.closePopup();
 error: function (xOptions, textStatus) {
 mySurvey.closePopup();


The same goes here if you are using $.getJSON with ? placeholder it will generate a random function while the predfined behavior of the autogenerated function will just invoke the callback:

$.getJSON(http://url.of.my.server/submit?callback=?,function(data){
//process data here



引证
jsonpCallback
Type: String or Function()

Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as itll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5, you can also use a function for this setting, in which case the value of jsonpCallback is set to the return value of that function.




服务端回来数据的示例代码:
public void ProcessRequest (HttpContext context) {
 context.Response.ContentType = "text/plain";
 String callbackFunName = context.Request["callbackparam"];
 context.Response.Write(callbackFunName + "([ { name:\"John\"}])");





引证请注明,
原文出处:引证:
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
http://api.jquery.com/jQuery.ajax/
https://stackoverflow.com/a/31087311/2893073



版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表千亿集团立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章