Big Sky :: GoogleのAjaxロードAPIが公開された(でも、それ動かないよ...)

2008/06/02

GoogleのAjaxロードAPIが公開された(でも、それ動かないよ...)

GoogleからjQueryやdojoがロード出来るAjaxライブラリが公開されました。

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader's google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:

jQuery

prototype

script.aculo.us

MooTools

dojo

http://code.google.com/apis/ajaxlibs/

でも、リンク先に載ってるコード、良く見たら動かないよ＞＜

正しくは


<script src="http://www.google.com/jsapi"></script>

<script>

  var renderResults = function(results) {

      $.each(results, function(index, item) {

        $('#result')

          .append('<div id="result' + index + '"></div>');

        $('#result' + index)

          .append('<a href="' + item.url + '">' + item.title + '</a>')

          .append('<div>' + item.content + '</div>')

          .append('<span>' + item.visibleUrl + '</span>')

          .css('padding', '0.5em');

        $('#result' + index + ' div')

          .css('border', '1px dotted gray')

          .css('width', '500px')

          .css('padding', '1em')

          .append('<span>');

        $('#result' + index + ' span')

          .css('color', 'green')

          .css('margin-left', '1em');

      });

  }



  // Load jQuery

  google.load("jquery", "1");



  // on page load complete, fire off a jQuery json-p query

  // against Google web search

  google.setOnLoadCallback(function() {

    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",



      // on search completion, process the results

      function (data) {

        if (data.responseData.results &&

            data.responseData.results.length>0) {

          renderResults(data.responseData.results);

        }

      });

    });



</script>

<div id="result"></div>

こんな感じになります。あと、visualization等の場合はgoogle.loadの第3引数が有効で"callback"の記述が出来たのですが、jQueryやdojo等サードパーティな物では動かなかった。残念。
ちなにみ上のコードを動かすと、こんな感じになります。

ちょっとまってね

Posted at 18:10 | WriteBacks () | Edit

Edit this entry...

wikieditish message: Ready to edit this entry.

New Name:

Title:

Body:

meta-tags: google, ajax, jquery
meta-creation_date: 2008-06-02T18:10:59+09:00

GoogleからjQueryやdojoがロード出来るAjaxライブラリが公開されました。
<blockquote class="quote" cite="http://code.google.com/apis/ajaxlibs/">

The AJAX Libraries API is a content distribution network and loading architecture for the most popular
open source JavaScript libraries. By using the <a href="http://code.google.com/apis/ajax/documentation/">Google AJAX API Loader's</a>
<code>google.load()</code> method, your application has high speed,
globaly available access to a growing list of the most popular JavaScript open source libraries including:

<ul>
<li><a href="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery" title="jQuery.com">jQuery</a></li>
<li><a href="http://code.google.com/apis/ajaxlibs/documentation/index.html#prototype" title="prototype">prototype</a></li>
<li><a href="http://code.google.com/apis/ajaxlibs/documentation/index.html#script_aculo_us" title="script.aculo.us">script.aculo.us</a></li>

<li><a href="http://code.google.com/apis/ajaxlibs/documentation/index.html#mootools" title="MooTools">MooTools</a></li>
<li><a href="http://code.google.com/apis/ajaxlibs/documentation/index.html#dojo" title="dojo">dojo</a></li>
</ul>
<cite>http://code.google.com/apis/ajaxlibs/</cite>
</blockquote>
でも、リンク先に載ってるコード、良く見たら動かないよ＞＜ 
<blockquote>

</blockquote>
正しくは
<code class="code">
&lt;script&nbsp;src=&quot;<a href="http://www.google.com/jsapi">http://www.google.com/jsapi</a>&quot;&gt;&lt;/script&gt; 
&lt;script&gt; 
&nbsp;&nbsp;var&nbsp;renderResults = function(results)&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(results, function(index, item)&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#result') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append('&lt;div id=&quot;result'&nbsp;+ index + '&quot;&gt;&lt;/div&gt;'); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#result'&nbsp;+ index) 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append('&lt;a href=&quot;'&nbsp;+ item.url + '&quot;&gt;'&nbsp;+ item.title + '&lt;/a&gt;') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append('&lt;div&gt;'&nbsp;+ item.content + '&lt;/div&gt;') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append('&lt;span&gt;'&nbsp;+ item.visibleUrl + '&lt;/span&gt;') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css('padding', '0.5em'); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#result'&nbsp;+ index + ' div') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css('border', '1px dotted gray') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css('width', '500px') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css('padding', '1em') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append('&lt;span&gt;'); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#result'&nbsp;+ index + ' span') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css('color', 'green') 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css('margin-left', '1em'); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); 
&nbsp;&nbsp;} 
 
&nbsp;&nbsp;// Load jQuery 
&nbsp;&nbsp;google.load(&quot;jquery&quot;, &quot;1&quot;); 
 
&nbsp;&nbsp;// on page load complete, fire off a jQuery json-p query 
&nbsp;&nbsp;// against Google web search 
&nbsp;&nbsp;google.setOnLoadCallback(function()&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;$.getJSON(&quot;<a href="http://ajax.googleapis.com/ajax/services/search/web?q=google&amp;v=1.0&amp;callback=?">http://ajax.googleapis.com/ajax/services/search/web?q=google&amp;v=1.0&amp;callback=?</a>&quot;, 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// on search completion, process the results 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;(data)&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(data.responseData.results &amp;&amp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data.responseData.results.length&gt;0)&nbsp;{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderResults(data.responseData.results); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); 
&nbsp;&nbsp;&nbsp;&nbsp;}); 
 
&lt;/script&gt; 
&lt;div&nbsp;id=&quot;result&quot;&gt;&lt;/div&gt; 
</code>
こんな感じになります。あと、visualization等の場合は<a href="http://mattn.kaoriya.net/software/lang/javascript/20080324161413.htm">google.loadの第3引数が有効で"callback"の記述が出来た</a>のですが、jQueryやdojo等サードパーティな物では動かなかった。残念。 
ちなにみ上のコードを動かすと、こんな感じになります。 

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript"><!--
 var renderResults = function(results) {
 $.each(results, function(index, item) {
 $('#google-search-result')
 .append('<div id="result' + index + '"></div>');
 $('#result' + index)
 .append('<a href="' + item.url + '">' + item.title + '</a>')
 .append('<div>' + item.content + '</div>')
 .append('' + item.visibleUrl + '')
 .css('padding', '0.5em');
 $('#result' + index + ' div')
 .css('border', '1px dotted gray')
 .css('width', '500px')
 .css('padding', '1em')
 .append('');
 $('#result' + index + ' span')
 .css('color', 'green')
 .css('margin-left', '1em');
 });
 }

// Load jQuery
  google.load("jquery", "1");

// on page load complete, fire off a jQuery json-p query
 // against Google web search
 google.setOnLoadCallback(function() {
 $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?", function (data) {
	 $('#google-search-result').html('');
 if (data.responseData.results &&
 data.responseData.results.length>0) {
 renderResults(data.responseData.results);
 }
 });
 });
--></script>
<div id="google-search-result">ちょっとまってね<img src="http://mattn.kaoriya.net/images/ajax-loader.gif"/></div>

Excerpt:

GoogleからjQueryやdojoがロード出来るAjaxライブラリが公開されました。The AJAX Libraries API is a content distribution network and loading architecture for the most popularopen source JavaScript libraries. By using the Google AJAX API Loader'sgoogle.load() method, your application has high speed,globaly available access to a growing list of the most popular JavaScript open source libraries including:jQueryprototypescript.aculo.usMooToolsdojohttp://code.google.com/apis/ajaxlibs/でも、リンク先に載ってるコード、良く見たら動かないよ＞＜正しくは<script src="http://www.google.com/jsapi"></script><script>  var renderResults = function(results) {      $.each(results, function(index, item) {        $('#result')          .append('<div id="result' + index + '"></div>');        $('#result' + index)          .append('<a href="' + item.url + '">' + item.title + '</a>')          .append('<div>' + item.content + '</div>')          .append('' + item.visibleUrl + '')          .css('padding', '0.5em');        $('#result' + index + ' div')          .css('border', '1px dotted gray')          .css('width', '500px')          .css('padding', '1em')          .append('');        $('#result' + index + ' span')          .css('color', 'green')          .css('margin-left', '1em');      });  }  // Load jQuery  google.load("jquery", "1");  // on page load complete, fire off a jQuery json-p query  // against Google web search  google.setOnLoadCallback(function() {    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",      // on search completion, process the results      function (data) {        if (data.responseData.results &&            data.responseData.results.length>0) {          renderResults(data.responseData.results);        }      });    });</script><div id="result"></div>こんな感じになります。あと、visualization等の場合はgoogle.loadの第3引数が有効で"callback"の記述が出来たのですが、jQueryやdojo等サードパーティな物では動かなかった。残念。ちなにみ上のコードを動かすと、こんな感じになります。'); $('#result' + index) .append('' + item.title + '') .append('' + item.content + '') .append('' + item.visibleUrl + '') .css('padding', '0.5em'); $('#result' + index + ' div') .css('border', '1px dotted gray') .css('width', '500px') .css('padding', '1em') .append(''); $('#result' + index + ' span') .css('color', 'green') .css('margin-left', '1em'); }); } // Load jQuery google.load("jquery", "1"); // on page load complete, fire off a jQuery json-p query // against Google web search google.setOnLoadCallback(function() { $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?", function (data) {	 $('#google-search-result').html(''); if (data.responseData.results && data.responseData.results.length>0) { renderResults(data.responseData.results); } }); });-->ちょっとまってね

Ping URLs:

File:

Password:

A quick preview will be rendered here when you click "Preview" button.