jQuery + AJAX +（Google Search API || Yahoo Search API）

タイトルが示すように、この投稿はjQuery JavaScriptライブラリーを介してGoogle Search APIおよびYahoo Search APIと連携することに専念します。

Yahoo Search AJAX API

まず、 Yahoo Search APIを使用します 。 そして、これには2つの理由があります：

1. GoogleサービスはYahooよりもバグが多い（まだグリーン）
2. Yahooは属性ref = "nofollow"に注意を払っていないため、発行がより完全になっています。

では、始めましょう。まず、Yahooアカウントを登録し、「 アプリケーションID 」を取得する必要があります。



しばらくの間の「お気に入り」のブックマークはhttp://developer.yahoo.com/search/になります 。



次に、興味のある検索を自分で決定します（Yahoo APIのドキュメントの関連セクションへのすべてのリンク）。

• オーディオ検索
  
  
  • アルバム検索
    
    アーティスト検索
    
    ダウンロード場所
    
    曲検索
    
    
    
    
    
    自動車カスタム
    
    コンテンツ分析
    
    画像検索
    
    ローカル検索
    
    
    • ローカル検索V3
    
    
    
    
    Myweb 2.0
    
    
    • 関連タグ
      
      タグ検索
      
      URL検索
      
      
      
      
      
      ニュース検索
      
      サイトエクスプローラー
      
      
      • Pages
        
        インリンク
        
        更新通知
        
        
        
        
        
        ビデオ検索
        
        ウェブ検索
        
        
        • ウェブ検索
          
          コンテキスト検索
          
          関連クエリ
          
          スペル候補
          
          
        
        
        
        
        
        
        それらの多くがありますが、私たちは1つを選択します-ウェブ検索、その上で私たちは実験を続けます。
        
        
        
        

        RESTリクエストを作成します

        
        
        
        
        上記のリンクを使用して、URLのベースを取得します。Web検索の場合は次のとおりです。
        
        search.yahooapis.com/WebSearchService/V1/webSearch
        
        
        
        API ID appid = YahooDemoおよびquery = PHPリクエスト自体を追加します（リクエストを追加する前に、 encodeURIComponent関数を使用して準備する必要があります）
        
        
        
        その結果、次のURLが取得されます。
        
        
        
        

        http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=PHP

        
        
        
        
        これは最低限必要ですが、XMLはJavaScriptにとって最も消化しやすい形式ではありません。JSONを好み、さらにJSONPを好むでしょう。 これを行うには、 outputパラメーターを使用して出力形式を指定する必要があります。 JSONPチャームを使用するには、コールバック関数の名前も指定する必要があり、URLは次のようになります。
        
        
        
        

        http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&callback=foo&query=PHP

        
        
        
        
        

        Javascript

        
        
        
        
        ここでjQueryを取得し、次の構成を取得します。
        
        

         $ .getJSON（ "http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&query=PHP&callback=？"、
        関数（データ）{
             var ul = document.createElement（ "ul"）;
             $ .each（data.ResultSet.Result、function（i、val）{
                    var li = document.createElement（ "li"）;
                	 var inner = '<a href="'+val.Url+'" title="'+val.Url+'" target="_blank">' + val.Title + "</a>";
                	 if（val.Summary！= "" && val.Summary！= "undefined"）{
                		 inner + = "-" + val.Summary;
                	 }
                	 li.innerHTML = inner;        						
                	 ul.appendChild（li）;
             }）;
             $（ 'body'）。html（ul）;
         }）;
        

        
        
        
        
        この例は次のようになります。
        
        

         $ .ajax（{
                     // AJAXで指定されたURL
                    url： "http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&query=PHP&callback=？"、
                    dataType： "jsonp"、
                    //成功イベントを処理します
                   成功：関数（データ）{
                        //前の例と等しい
                        // ...
                    }
         }）;
        

        
        
        
        
        注 ：リクエストをわずかに変更しました-...で終わります＆コールバック=？ -リクエスト内のコールバック関数の正しい名前をjQueryに置き換える必要があります。 この例のコールバック関数は、LI要素が検索結果と一致するULリストを作成します。 （各タイプの検索には固有のフィールドがあります。詳細については上記のリンクを参照してください）。
        
        
        
        ご覧のとおり、すべてが非常にシンプルです-検索結果の結論は、完全にあなたの想像力にかかっています...
        
        
        
        

        Google Search AJAX API

        
        
        
        
        既にGoogle Search AJAX APIを使用している場合は、特定のニーズに合わせてカスタマイズするのに非常に問題のある素晴らしいJavaScriptライブラリがあることがわかります。したがって、Yahoo APIと同様に、JSONPを使用します。 しかし、最初に...「 AJAX Search API Key 」を取得する必要があります 。
        
        
        
        私たちの出発点はページです： http : //code.google.com/apis/ajaxsearch/documentation/reference.html
        
        
        
        

        RESTリクエストを作成します

        
        
        
        
        検索のタイプ​​と対応するベースURLを選択します。
        
        
        • ウェブ検索-http://ajax.googleapis.com/ajax/services/search/web
        • ローカル検索-http://ajax.googleapis.com/ajax/services/search/local
        • ビデオ検索-http://ajax.googleapis.com/ajax/services/search/video
        • ブログ検索-http://ajax.googleapis.com/ajax/services/search/blogs
        • ニュース検索-http://ajax.googleapis.com/ajax/services/search/news
        • ブック検索-http://ajax.googleapis.com/ajax/services/search/books
        • 画像検索-http://ajax.googleapis.com/ajax/services/search/images
        
        
        
        
        3つのパラメーターを指定する必要があります-これはAPIバージョンです-v = 1.0 、APIキーキー= your-key、およびq = PHPリクエスト自体（キーは必須パラメーターではありませんが、強くお勧めします）：
        
        
        
        

        http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=PHP

        
        
        
        
        注 ：各タイプの検索には固有のパラメーターがあり、それらはすべてドキュメントに記載されています 。
        
        
        
        

        Javascript

        
        
        
        
        今、私たちの最愛のJSONPに戻る-Googleは私たちに不利益をもたらしました-JSONPを整理するために、 コールバックとコンテキストの 2つのパラメーターを提供し、それらは相互に必要であり、コンテキストパラメーターは常に最初のパラメーターとしてコールバック関数で返されますAPIへの同時呼び出しを区別できるように）。 ただし、1つ問題があります。これはjQueryでは機​​能しません。 jQueryでは、最初のパラメーターとしてデータが必要です。このため、このトリックに進み、中間コールバック関数を作成する必要がありました。
        
        
        
        

         //コールバック関数
        関数GoogleCallback（関数、データ）{
             window [func]（データ）;
         }
        

        
        
        
        
        これで「質問」する準備ができました。
        
        

         //キーを変更します!!!
         $ .getJSON（ "http://ajax.googleapis.com/ajax/services/search/web?v=1.0?key=your-key&q=PHP&callback=GoogleCallback&context=？"、
        関数（データ）{
             var ul = document.createElement（ "ul"）;
             $ .each（data.results、function（i、val）{
                	 var li = document.createElement（ "li"）;
                	 li.innerHTML = '<a href="'+val.url+'" title="'+val.url+'" target="_blank">' + val.title + "</a>-" + val.content;  						
                	 ul.appendChild（li）;
             }）;
             $（ 'body'）。html（ul）;
         }）;
        

        
        
        
        
        注 ：各タイプの結果には独自のプロパティがあります;詳細については、 ドキュメントを参照してください。
        
        
        
        ご覧のとおり、今ではGoogle JavaScriptライブラリの「機能」に制限されておらず、実際に達成した裁量でデータを自由に管理できます...
        
        
        
        PS：同様のアプローチを使用して、データの表示に関する制限を削除し、最も重要なこととして、サーバーからクライアントに負荷を転送します（ analyser.hohli.comでの検索の構成方法です ）。
        
        
        
        クロスポスト： http ://anton.shevchuk.name/