使用mui.ajax完成跨域请求
一、代码 mui.ajax({ type:"post", url: serverip + '/api/v1/requestSMS/?jsoncallback=?', async:false, data: { mobile: mobile }, dataType: "jsonp", jsonp: "jsoncallback", success: function(data,status,xhr){ console.log("success : "+ data) return callback(); }, error: function(xhr,type,errorThrown){ console.log("error: " + type); return callback("获取验证码失败:服务器错误!"); } }); 二、json和jsonp jsonp的出现是因为浏览器有个同源策略,对js来说,它在执行时不能请求不同源的资源。什么是源呢,这里是指协议名(如http://)+主机名(api.flickr.com)+端口号(:80,http协议默认端口号是80,可省略),这三个组合在一起就是一个源,同源的话是指这3个必须和发起请求的网页的源必须一样。 因为js是不能请求不同源的资源,所以如果你的脚本不在这个源(http://api.flickr.com)的网页上,是没法请求的它的图片的。 但为什么jsonp可以? 那是因为同源策略有个例外,如果网页上通过<script src="不同源的地址"></script>,<img>以及<link>这样的标签来引用不同源的资源是可以的。 结合这个例外,一些(个)聪明的人就想到一个办法, 如果请求资源时,异源服务器能返回这样的脚本,请求异源资源的问题就得到解决: fnName({theDataUWanted}); 因为这样,浏览器得到这个脚本后会立即执行它,而这个函数实际上就是包含了你定义的回调函数的函数,而这个fnName就是jsoncallback参数的值,也就是jQuery自动替换的名字。 这个异源请求的完成,要求异源服务器也必须配合你的脚本才行,如果它不支持jsonp,那即使用jsonp也无法请求异源的资源。 三、json和jsonp的区别 如果服务器端执行代码: message.setMsg(2,"message value","content value"); return new ResponseEntity<Message>(message,HttpStatus.OK); 则客户端ajax的dataType设置为json和jsonp时, success:function(data,xhr){ console.log("data:" + data + "data.message:" + data.message); } 的打印结果分别为: (1)json: data:[object Object] data.message:message value (2)jsonp: data: {"code":2,"message":"message value","content":"content value"} data.message:undefined 四、jsonp原理 首先在客户端注册一个callback,然后把callback的名字传给服务器。 此时,服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function,function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。 客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- ruby-on-rails – 无法打开rails服务器
- ruby-on-rails – 如何验证这两个值在Rails模型中不相等?
- Ajax不能接受php return值原因分析
- ruby-on-rails – Rails方法如何调用“has_one”?
- c# – Web.config导致“被组策略阻止”错误
- 2019 Multi-University Training Contest 2
- ajax – IE9 JSON数据到iframe:“你想打开还是保存这个文件
- c# – Resharper重新格式化Linq语句以放入并在同一行上选择
- oracle创建新用户只有mes账户下四张表的查询权限
- c# – 在条件的两边检查null是否有所不同?