CODEWITHSUNDEEP
jqueryajax
roberto tomás
roberto tomás

Reputation: 4687

Basic jQuery ajax from a third party site

Short Version

I am having trouble with the AJAX using jQuery.

here's my Fiddle .. I keep getting undefined as the response back from the get(). How do I get that html from my query?

Long Version

At the moment this is just an idea. I found a site http://www.pin1yin1.com/ which accepts queries directly at the end of the url after the comment mark, like: http://www.pin1yin1.com/#中文 — it returns a very good pinyin for a given hanzi.

I am considering writing a google chrome extension that would automatically ruby-ify chinese text inline in the document, like many page translation tools.

To do this, I have to interpret the results from that site. They always looks something like this:

<tr class="characters">
    <td><a href="/dict/zi/中">中</a></td>
    <td><a href="/dict/zi/文">文</a></td>
</tr>
<tr class="pinyin">
    <td>zhōng</td>
    <td>wén</td>
</tr>

and I need to convert that to ruby that I could inject back into the page like:

<ruby>中
    <rt><a href="/dict/zi/中">zhōng</a></rt>
</ruby>
<ruby>文
    <rt><a href="/dict/zi/文">wén</a></rt>
</ruby>

So my question is, how do I do that? I am having trouble with the AJAX using jQuery.

here's my Fiddle .. I keep getting undefined as the response back from the get()

Upvotes: 1

Views: 890

Answers (2)

SLaks
SLaks

Reputation: 887867

As you've discovered, you cannot read replies from a separate origin in client-side code, except with cooperation from the server.

However, Chrome extensions can send requests to other sites, as long as you list them in the permissions section of the manifest.

Upvotes: 2

Bas van Dijk
Bas van Dijk

Reputation: 10713

You are making a cross site script call. Also known as XSS. This means you make a call to a domain other than the one your website is running on. See http://en.wikipedia.org/wiki/Cross-site_scripting

When I run your example (which contains an error in the get url you should replace http:// http://www.pin1yin1.com with http://www.pin1yin1.com) I see the XSS in error in the console:

XMLHttpRequest cannot load http://www.pin1yin1.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

Upvotes: 1

Related Questions