`
gegewu0825
  • 浏览: 47545 次
社区版块
存档分类
最新评论

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

谷歌 API 短网址 
阅读更多

 

由于现在使用Twitter服务的越来越多，短网址服务也越来越受欢迎。 因此越来越多的第三方的短网址服务开始大批量创建。  
如果你有兴趣，那么请跟随本文，这里将教大家如何使用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页面：

01 <html>
02 <head>
03 </head>
04 <body>
05 <div id="container">
06  
07     <h1>Google URL Shortener</h1>
08     <div id="generator">
09         <form id="form" action="#" method="post">
10  
11             <fieldset>
12                 <input type="text" name="url" id="short">
13                 <input type="submit" value="Shorten"></input>
14  
15                 <div class="loading"></div>
16             </fieldset>
17         </form>
18     </div>
19 </div>
20 </body>
21  
22 </html>

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

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

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

01 <html>
02 <head>
03 <style>
04  
05 body{   
06     width:100%; 
07     margin:0px; 
08     padding:0px;
09 }
10 #container{
11     font-family: Arial, serif; 
12     font-size:12px;   
13     padding-top:20px; 
14     width:700px;  
15     margin: auto; 
16 }
17 form{ 
18     width:100%;  
19     padding: 0px;
20     margin: 0px;
21 }
22 form fieldset{ 
23     padding:20px;
24 }
25 form input{
26     padding:5px;  
27     font-size:14px;
28 }
29 form input[type=text]{ 
30     float:left; 
31     width:80%;  
32     border: 1px solid #CCCCCC;
33 }
34 form input[type=submit]{ 
35     width:10%;  
36     margin-left:5px; 
37     float:left;
38     border: 1px solid #CCCCCC;  
39     background: #DDDDDD; 
40     cursor: pointer;
41 }
42 div.loading{  
43     display:none;
44     margin:5px; 
45     float:left; 
46     width:16px;  
47     height:16px;  
48     background-image: url("load.gif"); 
49     background-repeat: no-repeat;
50     background-position: top left; 
51     background-color: transparent;
52 }
53 </style>
54 </head>
55 <body>
56 <div id="container">   
57     <h1>Google URL Shortener</h1>
58     <div id="generator">     
59         <form id="form" action="#" method="post">   
60             <fieldset>             
61                 <input type="text" name="url" id="short">      
62                 <input type="submit" value="Shorten"></input>       
63                 <div class="loading"></div>       
64             </fieldset> 
65         </form> 
66     </div>
67  
68 </div>
69 </body>
70 </html>

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

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

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

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

01 <html>
02 <head>
03 <style>
04 body{   
05     width:100%; 
06     margin:0px; 
07     padding:0px;
08 }
09 #container{
10     font-family: Arial, serif; 
11     font-size:12px;   
12     padding-top:20px; 
13     width:700px;  
14     margin: auto; 
15 }
16 form{ 
17     width:100%;  
18     padding: 0px;
19     margin: 0px;
20 }
21 form fieldset{ 
22     padding:20px;
23 }
24 form input{
25     padding:5px;  
26     font-size:14px;
27 }
28 form input[type=text]{ 
29     float:left; 
30     width:80%;  
31     border: 1px solid #CCCCCC;
32 }
33 form input[type=submit]{ 
34     width:10%;  
35     margin-left:5px; 
36     float:left;
37     border: 1px solid #CCCCCC;  
38     background: #DDDDDD; 
39     cursor: pointer;
40 }
41 div.loading{  
42     display:none;
43     margin:5px; 
44     float:left; 
45     width:16px;  
46     height:16px;  
47     background-image: url("load.gif"); 
48     background-repeat: no-repeat;
49     background-position: top left; 
50     background-color: transparent;
51 }
52  
53 </style>
54 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
55 <script>    
56     $(document).ready(function(){      
57         $('#form').submit(function(){     
58             $.ajax({            
59                 type: "POST",   
60                 url: "gen.php",  
61                 data: $(this).serialize(), 
62                 beforeSend: function(){    
63                     $('.loading').show(1);     
64                 },         
65                 complete: function(){ 
66                     $('.loading').hide(1); 
67                 },      
68                 success: function(data){    
69                     $('#short').val(data);   
70                 }         
71             });     
72             return false; 
73         });  
74     });
75 </script>
76 </head>
77  
78 <body>
79 <div id="container">   
80     <h1>Google URL Shortener</h1>
81     <div id="generator">     
82         <form id="form" action="#" method="post">   
83             <fieldset>             
84                 <input type="text" name="url" id="short">      
85                 <input type="submit" value="Shorten"></input>       
86                 <div class="loading"></div>       
87             </fieldset> 
88         </form> 
89     </div>
90  
91 </div>
92 </body>
93 </html>

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

01 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- setp 1 -->
02  
03 <script>
04     $(document).ready(function(){   
05         $('#form').submit(function(){           //step 2     
06             $.ajax({                            //step 3          
07                 type: "POST",        
08                 url: "gen.php",         
09                 data: $(this).serialize(),        
10                 beforeSend: function(){         //step 4             
11                     $('.loading').show(1);           
12                 },             
13                 complete: function(){           //step 5     
14                     $('.loading').hide(1);           
15                 },           
16                 success: function(data){        //step 6             
17                     $('#short').val(data);             
18                 }           
19             });       
20             return false;    
21         });   
22     });
23 </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
03 if(isset($_REQUEST['url'])&&!empty($_REQUEST['url'])){          
04     //2   
05     $longUrl = $_REQUEST['url'];  
06     $apiKey  = 'Your-Api-Key';     
07     //3  
08     $postData = array('longUrl' => $longUrl, 'key' => $apiKey); 
09     $jsonData = json_encode($postData);     
10     //4    
11     $curlObj = curl_init();   
12     curl_setopt($curlObj, CURLOPT_URL,'https://www.googleapis.com/urlshortener/v1/url'); 
13     curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);  
14     curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);  
15     curl_setopt($curlObj, CURLOPT_HEADER, 0);   
16     curl_setopt($curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json')); 
17     curl_setopt($curlObj, CURLOPT_POST, 1); 
18     curl_setopt($curlObj, CURLOPT_POSTFIELDS, $jsonData);    
19     //5  
20     $response = curl_exec($curlObj);  
21     $json = json_decode($response);    
22     //6   
23     curl_close($curlObj);  
24     //7  
25     if(isset($json->error)){    
26         echo $json->error->message;    
27     }else{      
28         echo $json->id;   
29     }    
30 }else{ 
31     echo 'Please enter a URL';
32 }
33 ?>

在我解释这段代码之前，请先在第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。

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

分享到：
| php 操作mongo
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    (转载)ArcGIS Flex API配合LibertyGISI加载SHP文件.doc

    在本文中，我们将探讨如何使用开源的Flex GIS框架LibertyGIS与ArcGIS Flex API一起在浏览器端加载SHP数据。 LibertyGIS是一个专门用于展示ShapeFiles的开源Flex框架，它的官方网站位于...

    转载：ActivityGroup 实现TabHost

    但是，从Android 3.0（API级别11）开始，这个类已经被废弃，推荐使用Fragment和FragmentTransaction来替代。 **ActivityGroup的工作原理：** 1. **内部Activity：** 在ActivityGroup中，你可以定义多个内部...

    【RPA之家转载视频教程1】Facebook Messenger聊天机器人使用Dialogflow-UiPath Hyper Hack .rar

    Dialogflow是Google开发的一款自然语言处理（NLP）平台，用于构建聊天机器人和语音助手。通过识别用户输入的文本或语音，它能理解语境并提供相应的响应。在聊天机器人的开发中，Dialogflow扮演了关键角色，帮助我们...

    2008十大优秀Java应用程序（转载）

    【标题】: "2008十大优秀Java应用程序（转载）" 这些优秀的Java应用程序展示了Java在不同领域的广泛应用和强大性能。以下是对各个程序的详细解释： 10. **无线传感器开发环境Sun SPOT** - Sun SPOT是一个创新的...

    [转载]Selenium2.0之WebDriver学习总结(1).docx

    以下是一个简单的Java示例，展示了如何使用FirefoxDriver打开Google网站并输入搜索查询： ```java package demo; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa....

    快速将电脑中的文件在互联网上共享

    【描述】：“AspC#用友华表V51制作的web自定义报表系统(转载）”揭示了在这一过程中可能使用到的一种特定工具。Asp.NET是微软开发的一个用于构建Web应用程序的框架，而C#是一种广泛使用的面向对象的编程语言。用友...

    （转载）安卓点击和滑动切换页面FragmentActivity

    在Android应用开发中，Fragment是Android 3.0（API级别11）引入的一个关键组件，用于构建可重用的UI模块。Fragment可以独立于Activity存在，并且可以在多个Activity之间移动，这使得开发者能更灵活地设计用户界面，...

    安卓MP3播放器修改

    在本项目中，开发者可能使用了Android SDK，包含了必要的API和工具，用于构建和运行Android应用。 2. **MP3解码与音频播放**：MP3是一种广泛使用的音频格式，其解码和播放需要特定的库。在Android中，可以使用...

    wordpress 代码分析整理

    在WordPress中，可以通过安装统计插件如Google Analytics或Jetpack来追踪用户行为，进行数据驱动的决策。理解如何集成和解读这些数据，有助于优化用户体验和提高网站性能。 6. **WordPress的流程和结构图** 结合`...

    SEO搜索引擎优化学习资料

    - 对于竞争激烈的关键词，可以考虑使用付费广告来提高排名。 **3.2 关键词密度** - **3.2.1 什么是关键词密度** - 关键词密度是指关键词在网页内容中出现的次数与总单词数的比例。 - **3.2.2 适当的关键词密度**...

    最好的asp CMS系统科讯CMSV7.0全功能SQL商业版，KesionCMS V7.0最新商业全能版-免费下载

    我们认为“简单就是美”，因此一直以来，科汛开发人员在开发过程中无处不充分考虑用户的使用习惯，尽最大可能降低用户的使用门槛，让用户关注于内容维护本身， 而不需要投入过多的时间来学习系统的使用技巧，在细节...

    springmybatis

    查询出列表，也就是返回list, 在我们这个例子中也就是 List&lt;User&gt; , 这种方式返回数据，需要在User.xml 里面配置返回的类型 resultMap, 注意不是 resultType, 而这个resultMap 所对应的应该是我们自己配置的 ...

Magicbox
Global site tag (gtag.js) - Google Analytics