jquery 跨域请求数据问题
昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题。当被问到用jquery跨域请求数据时,我脑中一片空白,所以面试不顺利,也没有通过,今天我差了些资料,看了些文章,解决的jquery跨域请求数据,总接如下:
一、关于ajax跨域的思考
1、Ajax为什么不能跨域?到底是卡在哪个环节了?(下面项目中具体说,这里先说下结论)。 Ajax其实就是向服务器发送一个GET或POST请求,然后取得服务器响应结果,返回客户端。理论上这是没有任何问题的,然而普通ajax跨域请求,在服务器端不会有任何问题,只是服务端响应数据返回给浏览器的时候,浏览器根据响应头的Access-Control-Allow-Origin字段的值来判断是否有权限获取数据,一般情况下,服务器端如果没有在这个字段做特殊处理的话,跨域是没有权限访问的,所以响应数据被浏览器给拦截了,所以在ajax回调函数里是获取不到数据的(来自园友补充)。所以现在ajax跨域的问题可以转化为数据怎么拿回客户端的问题。
2、既然不能直接访问第三方站点,我们可以在服务器上面做代理,通过ajax向代理发送请求,代理获得数据后在返回给客户端,当然这是一种解决办法,但是一次请求要从客户端经过代理到第三方站点,然后再原路返回,响应速度是个问题。
3、我们发现我们可以将一些js、css等文件放在第三方的服务器上面,如CDN等来加快网页的打开速度,这样是没有任何问题的,也就是说web页面可以加载放在任意站点的js、css、图片等资源,不会受到"跨域"的影响。这个时候,我们会想到:既然我们可以调用第三方站点的js,那么如果我们将数据放到第三方站点的js中不就可以将数据带到客户端了吗?
二,现在总结出两种方法进行跨域请求:
①用jquery 的$.getJSON进行跨域请求是可以的,后台只要返回一个json格式的数据就可以了
$.getJSON("http://micro.customer.virtuesoft.cn/home/Paged?pageIndex=1&pageSize=1",function(json){
alert(JSON.stringify(json))
});
注:http://micro.customer.virtuesoft.cn/home/Paged?pageIndex=1&pageSize=1是请求数据的地址,?后面跟的就是传递后台的参数,然后返回的是一个json对象
②jsonp方法请求数据
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。其核心思想是利用JS标签里面的跨域特性进行跨域数据访问,在JS标签里面存在的是一个跨域的URL,实际执行的时候通过这个URL获得一段字符串,这段返回的字符串必须是一个合法的JS调用,通过EVAL这个字符串来完成对获得的数据的处理。
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
如果只是简单的这样写:
$.ajax({
type:"get",
url:"http://www.abc.com/json.php",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"success_jsonpCallback",
success:function(json){
$(".user").html("用户信息:"+json.username+","+json.age+","+json.gender);
},
error:function(){
alert("请求出错!");
}
});
后台数据为:
<?php
$arr = array ('username'=>'jack','age'=>21,'gender'=>'male');
echo json_encode($arr);
?>
在浏览器会报错,错误如下
其实这时数据已经拿到了,只是返回的数据格式不对,所以会报错
json.php返回的数据确实是json类型的数据 {“username”:”jack”,”age”:21,”gender”:”male”} ,问题处在哪?
翻看了一下Jquery文档发现jsonp:”callback”, jsonpCallback:”success_jsonpCallback”,传递这两个参数是有原因的,jsonp的返回数据格式应该是: “客户端传递的回调方法名称(json数据)”,将php文件改为:
<?php
$arr = array ('username'=>'jack','age'=>21,'gender'=>'male');
echo $_GET['callback']."(".json_encode($arr).")";
?>
这样就不会报错了,如下
可以看到,php文件返回的结果是 success_jsonpCallback({“username”:”jack”,”age”:21,”gender”:”male”}) ,这才是正确的jsonp返回格式,而 success_jsonpCallback这是传递过去的参数 。
jquery 跨域请求数据问题的更多相关文章
- jquery跨域请求数据
jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...
- Jquery跨域请求php数据(jsonp)
Jquery跨域请求php数据 我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候. 今天在工作中碰到javascrip ...
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- 使用JSONP跨域请求数据
下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
- Jquery 跨域请求JSON数据问题
制作网站时,我们有时候为了方便快捷会调用别人写好的API接口,或者是调用一些免费的API接口获得JSON数据.比如天气,农历,网站备案信息查询等. 但是,这些API接口都是别人自己服务器上的,我们要调 ...
- jquery post跨域请求数据
原先一直以为要实现跨域请求只能用jsonp,只能支持GET请求,后来了解到使用POST请求也可以实现跨域,但是需要在服务器增加Access-Control-Allow-Origin和Access-Co ...
- jquery跨域请求解决方案(我们寻找,我还没有添加验证)
http://www.3lian.com/edu/2014/02-10/127921.html 本篇文章仅仅要是对jquery ajax跨域解决方法(json方式)进行了介绍,须要的朋友能够过来參考下 ...
随机推荐
- django处理cookie的机制
title: django处理cookie的机制 tags: djaogo, cookie, session grammar_cjkRuby: true --- cookie的意义 在多数日常使用的网 ...
- C++ 异常小记
catch必定使用拷贝构造函数 如下代码编译不通过,因为拷贝构造被标记delete #include <stdexcept> #include <cstdlib> #inclu ...
- Python内置函数(20)——hex
英文文档: hex(x) Convert an integer number to a lowercase hexadecimal string prefixed with "0x" ...
- Python-迭代器&生成器&装饰器&软件目录结构规范-Day5
目录Day-Python-迭代器&生成器 21.生成器 21.1.生成器引入 21.2.生成器作用 31.3.创建生成器的方法 31.4.用函数来实现复杂的生成器 51.5.把函数变成生成器通 ...
- Oracle10g物理DG详细配置方法及步骤
--测试环境: OS:Redhat linux(64) Primary: IP:192.168.94.198 SID:dgdb1 Hostname:dg1 DB_U ...
- 从微软MVP到女儿开学--2017前半年小结
2017年转眼就到了9月,原本在年初定的计划基本泡汤了. 看书啊减肥啊出教程啊,都被因为各种事物给缠身而没有完成. 1号带女儿去报名的时候,听到老师说"家长们请到这边来集合"的时候 ...
- Spring之AOP编程
一.AOP简介 AOP的英文全称是Aspect Oriented Programming,意为:面向切面编程. AOP采取横向抽取的机制,取代了传统纵向继承体系的代码复用.AOP常用于 ...
- Python基础--函数的定义和调用
一.函数的作用: 提高代码的可读性,减少代码的冗余,方便调用和修改,组织结构清晰 二.函数的定义:函数遵循先定义后调用的原则 1.无参函数 def funcname(): #def 是关键字,后跟函数 ...
- pyspider爬取TripAdvisor
#!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on 2017-06-11 10:10:53 # Project: london f ...
- 使用hue查看hdfs系统报无法访问:/user/hadoop。 Note: you are a Hue admin but not a HDFS superuser, "hdfs" or part of HDFS supergroup, "supergroup".
出现这个问题,是因为默认的超级用户是hdfs ,我的是hadoop用户登录的, 也就是说首次登录hadoop这个用户是我的超级用户 此时只需要将hue.ini配置改为 然后重启即可.