通过jQuery+JSONP中跨域请求的方法（详细教程）-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

通过jQuery+JSONP中跨域请求的方法（详细教程）

Jun 01, 2018 am 10:46 AM

javascript terperinci

了解了jsonp之后，大家应该也都明白了，jsonp主要就是用来实现跨域的获取数据，今天我们就来详细探讨下如何在实际中应用jsonp实现跨域

　　JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

上面一段话来自百度百科，概念永远是那么抽象难懂，看例子才是最直观的表现。例子看的多了，领悟到那个点了，自然自己也会学着抽象的描述了。这就是为什么常说“学习知识是从薄到厚，又由厚到薄的过程”。好了扯远了。下面直接来看一个例子。

问题：本地现有一个页面demo.html需要从http://localhost:3561/User/GetAllNames获取数据并展示。

解答：由于问题中的两方不在同一服务器，故需要使用jsonp来跨域访问。

① 客户端编写

客户端使用jQuery中提供的$.getJson方法来跨域访问。getJson有3个参数：

I. url：请求地址；

II. data：发送到服务端的参数；

III. callback：成功时的回调函数。

getJson的使用方法和普通的$.get方法基本一致，不同的地方在于getJson需要在url后面的参数部分加上callback=?这一固定部分，jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。然后在回调函数中操作从异域返回的json对象，回调函数callback的参数即为该json对象。

&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&gt;
  &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul id=&quot;nameList&quot;&gt;&lt;/ul&gt;

  &lt;script src=&quot;http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $.getJSON(&quot;http://localhost:3561/User/GetAllNames?callback=?&quot;, function(json) {
      for (var i = 0; i &lt; json.length; i++) {
        $(&quot;#nameList&quot;).append(&quot;&lt;li&gt;&quot; + json[i] + &quot;&lt;/li&gt;&quot;);
      }
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

　　② 服务端编写

服务端的逻辑主要是将数据序列化为json字符串，然后封装成"callback(json)"的形式，callback为jQuery自动生成并传到服务端的函数名称。下面使用C#实现：

public class UserController : Controller
{
    public string GetAllNames(string callback)
  {
    string[] names = new string[] { &quot;张三丰&quot;, &quot;张无忌&quot;, &quot;令狐冲&quot;, &quot;杨过&quot;, &quot;郭靖&quot; };
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string json = jss.Serialize(names);
    return string.Format(&quot;{0}({1})&quot;, callback, json);
  }
}

Salin selepas log masuk

　　至此，便成功解决了问题。

思考：如果服务端已经写死了callback（如：return string.Format("moty({0})", json);）,那么客户端该怎么写呢？

参考：

$.ajax(&quot;http://localhost:3561/User/GetAllNames&quot;, {
  jsonpCallback: &quot;moty&quot;,
  dataType: &quot;jsonp&quot;,
  success: function(json) {
    for (var i = 0; i &lt; json.length; i++) {
      $(&quot;#nameList&quot;).append(&quot;&lt;li&gt;&quot; + json[i] + &quot;&lt;/li&gt;&quot;);
    }
  }
});

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

利用ES6通过WeakMap解决内存泄漏问题（详细教程）

Node.JS循环删除非空文件夹及子目录下的所有文件

Javascript中prototype与__proto__的关系详解

Atas ialah kandungan terperinci 通过jQuery+JSONP中跨域请求的方法（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn