如何使用Google短网址的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来创建我们自己简单的短网址服务_第1张图片

接下来,让我们添加一些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来创建我们自己简单的短网址服务_第2张图片

完成"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         

你可能感兴趣的:(api,谷歌,短网址)