<?xml version="1.0" encoding="UTF-8" standalone="yes"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en-us"><id>https://blog.pgxn.org/tags/jsonp/</id><title>JSONP</title><updated>2011-05-13T03:58:33Z</updated><link rel="self" type="application/atom+xml" href="https://blog.pgxn.org/tags/jsonp/feed.xml"/><link rel="alternate" type="text/html" href="https://blog.pgxn.org/tags/jsonp/"/><author><name>The PGXN Maintainers</name></author><generator uri="https://gohugo.io/" version="0.167.0">Hugo</generator><entry><id>https://blog.pgxn.org/post/5441748625</id><title type="html">Using JSONP Callbacks</title><link rel="alternate" type="text/html" href="https://blog.pgxn.org/2011/jsonp-callbacks/"/><updated>2026-10-07T16:13:48Z</updated><published>2011-05-13T03:58:33Z</published><author><name>David E. Wheeler</name></author><category scheme="https://blog.pgxn.org/tags" term="jsonp" label="JSONP"/><category scheme="https://blog.pgxn.org/tags" term="callback" label="Callback"/><category scheme="https://blog.pgxn.org/tags" term="blog" label="Blog"/><category scheme="https://blog.pgxn.org/tags" term="json" label="Json"/><summary type="html"><![CDATA[<p>Using the new <a href="https://github.com/pgxn/pgxn-api/wiki/JSONP">JSONP callback support</a> in the PGXN API, I just added a sidebar
to <a href="https://www.justatheory.com/" title="Just a Theory">my personal blog</a> that shows a list of all my PGXN distributions. The code
is simple:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;links&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>PGXN Code<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="kd">function</span> <span class="nx">pgxn_distros</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">&#39;&lt;dl&gt;&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">        <span class="k">for</span> <span class="p">(</span><span class="nx">dist</span> <span class="k">in</span> <span class="nx">data</span><span class="p">.</span><span class="nx">releases</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">            <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">                <span class="s1">&#39;&lt;dt&gt;&lt;a href=https://pgxn.org/dist/&#39;</span> <span class="o">+</span> <span class="nx">dist</span> <span class="o">+</span>
</span></span><span class="line"><span class="cl">                <span class="s1">&#39;&gt;&#39;</span> <span class="o">+</span> <span class="nx">dist</span> <span class="o">+</span> <span class="s1">&#39;&lt;/a&gt;&lt;/dt&gt;&#39;</span> <span class="o">+</span>
</span></span><span class="line"><span class="cl">                <span class="s1">&#39;&lt;dd&gt;&#39;</span> <span class="o">+</span> <span class="nx">data</span><span class="p">.</span><span class="nx">releases</span><span class="p">[</span><span class="nx">dist</span><span class="p">].</span><span class="kr">abstract</span> <span class="o">+</span> <span class="s1">&#39;&lt;/dd&gt;&#39;</span>
</span></span><span class="line"><span class="cl">            <span class="p">);</span>
</span></span><span class="line"><span class="cl">        <span class="p">}</span>
</span></span><span class="line"><span class="cl">        <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">&#39;&lt;/dl&gt;&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://api.pgxn.org/user/theory.json?callback=pgxn_distros&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>And the output looks like this:</p>
<p><img src="/2011/jsonp-callbacks/pgxn-code.png" alt="PGXN Code"></p>
<p>Not bad, eh? AS you can see, JSONP is dead easy to use with the JSON files
served by the JSON API. Try that, CPAN!</p>]]></summary><content type="html" xml:base="https://blog.pgxn.org/" xml:space="preserve"><![CDATA[<p>Using the new <a href="https://github.com/pgxn/pgxn-api/wiki/JSONP">JSONP callback support</a> in the PGXN API, I just added a sidebar
to <a href="https://www.justatheory.com/" title="Just a Theory">my personal blog</a> that shows a list of all my PGXN distributions. The code
is simple:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;links&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>PGXN Code<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="kd">function</span> <span class="nx">pgxn_distros</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">&#39;&lt;dl&gt;&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">        <span class="k">for</span> <span class="p">(</span><span class="nx">dist</span> <span class="k">in</span> <span class="nx">data</span><span class="p">.</span><span class="nx">releases</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">            <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">                <span class="s1">&#39;&lt;dt&gt;&lt;a href=https://pgxn.org/dist/&#39;</span> <span class="o">+</span> <span class="nx">dist</span> <span class="o">+</span>
</span></span><span class="line"><span class="cl">                <span class="s1">&#39;&gt;&#39;</span> <span class="o">+</span> <span class="nx">dist</span> <span class="o">+</span> <span class="s1">&#39;&lt;/a&gt;&lt;/dt&gt;&#39;</span> <span class="o">+</span>
</span></span><span class="line"><span class="cl">                <span class="s1">&#39;&lt;dd&gt;&#39;</span> <span class="o">+</span> <span class="nx">data</span><span class="p">.</span><span class="nx">releases</span><span class="p">[</span><span class="nx">dist</span><span class="p">].</span><span class="kr">abstract</span> <span class="o">+</span> <span class="s1">&#39;&lt;/dd&gt;&#39;</span>
</span></span><span class="line"><span class="cl">            <span class="p">);</span>
</span></span><span class="line"><span class="cl">        <span class="p">}</span>
</span></span><span class="line"><span class="cl">        <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">&#39;&lt;/dl&gt;&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://api.pgxn.org/user/theory.json?callback=pgxn_distros&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>And the output looks like this:</p>
<p><img src="/2011/jsonp-callbacks/pgxn-code.png" alt="PGXN Code"></p>
<p>Not bad, eh? AS you can see, JSONP is dead easy to use with the JSON files
served by the JSON API. Try that, CPAN!</p>
]]></content></entry></feed>