开发者

Cross-Domain Requests with jQuery

For a project I need to get the source code of web page of different other domains. I have tried following code:

$('#contai开发者_Python百科ner').load('http://google.com');

$.ajax({
    url: 'http://news.bbc.co.uk',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('a.tsh').text();
        alert(headline);
    }
});

Still I am not getting any results but just a blank alert box.


By default all browsers restrict cross-domain requests, you can get around this by using YQL as a proxy. See a guide here: http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax


For security reasons scripts aren't able to access content from other domains. Mozilla has a long article about HTTP access control, but the bottom line is that without the website themselves adding support for cross-domain requests, you're screwed.


This code is Working Perfectly with the help of JQuery and YQL

$(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
    doAjax($(this).attr('href'));
    return false;
  });
  function doAjax(url){
    if(url.match('^http')){
      $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent("http://www.yahoo.com")+
                "%22&format=xml'&callback=?",
        function(data){
          if(data.results[0]){
            var data = filterData(data.results[0]);
            container.html(data);

          } else {
            var errormsg = '<p>Error: could not load the page.</p>';
            container.html(errormsg);
          }
        }
      );
    } else {
      $('#target').load(url);
    }
  }
  function filterData(data){
    data = data.replace(/<?\/body[^>]*>/g,'');
    data = data.replace(/[\r|\n]+/g,'');
    data = data.replace(/<--[\S\s]*?-->/g,'');
    data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
    data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
    data = data.replace(/<script.*\/>/,'');
    return data;
  }
});


The solution for your case is JSON with padding or JSONP.

You will need an HTML element that specified for its src attribute a URL that returns JSON like this:

<script type="text/javascript" src="http://differentDomain.com/RetrieveUser?UserId=1234">

You can search online for a more in-depth explanation, but JSONP is definitely your solution for this.


Do the following steps. 1: Add datatype:jsonp to the script. 2: Add a "callback" parameter to the url 3: Create a javascript function with name same as "callback" param value. 4: The output can be received inside javascript function.


Found one more solution for this :

function getData(url){
   if(url.match('^http')){
     $.get(url,
      function(data){
        process(data);
      }//end function(data)
     );//end get
   } 
}

This is really a pretty easier way to handle cross-domain requests. As some of the sites like www.imdb.com rejects YQL requests.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜