如何使用Google短网址的API来创建我们自己简单的短网址服务

fmms 7年前

由于现在使用推ter服务的越来越多,短网址服务也越来越受欢迎。 因此越来越多的第三方的短网址服务开始大批量创建。  
如果你有兴趣,那么请跟随本文,这里将教大家如何使用Google短网址的API来创建我们自己简单的短网址服务。 Let's go!

以下是本文的目录

  1. 1. 准备
  2. 2. 创建 index.php
  3. 3. 创建gen.php
  4. 4. 演示
  5. 5. 下载
  6. 6. 结束

 

内容

1. 准备

创建两个PHP文件,并命名为 "index.php" 和"gen.php"。

  1. 1 index.php: 首页。
  2. 2 gen.php: 服务端调用Google短网址服务API。 我们不能使用JavaScript直接(跨域)从谷歌获得数据。
  3. 3 从http://code.google.com/apis/urlshortener/v1/getting_started.html#APIKey , 获得谷歌的API密钥,此密钥将用于从谷歌查询数据,这个是关键点。
  4. 4 复制和粘贴图片"load.gif" 到"index.php"同目录下。 此图片将用于AJAX的等待加载提示。

 

2. 创建 index.php

先创建一个简单的HTML原型的index.php页面:

<html>   <head>   </head>   <body>   <div id="container">     <h1>Google URL Shortener</h1>   <div id="generator">    <form id="form" action="#" method="post">       <fieldset>      <input type="text" name="url" id="short">      <input type="submit" value="Shorten"></input>        <div class="loading"></div>     </fieldset>    </form>   </div>  </div>  </body>    </html>

这里将创建一个简单的文本框和提交按钮。
效果如下:

如何使用Google短网址的API来创建我们自己简单的短网址服务

接下来,让我们添加一些CSS样式,使它更好看些。代码如下:

<html>   <head>  <style>     body{       width:100%;     margin:0px;     padding:0px;   }   #container{   font-family: Arial, serif;     font-size:12px;       padding-top:20px;     width:700px;      margin: auto;    }   form{     width:100%;      padding: 0px;    margin: 0px;  }  form fieldset{     padding:20px;   }   form input{    padding:5px;      font-size:14px;   }   form input[type=text]{     float:left;     width:80%;      border: 1px solid #CCCCCC;   }  form input[type=submit]{     width:10%;      margin-left:5px;     float:left;    border: 1px solid #CCCCCC;      background: #DDDDDD;     cursor: pointer;   }   div.loading{      display:none;    margin:5px;     float:left;     width:16px;      height:16px;      background-image: url("load.gif");     background-repeat: no-repeat;    background-position: top left;     background-color: transparent;  }  </style>  </head>   <body>   <div id="container">       <h1>Google URL Shortener</h1>    <div id="generator">          <form id="form" action="#" method="post">         <fieldset>                    <input type="text" name="url" id="short">             <input type="submit" value="Shorten"></input>              <div class="loading"></div>             </fieldset>      </form>     </div>     </div>  </body>  </html>  

我们这里就不对CSS样式进行说明了。

请注意,我们还要创建了一个"class='loading'"的"DIV" 层,这用于Ajax的加载;默认情况它是不显示的,我们使用jQuery控制它的隐藏显示。

如何使用Google短网址的API来创建我们自己简单的短网址服务

完成"index.php"的最后一步,也是最重要的一步,我们将导入jQuery库来完成Ajax操作。
复制并粘贴以下的JavaScript代码到CSS样式下面。我们稍后将作解释。

<html>   <head>  <style>   body{       width:100%;     margin:0px;     padding:0px;   }   #container{   font-family: Arial, serif;     font-size:12px;       padding-top:20px;     width:700px;      margin: auto;    }   form{     width:100%;      padding: 0px;    margin: 0px;  }  form fieldset{     padding:20px;   }   form input{    padding:5px;      font-size:14px;   }   form input[type=text]{     float:left;     width:80%;      border: 1px solid #CCCCCC;   }  form input[type=submit]{     width:10%;      margin-left:5px;     float:left;    border: 1px solid #CCCCCC;      background: #DDDDDD;     cursor: pointer;   }   div.loading{      display:none;    margin:5px;     float:left;     width:16px;      height:16px;      background-image: url("load.gif");     background-repeat: no-repeat;    background-position: top left;     background-color: transparent;  }    </style>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>   <script>        $(document).ready(function(){           $('#form').submit(function(){           $.ajax({                   type: "POST",          url: "gen.php",         data: $(this).serialize(),        beforeSend: function(){            $('.loading').show(1);            },                complete: function(){         $('.loading').hide(1);        },             success: function(data){            $('#short').val(data);          }               });           return false;      });      });  </script>  </head>     <body>   <div id="container">       <h1>Google URL Shortener</h1>    <div id="generator">          <form id="form" action="#" method="post">         <fieldset>                    <input type="text" name="url" id="short">             <input type="submit" value="Shorten"></input>              <div class="loading"></div>             </fieldset>      </form>     </div>     </div>  </body>  </html>  

让我们来仔细看看,上面添加在那些的JavaScript代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- setp 1 -->     <script>    $(document).ready(function(){        $('#form').submit(function(){      //step 2           $.ajax({                            //step 3                 type: "POST",               url: "gen.php",                data: $(this).serialize(),               beforeSend: function(){         //step 4                     $('.loading').show(1);                  },                    complete: function(){     //step 5             $('.loading').hide(1);                  },                  success: function(data){        //step 6                     $('#short').val(data);                    }                 });             return false;         });       });   </script>
    • 第1步:使用谷歌提供的jQuery库。
    • 第2步:一个提交的事件处理程序。
    • 第3步:使用“POST”方法的数据序列化形式,提交表单数据到“gen.php”。
    • 第4步:发送数据时,显示加载的DIV层。
    • 第5步:AJAX操作完成时,隐藏加载的DIV层 。
    • 第6步:将AJAX完成的数据显示在文本框中。
    </ul>

    接下来,我们继续完成“gen.php”,它涉及Google的短网址API。 

    3. 创建 gen.php

    复制并粘贴以下代码,完成“gen.php”。

    <?php   //1   if(isset($_REQUEST['url'])&&!empty($_REQUEST['url'])){              //2       $longUrl = $_REQUEST['url'];      $apiKey  = 'Your-Api-Key';         //3      $postData = array('longUrl' => $longUrl, 'key' => $apiKey);     $jsonData = json_encode($postData);         //4        $curlObj = curl_init();       curl_setopt($curlObj, CURLOPT_URL, 'https://www.googleapis.com/urlshortener/v1/url');     curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);      curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);      curl_setopt($curlObj, CURLOPT_HEADER, 0);       curl_setopt($curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json'));     curl_setopt($curlObj, CURLOPT_POST, 1);     curl_setopt($curlObj, CURLOPT_POSTFIELDS, $jsonData);        //5      $response = curl_exec($curlObj);      $json = json_decode($response);        //6       curl_close($curlObj);      //7      if(isset($json->error)){         echo $json->error->message;        }else{           echo $json->id;       }       }else{     echo 'Please enter a URL';  }   ?>  

    在我解释这段代码之前,请先在第6行处提供你的“Google API密钥”。

    1. 1. 当提交的数据($_REQUEST ['URL'])不存在,则它会响应一个错误消息(“请输入网址”)。
    2. 2. 从$_REQUEST中得到URL。
    3. 3. 创建一个JSON数据,包含URL和谷歌API密钥。这个JSON数据将被发送到Google作为请求参数。
    4. 4. 使用PHP的cURL连接谷歌API服务器。
    5. 5. 从谷歌获取数据,并解码JSON对象。
    6. 6. 关闭cURL连接。
    7. 7. 如果返回数据有错误,就返回错误信息,否则显示短URL。

    大功告成。现在你可以去体验以下自己的短网址服务了。 

    4. 演示

    从这里你可以 现场演示 .

    5. 下载

    你也可以从GitHub帐户,下载此 脚本

    6. 结束

    感谢您看完这篇文章,希望它能对你有所帮助。

    原文地址:http://www.startutorial.com/articles/view/how-to-create-your-own-url-shortening-service