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

最新推荐文章于 2024-10-22 01:07:21 发布

原创最新推荐文章于 2024-10-22 01:07:21 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#谷歌 API 短网址

API开发专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用Google短网址API创建个人短网址服务。通过PHP和jQuery实现前端交互及后台短链接生成，包括代码实现与步骤说明。

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

以下是本文的目录

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

内容

1. 准备

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

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

2. 创建 index.php

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

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

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

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

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

 
<html> 
 
<head> 
 
<style> 
 
    04 
 
    05body{   
 
    width:100%;  
 
    margin:0px;  
 
    padding:0px; 
 
    09}
 
    10#container{
 
    font-family: Arial, serif;  
 
    font-size:12px;    
 
    padding-top:20px;  
 
    width:700px;   
 
    margin: auto;  
 
    16}
 
    17form{ 
 
    width:100%;   
 
    padding: 0px; 
 
    margin: 0px; 
 
    21}
 
    22form fieldset{ 
 
    padding:20px; 
 
    24}
 
    25form input{
 
    padding:5px;   
 
    font-size:14px; 
 
    28}
 
    29form input[type=text]{ 
 
    float:left;  
 
    width:80%;   
 
    border: 1px solid #CCCCCC; 
 
    33}
 
    34form input[type=submit]{ 
 
    width:10%;   
 
    margin-left:5px;  
 
    float:left; 
 
    border: 1px solid #CCCCCC;   
 
    background: #DDDDDD;  
 
    cursor: pointer; 
 
    41}
 
    42div.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; 
 
    52}
 
</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> 
 
    67 
 
</div> 
 
</body> 
 
</html>

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

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

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

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

 
<html> 
 
<head> 
 
<style> 
 
    04body{   
 
    width:100%;  
 
    margin:0px;  
 
    padding:0px; 
 
    08}
 
    09#container{
 
    font-family: Arial, serif;  
 
    font-size:12px;    
 
    padding-top:20px;  
 
    width:700px;   
 
    margin: auto;  
 
    15}
 
    16form{ 
 
    width:100%;   
 
    padding: 0px; 
 
    margin: 0px; 
 
    20}
 
    21form fieldset{ 
 
    padding:20px; 
 
    23}
 
    24form input{
 
    padding:5px;   
 
    font-size:14px; 
 
    27}
 
    28form input[type=text]{ 
 
    float:left;  
 
    width:80%;   
 
    border: 1px solid #CCCCCC; 
 
    32}
 
    33form input[type=submit]{ 
 
    width:10%;   
 
    margin-left:5px;  
 
    float:left; 
 
    border: 1px solid #CCCCCC;   
 
    background: #DDDDDD;  
 
    cursor: pointer; 
 
    40}
 
    41div.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; 
 
    51}
 
    52 
 
</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> 
 
    77 
 
<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> 
 
    90 
 
</div> 
 
</body> 
 
</html>

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

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- setp 1 --> 
 
    02 
 
<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完成的数据显示在文本框中。

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

3. 创建 gen.php

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

 
    01<?php
 
    02//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'; 
 
    32}
 
    33?>