在前端开发中，我们经常需要向其他网站的API发送请求获取数据。然而，由于浏览器的同源策略限制，如果我们直接使用AJAX或Fetch API去请求其他域下的数据，会遇到跨域问题。为了解决这个问题，我们可以使用JSONP技术。
JSONP是什么
JSONP（JSON with Padding）是一种跨域通信的技术，它利用了HTML页面可以加载其他域下的JavaScript文件这个特点来实现跨域请求。JSONP请求不是通过XMLHttpRequest对象发起的，而是通过动态创建<script>标签来加载其他域下的JS文件。</p> <p>JSONP请求需要在后端服务器上提供一个回调函数，前端请求该接口时，可以传递一个回调函数名作为参数，后端将数据包装在这个回调函数中返回给前端，从而实现跨域请求。</p> <h2>如何使用JSONP</h2> <p>在前端代码中，我们需要定义一个全局函数来处理返回的数据。这个全局函数就是我们要传递给后端的回调函数名。例如：</p> <pre class="prettyprint login javascript">function handleData(data) { console.log(data); }</pre><p>接着，我们可以使用jQuery的getJSON方法来发起JSONP请求：</p> <pre class="prettyprint login javascript">$.getJSON('http://example.com/api?callback=handleData');</pre><p>其中，<code>callback</code>参数指定了回调函数的名称。当后端返回数据时，会自动把数据包装在这个回调函数中，例如：</p> <pre class="prettyprint login javascript">handleData({"name": "张三", "age": 18});</pre><p>这样，我们就可以在<code>handleData</code>函数中拿到数据并进行处理了。</p> <h2>POST请求如何使用JSONP</h2> <p>上面的例子是一个GET请求，那么如果我们需要发送POST请求呢？其实也很简单，只需要在后端提供一个接受POST请求的API，并在前端通过动态创建<form>标签来提交数据即可。例如：</p> <pre class="prettyprint html">-- -------------------- ---- ------- ----- ----------- ------------------------------- -------------- ------ ----------- ----------- ----------- ------ ----------- ---------- ----------- ------- -------- -------- ---------------- - ------------------ - ----- ---- - ---------------------------------- ----- ------------ - ------------- ----- --- - ------------------------------------------ --------------------------- ----- ------------------------------- - -- - ------------------- ----- ------ - --------------------------------- ---------- - ---- ---------------------------------- --- ---------</pre><p>上面的代码中，我们首先定义了一个全局函数<code>handleData</code>来处理返回的数据。然后，我们通过动态创建<form>标签来构造POST请求。注意，在<form>标签上加上了一个<code>action</code>属性，并在JS中修改它的值，以便把回调函数名传递给后端。在表单提交时，我们阻止默认行为，再动态创建一个<script>标签来加载后端返回的数据。</p> <h2>总结</h2> <p>JSONP是一种简单、方便的跨域通信方式。它可以在前端中使用，通过动态创建<script>标签来加载其他域下的JS文件，并在后端提供一个回调函数来处理数据。但是，由于JSONP请求不是通过XMLHttpRequest对象发起的，因此无法像AJAX那样处理错误和超时等问题。因此，在实际开发中需要根据具体情况选择合适的跨域解决方案。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/10913">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/10913">https://www.javascriptcn.com/post/10913</a></p> </blockquote>
