Question

我制作了一个jQuery插件，它可以在我的mac上运行。当我上传到服务器时，它不起作用。

为什么？为什么我不能在服务器上调用ajax？

http://www.searchbox34.net23.net/rss/index.html

(function( $ ){

  $.fn.rss = function(options) {  

    var settings = {
       'feedUrl'          : '',
       'hfc'              : '#999',
       'bodycolor'        : '#999',
       'itemcolor'        : '#CCC',
       'itemhover'        : '#AAA',
       'height'           : '250px',
       'width'            : '250px',
       'obj'              : '',
       'sync'             : 'true',
       'update'           : '1000',
    };
    var options = $.extend(settings, options);  
    return this.each(function() {   

      // If options exist, lets merge them
     // with our default settings
var doingAjax = false;
setInterval(function() {
  if (!doingAjax) {
       $('<div class="image-holder"></div>').html('<div id="loading">LOADING...</div>').appendTo('#blabber');
       $('.image-holder').css({
        'float'           :'left',
        'background'      :options.bodycolor, 
        'height'          :$('#blabber').height(),
        'width'           :options.width,
        'padding'         :'0px',
        'margin'          :'0px',
        'border'          :'1px solid #ddd',
        'background'      :'#eee url(loading.gif) 50% 50% no-repeat',
        'position'        :'absolute',
        'top'             :'0px',
        'padding-top'     :'3.5px',
        'padding-bottom'  :'3.5px',

        })
           $('.image-holder #loading').css({
        'height'          :'25px',
        'text-align'      :'center',
        'padding-top'     :$('#blabber').height()/2+$('#loading').height()*2,
        })
    doingAjax = true;
    $.ajax({
    type: "GET",
    global: true,
    processData: true,
    cache: true,
    url: options.feedUrl,
    dataType: "xml",
    async:options.sync,
    complete:function(){
        doingAjax = false;
        $(".image-holder").fadeOut(1000);
    },
    success: function(xml) {
        doingAjax = false;
        $(xml).find('channel').each(function(){
        var title = $(this).find('title:first').text(); 
        var ttl = $(this).find('ttl:first').text(); 
        $(xml).find('image').each(function(){
        var url2   = $(this).find('link').text();
        var icon   = $(this).find('url').text();
        $('<div class="title"></div>').html('<a href="'+url2+'"style="">'+title+ttl+'</a><div id="icon"></div>').fadeIn(1000).appendTo('#title');
        $('.title').css({
        'font-size'       :'0.8em',
        'outline'         :'none'
        });
        $('.title a').css({
        'padding-left'    :'10px',
        'padding-top'     :'3.5px',
        'font-size'       :'0.6em',
        'outline'         :'none',
        'text-decoration' :'none',
        'color'           :'#000',
        'height'          :'16px',
        'line-height'     :'16px',
        'float'           :'left',
        'overflow'        :'hidden'
        });
        $('.title #icon').css({
        '-moz-border-radius':'2px',
        '-khtml-border-radius':'2px',
        'border-radius'   :'3px',
        'width'           :'16px',
        'height'          :'16px',
        'margin-top'      :'4.5px',
        'margin-right'    :'10px',
        'background-image':'url('+icon+')',
        'background-repeat':'no-repeat',
        'overflow'        :'hidden',
        'float'           :'right'
        });

        });
        $(xml).find('item').each(function(){
        var title = $(this).find('title').text();
        var brief = $(this).find('description').text();
        var url   = $(this).find('link').text();
        $('<div class="items"style=""></div>').html('<a href="'+url+'"><div class="dis">'+brief+'</div></a>').fadeIn(1000).appendTo('#blab');
        $('.items').css({
       'background' :options.itemcolor,
       'padding'          :'5px', 
       'border-top'       :'solid 1px #000',
        });
        $('.items a').css({
        'font-size'       :'1.2em',
        'display'         :'block',
        'margin-top'      :'5px',   
        'margin-bottom'   :'5px',
        'text-decoration' :'none', 
        'color'           :'#000'
        });
        $('.items a .dis').css({
        'font-size'       :'0.8em',
        'padding-left'    :'10px'
        });
        $(".items").mouseout(function(){
        $(this).css("background",options.itemcolor)
        //$(this).animate({"border-color":'#000'});
        $(".items").mouseover(function(){
        $(this).css("background",options.itemhover)
        //$(this).animate({"border-color":'#FFF'});
        });
        });
        });
        });
    }
});
}
},options.update);
        $('<div id="blabber"></div>').appendTo(options.obj);
        $('#blabber').css({
        'height'          :'auto', 
        'width'           :options.width,
        'overflow'        :'hidden'
        });
        $('<h1 id="title"></h1>').appendTo('#blabber');
        $('#title').css({
        'background'      :options.hfc,
        'border-bottom'   :'solid 1px #000', 
        'height'          :'25px',
        'overflow'        :'hidden'
        });
        $('<div id="blab"></div>').appendTo('#blabber');
        $('#blab').css({
        'background'      :options.bodycolor, 
        'height'          :options.height,
        'width'           :options.width,
        'overflow-y'      :'scroll'
        });
        $('#blabber *').css({
        'margin'          :'0px',
        'padding'         :'0px',
        'outline'         :'none',
        'overflow-x'      :'hidden'
        });
        $('<div id="foot"></div>').appendTo('#blabber');
        $('#foot').css({
        'background'      :options.hfc, 
        'border-top'      :'solid 1px #000', 
        'height'          :'25px'
        });
    });
  }
})( jQuery );

`

Answer 1

您在服务器之间调用AJAX。许多浏览器会限制此操作以防止基于XSS的攻击。</ p>

Answer 2

您正在从另一个域调用URL，但这是不允许的。由于您正在抓取Twitter提要，请使用Twitter的JSONP api。这是关于如何在Twitter上使用它的jQuery plugin and a tutorial。

为什么我的jQuery插件不起作用？

2 个答案: