使用输入onBlur触发跨域YQL ajax请求

Question

I have a form to collect information about a product (ie from Amazon). I am attempting to trigger a YQL ajax request on blur of the URL input. Currently, no errors in console, but no results either. Here is my form input:

<div class="uk-form-row">
            <div class="uk-form-label"><?php echo $this->form->getLabel('item_url'); ?></div>
            <div class="uk-form-controls "><input type="text" name="jform[item_url]"   id="jform[item_url]" value="<?php if (!empty($this->item->id)) { echo $this->item->item_url;}; ?>" class="uk-form-large uk-width-medium-1-1" placeholder="http://" aria-required="required" required="required"/></div>
          </div> 
              <script type="text/javascript"> 
    jQuery( "#jform[item_url]" ).blur(function() {
              var path = jQuery('#jform[item_url]').val();
          requestCrossDomain(path, function(results) {
   jQuery('#url_results').html(results);
    });
    });
    </script>

    <div id="url_results">
          </div>

My function:

    // Accepts a url and a callback function to run.
function requestCrossDomain( site, callback ) {

    // If no url was passed, exit.
    if ( !site ) {
        alert('No site was passed.');
        return false;
    }

    // Take the provided url, and add it to a YQL query. Make sure you encode it!
    var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=cbFunc';

    // Request that YSQL string, and run a callback function.
    // Pass a defined function to prevent cache-busting.
    jQuery.getJSON( yql, cbFunc );

    function cbFunc(data) {
    // If we have something to work with...
    if ( data.results[0] ) {
        // Strip out all script tags, for security reasons.
        // BE VERY CAREFUL. This helps, but we should do more. 
        data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');

        // If the user passed a callback, and it
        // is a function, call it, and send through the data var.
        if ( typeof callback === 'function') {
            callback(data);
        }
    }
    // Else, Maybe we requested a site that doesn't exist, and nothing returned.
    else throw new Error('Nothing returned from getJSON.');
    }
}

Here's the fiddle: http://jsfiddle.net/FLY66/2/

Answer 1

This issue is more related to your server. You can simply set the Access-Control-Allow-Origin header on your server. Look for your server language to see how to set Access-Control-Allow-Origin

Setting it to * will accept cross-domain AJAX requests from any domain. Another alternative is use 'JSONP' data type for returned data.

References

http://en.wikipedia.org/wiki/Same_origin_policy

https://developer.mozilla.org/en/http_access_control