如何使用ajax調用javascript加載新的Twitter提要javascript

我對JavaScript非常陌生，無法知道如何在用戶鍵入新的搜索查詢時加載新的Twitter提要。以下是我的代碼如何使用ajax調用javascript加載新的Twitter提要javascript

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Custom Twitter Feed</title> 
<style type="text/css"> 
body { 
    background: #111111; 
    position: relative; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
    color: #ccc; 
} 
h1 { padding: 20px 0 0 15px; margin: 0; letter-spacing: -3px; } 
h2 { padding: 0 0 0 15px; margin: 0; color: #777; letter-spacing: -2px; } 
.loader  { position: absolute; top: 250px; left: 105px; } 
#twitter { position: relative; width: 280px; background: #222; height: 820px; margin:  50px 0 0 250px; } 
#twitter li p { padding: 0 0 15px; } 
#twitter p a:link, #twitter p a:active, #twitter p a:visited { color: #6fb2cd;  text-decoration: none; } 
#twitter p a:hover { text-decoration: underline; } 
#twitter ul { 
    width: 260px; 
    height: auto; 
    padding: 15px 0 0 15px; 
    margin: 0; 
} 
#twitter li { 
    float: left; 
    margin: 3px 0; 
    list-style-type: none; 
} 
li.twitter_date { 
    background: url(../images/date_bg.jpg) no-repeat left top; 
    width: 95px; 
    height: 23px; 
    text-align: center; 
    line-height: 21px; 
} 
.twitter_date a:active, .twitter_date a:link, .twitter_date a:visited { 
    color: #666; 
    background: #333; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-decoration: none; 
    text-transform: uppercase; 
    padding: 7px; 
} 
.twitter_date a:hover { 
    color: #666; 
} 
a:link#go_back, a:active#go_back, a:visited#go_back { 
    display: block; 
    background: url(/demos/go_back.jpg) no-repeat top left; 
    width: 120px; 
    height: 40px; 
    position: absolute; 
    top: 50px; 
    left: 100px; 
    text-indent: -9999px; 
    color: #111; 
} 
a:hover#go_back { 
    background: url(/demos/go_back.jpg) no-repeat -120px 0; 
} 
</style> 
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 


//Twitter 
window.onload = function() { 
    var ajax_load = "<img class='loader' src=' loader.gif' alt='Loading...' />"; 
    var url = 'http://twitter.com/statuses/user_timeline/' + 'coldplay' + '.json?call back=twitterCallback2&count=6'; 
    var script = document.createElement('script'); 
    $("#twitter_feed").html(ajax_load); 
    script.setAttribute('src', url); 
    document.body.appendChild(script); 
}

changeFeed是應該更改Feed的功能，但它不起作用。有任何想法嗎？

function changeFeed(){ 
    var ajax_load = "<img class='loader' src=' loader.gif' alt='Loading...' />"; 
    var newSearch = $('#query').val(); 
    var url = 'http://twitter.com/statuses/user_timeline/' + newSearch + '.json?callback=twitterCallback2&count=6'; 
    var script = document.createElement('script'); 
    $("#twitter_feed").html(ajax_load); 
    script.setAttribute('src', url); 
    document.body.appendChild(script); 
} 

function twitterCallback2(twitters) { 
    var statusHTML = []; 
    for (var i=0; i<twitters.length; i++){ 
    var username = twitters[i].user.screen_name; 
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, 
function(url) { return '<a href="'+url+'">'+url+'</a>'; 
}).replace(/\[email protected]([_a-z0-9]+)/ig, function(reply) { 
    return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>'; 
}); 
statusHTML.push('<li class="twitter_date"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li> <li><p>'+status+'</p></li>'); 
    } 
    document.getElementById('twitter_update_list').innerHTML = statusHTML.join(''); 
} 

function relative_time(time_value) { 
    var values = time_value.split(" "); 
    time_value = values[1] + " " + values[2] + " " + values[5] + " " + values[3]; 
    var parsed_date = new Date(); 
    parsed_date.setTime(Date.parse(time_value)); 
    var months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 
'Sep', 'Oct', 'Nov', 'Dec'); 
    var m = parsed_date.getMonth(); 
    var postedAt = ''; 
    postedAt = months[m]; 
    postedAt += " "+ parsed_date.getDate(); 
    postedAt += "," 
    postedAt += " "+ parsed_date.getFullYear(); 
    return postedAt; 
}           

</script> 
</head> 

<body> 
<a id="go_back" href="javascript:history.go(-1)">Go Back</a> 
<div id="twitter"> 
    <form> 
    Search: <input type="text" name="searchstring" id="query" /><br /> 
    </form> 
    <button type="button" onclick="changeFeed();">Search</button> 

    <h1>searchstring.text()</h1> 
    <h2>Twitter Feed</h2> 
    <ul id="twitter_update_list"> 
    </ul> 
</div>

來源

2012-08-30 Sean Smyth

您是否收到任何錯誤？什麼似乎在打破？ – Hacknightly

我忘了創建元素newSearch。一旦我包括該行

var newSearch = document.createElement('newSearch')

一切都開始正常工作。

來源

2012-08-30 18:32:48

如何使用ajax調用javascript加載新的Twitter提要javascript

回答

相關問題