GVKun编程网logo

分别使用FlyJSONP和JQuery实现跨域的异步请求（flv.js跨域）

8

在这篇文章中，我们将为您详细介绍分别使用FlyJSONP和JQuery实现跨域的异步请求的内容，并且讨论关于flv.js跨域的相关问题。此外，我们还会涉及一些关于Ajax中JSON实现异步请求，JSO

在这篇文章中，我们将为您详细介绍分别使用FlyJSONP和JQuery实现跨域的异步请求的内容，并且讨论关于flv.js跨域的相关问题。此外，我们还会涉及一些关于Ajax中JSON实现异步请求，JSONP实现跨域异步请求的访问.........、Ajax练习三（使用JQuery实现异步请求）、CORS和jsonp实现跨域请求、jquery ajax结合thinkphp的getjson实现跨域的方法的知识，以帮助您更全面地了解这个主题。

本文目录一览：

分别使用FlyJSONP和JQuery实现跨域的异步请求（flv.js跨域）

分别使用FlyJSONP和JQuery实现跨域的异步请求（flv.js跨域）

直接上代码吧，介绍方面的东西都在代码注释里

首先是使用FlyJSONP实现跨域的异步请求

  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <script type="text/javascript" src=../../"js/flyjsonp.min.js"></script>  
  3. <script type="text/javascript">  
  4.     function getJFBCustomState(){  
  5.         FlyJSONP.init({debug: true}); //初始化FlyJSONP的实例，参数debug可设置为true或false   
  6.         FlyJSONP.post({  
  7.             url: ''http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo'',  
  8.             parameters: {phoneNo:''18601148104''},  
  9.             success: function(data){  
  10.                 var customState = data.customState;  
  11.                 alert(''服务器返回结果为：'' + customState);  
  12.             }  
  13.             /* 
  14.             success: function(data){ 
  15.                 var customState = data.customState; 
  16.                 alert(''服务器返回结果为：'' + customState); 
  17.             }, 
  18.             error: function(errorMsg){ 
  19.                 alert(''22''); 
  20.                 console.log(errorMsg); 
  21.             } 
  22.             */  
  23.         });  
  24.     }  
  25. </script>  
  26. <span style="color:blue; text-decoration:underline; cursor:pointer;" onclick="getJFBCustomState();">点此完成定制</span>  
  27.   
  28. <%--  
  29. ==========================================================================================  
  30. FlyJSONP  
  31. 主页：http://alotaiba.github.com/FlyJSONP/   
  32. 概述：FlyJSONP是一个应用JSONP实现跨域请求的相当轻量级的JavaScript类库  
  33.      FlyJSONP不依赖于任何JavaScript框架，只需设置一些参数便能够用它实现跨域的POST和GET请求  
  34. 补充：本示例在IE9.0.8112.16421和FireFox9.0.1上测试，均通过  
  35.       另外，我是在这个网站发现它的-->http://site518.net/javascript-cross-domain-request/   
  36. 用法：上面是客户端代码，下面是服务端代码  
  37.      String phoneNo = request.getParameter("phoneNo"));  
  38.      //TODO ...   
  39.      response.setContentType("application/json; charset=UTF-8");  
  40.      response.getWriter().print("{customState: ''hasCustomized''}");  
  41. 注意：服务端输出给客户端时，输出的必须是json字符串，否则客户端无法接收  
  42. ==========================================================================================  
  43. --%>  
接下来就是使用JQuery实现跨域的异步请求
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <script type="text/javascript" src=../../"js/jquery-1.7.1.min.js"></script>  
  3. <script type="text/javascript">  
  4.     $(function(){  
  5.         $(''#validateCustom'').click(function(){  
  6.             $.getJSON(''http://123.125.**.***:8088/ecpaycus/web/getCustomizeByPhoneNo?jsoncallback=?&phoneNo=18601148104'',  
  7.                 function(json){  
  8.                     var customState = json.customState;  
  9.                     alert(''服务端返回结果为：'' + customState);  
  10.                 }  
  11.             );  
  12.         });  
  13.     });  
  14. </script>  
  15. <span style="color:blue; text-decoration:underline; cursor:pointer;" id="validateCustom">点此完成定制</span>  
  16.   
  17. <%--  
  18. ==========================================================================================  
  19. 说明：本示例在IE9.0.8112.16421和FireFox9.0.1上测试，均通过  
  20. 用法：上面是客户端代码，下面是服务端代码  
  21.      String phoneNo = request.getParameter("phoneNo"));  
  22.      //TODO ...   
  23.      String jsoncallback = request.getParameter("jsoncallback");  
  24.      String jsonReturn = "{customState: ''hasCustomized''}";  
  25.      response.setContentType("application/json; charset=UTF-8");  
  26.      response.getWriter().print(jsoncallback + "(" + jsonReturn + ")");  
  27. 注意：服务端输出给客户端时，输出的必须是json字符串，否则客户端无法接收  
  28.       且，客户端请求时，必须提供回调函数名，并以参数形式放到请求的URL后面  
  29.       服务端输出给客户端时，必须将接收到的回调函数名字放到json字符串的前面  
  30. ==========================================================================================  
  31. --%>  


原文链接： http://blog.csdn.net/hopezhangbo/article/details/7383853

Ajax中JSON实现异步请求，JSONP实现跨域异步请求的访问.........

Ajax中JSON实现异步请求，JSONP实现跨域异步请求的访问.........

JSON是一个轻量级的数据交换格式基于文本的数据交换方式或者也叫数据描述格式，在JS语言中，一切都是对象所以任何支持的类型都可以通过JSON来表示，比如：字符串、数字、数组、对象等，其中对象表示成键值对数据由逗号分隔，花括号保存对象，方括号保存数组，JSON是JS对象的字符串表示法，它使用文本来表示JS 对象的信息，本质上是一个字符串。

JSON的优点：

1、基于纯文本，跨平台传递极为简单；

2、JavaScript原生支持，后台语言几乎全部支持；

3、轻量级数据格式、占用字符数量极少，特别适合在互联网中传递；

4、可读性强；

5、容易编写和解析，前提是你知道数据结构；

要想实现JSON和JS 的对象转换，

1：对象转换成JSON字符串，使用JSON.stringify（）方法

2：JSON转换成对象，使用JSON.parse()方法

在一些网站中，使用Ajax进行异步请求时，就是通过JSON格式的对象来传递数据的使用的格式一般为

Content-Type：application/json；charset=utf-8或者text/plain；charset=utf-8就能进行实现异步请求的数据传递，但是Ajax支持跨域的异步请求吗？答案是否定的，跨域请求是不支持的，

Ajax直接请求普通文本存在跨域权限访问的问题，不管是静态页面、动态网页、web服务、WCF等，只要是跨域请求一律不准。但是web页面上调用js文件时则不用受到跨域的影响（不仅如此，凡是有src这个属性的标签都可以具有跨域请求的能力比如：<script><img><iframe>）,所以跨域请求数据只能有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；于是就产生了一种非正式的传输协议，成为JSONP，该协议的一个要点是允许用户传递一个callback的参数给服务器端，然后服务器端返回数据时将这个callback参数作为函数来包裹在JSON数据，这样客户端就可以随意定制自己的函数来自动处理数据了，

JSONP的原理是靠jQuery的eval函数将字符串执行，字符串中是函数的名称，通过eval（）；将函数启动后，函数中包裹的JSON对象就可以实现数据的传递了。

总结：

1、ajax和jsonp在调用方式上很相似，目的也一样，都是请求一个url，然后处理从服务器传递过来的数据，因此jQuery和ext等框架都是把jsonp作为ajax的一种形式进行封装；

2、ajax的核心是通过XMLHttpRequest获取非本页的内容、而jsonp的核心则是动态添加<script>标签来调用服务器提供js脚本

3、ajax和jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp同样不排斥同域的数据的获取。

4、jsonp是一个方式或者说是强制性协议，同样我们不一定非得使用json格式来传递数据，只要是字符串就行，但是不方便提供传递的公开服务。

 

 

Ajax练习三（使用JQuery实现异步请求）

Ajax练习三（使用JQuery实现异步请求）

(三)使用JQuery异步请求

　　之前的练习笔记Ajax练习二（原生JS异步请求）,是使用原生JS来实现Ajax，这里将使用JQuery来实现Ajax。（趁着三分钟热血还没过去，就先记录下来）。后台的配置没变还是这个Ajax练习一（配置Java后台）。

Get请求

　　同样这里还是设置一个页面，这里我就放一个按钮。到时候运行结果，直接看控制台。(我也懒得下JQuery.js，我直接使用CDN加速)页面布局代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<!-- 按钮用来请求后台的数据 -->
<button id="request">点我请求后台的数据</button>
<!-- 设置一些操作 -->
<script> $("#request").click(function () { $.ajax({ type: "get",url: "http://192.168.1.101:8080/mineTest/first.do",success: function (data) { console.log(data) },error: function (jqObj) { console.log(jqObj.status) } }); }); </script>
</body>
</html>

　　打开网页，点击按钮发送一个get请求，控制台输出的结果如下（data就是JSON解析后的对象，也就是JSON数据JQuery已经帮我们处理了）：

Post请求

　　这个布局跟上个笔记的基本差不多，同样是传两个数字给后台，然后后台返回两个数相加的结果，布局代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<!-- 输入提交的内容 -->
<label>请输入数字1 : </label>
<input type="number" id="num1">
</br>
<label>请输入数字2 : </label>
<input type="number" id="num2">
</br>
<!-- 按钮用来请求后台的数据 -->
<button id="request">点我请求后台的数据</button>
<!-- 设置一些操作 -->
<script> //点击按钮后向后台发起请求 $("#request").click(function () { $.ajax({ type: "post",url: "http://192.168.1.101:8080/mineTest/sum.do",data: {//上传参数 num1: $("#num1").val(),num2: $("#num2").val() },dataType: "text",//数据格式 success: function (data) { console.log(data) },error: function (jqObj) { console.log(jqObj.status) } }); }); </script>
</body>
</html>

　　打开网页后输入两个数字，随后向后台发送请求，结果如下图所示：

　　终于完成练习了，估计下周我就忘了- -！

CORS和jsonp实现跨域请求

CORS和jsonp实现跨域请求

    同源策略：所谓同源是指，域名，协议，端口相同，它是由netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。当浏览器同时打开两个tab页面（两个不同服务器提供），tab1页面发送请求时，浏览器会检测是否是向tab1的服务器发出请求，若是向tab2的服务器发出的请求会报错。如下面的示例代码，index.html 运行在 http://127.0.0.1:8001服务器上，向另一个服务器http://127.0.0.1:8002/cos_service 发送ajax请求，浏览器控制台出现错误提示：同源策略禁止读取位于 http://127.0.0.1:8002/cos_service/ 的远程资源。（原因：CORS 请求未能成功）,  为了实现这种跨域请求，可以利用CORS和jsonp.

index.html     ( http://127.0.0.1:8001/index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
</head>
<body>
<p>跨域请求jsonpdemo2项目中的视图</p>
<button onclick="send();">请求</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
function send() {
        $.ajax({
            url:‘http://127.0.0.1:8002/cos_service/‘,type: ‘get‘,success:function(data) {
            console.log(data);
}}
        );
}
</script>
</body>
</html>

1. CORS ( Cross-origin resource sharing ) 跨域资源共享

　　对于上面的请求，只需在http://127.0.0.1:8002/cos_service/的视图函数的返回请求头中设置Access-Control-Allow-Origin=访问的域名，此处为http://127.0.0.1:8001，代码如下：

views.py    （ http://127.0.0.1:8002/）

def cos_service(request):
　　info={"name":"小明","age":24}
   response = HttpResponse(json.dumps(info))
   response[‘access-control-allow-origin‘]=‘http://127.0.0.1:8001‘
　　# response[‘access-control-allow-origin‘] = ‘*‘     #对所有客服端请求
　　return response
 

相关知识：
 

　　浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
 

　　只要同时满足以下两大条件，就属于简单请求
 

　　（1) 请求方法是以下三种方法之一：
   　　　　  HEAD
     　　　　GET
    　　　　 POST
 　　（2）HTTP的头信息不超出以下几种字段：
  　　　　   Accept
  　　　　   Accept-Language
     　　　　Content-Language
    　　　　 Last-event-id
    　　　　 Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
 

　　*简单请求和非简单请求的区别？
 

   　　　　简单请求：一次请求
    　　　　非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。
 　　* 关于“预检”
 

　　　　- 请求方式：OPTIONS
 　　　　- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
 　　- 如何“预检”
      　　　　=> 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
         　　Access-Control-Request-Method
     　　　　 => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        　　 Access-Control-Request-Headers
 

　　支持跨域，简单请求
 

　　　　服务器设置响应头：Access-Control-Allow-Origin = ‘域名‘ 或 ‘*‘
 

　　支持跨域，复杂请求
 

　　由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
 

    

  • “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
    •  
 
  • “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers
    •  



 
 

2. jsonp实现 (json + padding)
 

    　　jsonp主要利用script标签中src的跨域请求，需要前后端的配合实现，设置相同函数名称。对于上面 http://127.0.0.1:8001/ 上的前端页面index.html，ajax请求中设置参数jsonp：callback，并定义相应的function callback（）函数，在 http://127.0.0.1:8002/的视图函数views.py的返回内容中内嵌相同的函数名称，即字符窜“callback（）”。 具体代码如下：
 

　　(注意：ajax请求跨域url为：http://127.0.0.1:8002/service， 设置成https://127.0.0.1:8002/service会出错，服务器不会响应)
 

index.html     (http://127.0.0.1:8001/)
 

 
 

 
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
</head>
<body>
<p>跨域请求jsonpdemo2项目中的视图</p>
<button onclick="send();">请求</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
     function callable(arg){
         console.log(arg);
    }
</script>
<script>
    function send() {
        $.ajax({
            url:‘http://127.0.0.1:8002/service/‘,dataType:‘jsonp‘,//未加jsonp时控制台显示：同源策略禁止读取位于 http://127.0.0.1:8002/service/ 的远程资源。（原因：CORS 请求未能成功）
            jsonp:‘callable‘,success:function(data) {
        }}
        );
 

 

 
 

views.py  ( http://127.0.0.1:8002/)
 

 
 
def service(request):
    print ‘service‘
    data =‘参数‘
    info={"name":"小明","age":24}
    # return HttpResponse("callable(‘%s‘)"%data)
    return HttpResponse("callable(‘%s‘)" %json.dumps(info))
 

 

　　上面的ajax请求中dataType:‘jsonp‘,伪造script的src请求，类似于下面的代码，将上面的index.html 换为下面代码时能达到相同的功能。
 

 
 
<script>
     function callable(arg){
        console.log(arg);
    }
</script>
<script src="http://127.0.0.1:8002/service/"></script> <!--https://时不会返回结果,另外script标签必须放在传回函数的下方，否则找不到-->
<script>
 

 

相关参考博客：http://www.cnblogs.com/yuanchenqi/articles/7638956.html#_label6
 

                         https://www.cnblogs.com/keyi/p/6726089.html

        

            

        	




jquery ajax结合thinkphp的getjson实现跨域的方法
jquery ajax结合thinkphp的getjson实现跨域的方法
本文实例讲述了jquery ajax结合thinkphp的getjson实现跨域的方法。分享给大家供大家参考，具体如下：


jquery中post的应该是不能跨域,网上说get的可以跨域,但是我试了一下也不行,然后就进行最后的拼搏getjson,结果成功,哈哈


js处写作：
$.getJSON(
    "/index.php/Index/test",
    function(data){
    alert(data.dd);
    }
);
登录后复制
语法：
jQuery.getJSON(url,[data],[callback])
立即学习“PHP免费学习笔记（深入）”；
jquery ajax结合thinkphp的getjson实现跨域的方法
php处写作:
$data[&#39;dd&#39;]=&#39;zonglonglong&#39;;
$this->ajaxReturn($data,&#39;JSON&#39;);
登录后复制
   
这样就可以跨域的访问了。
如果还是不行,提示同源策略的问题,那么在服务端,php文件的话,就写上
header("access-control-allow-origin:*");
登录后复制
   
意思就是支持所有其他域的访问,如果是指定域访问,就把*号改为域名,如:
header("access-control-allow-origin:www.baidu.com");
登录后复制
   




希望本文所述对大家jQuery程序设计有所帮助。


更多jquery ajax结合thinkphp的getjson实现跨域的方法相关文章请关注PHP中文网！
今天关于分别使用FlyJSONP和JQuery实现跨域的异步请求和flv.js跨域的分享就到这里，希望大家有所收获，若想了解更多关于Ajax中JSON实现异步请求，JSONP实现跨域异步请求的访问.........、Ajax练习三（使用JQuery实现异步请求）、CORS和jsonp实现跨域请求、jquery ajax结合thinkphp的getjson实现跨域的方法等相关知识，可以在本站进行查询。

		

	

本文标签：
 

		





      

    

    

      
 上一篇JS中小括号的用法总结（js中小括号的用法总结）   

      
 下一篇angularjs 广播（angularjs radio）   

    


    

      
相关文章