如何使用Google短网址的API来创建我们自己简单的短网址服务
fmms
12年前
由于现在使用推ter服务的越来越多，短网址服务也越来越受欢迎。 因此越来越多的第三方的短网址服务开始大批量创建。
如果你有兴趣，那么请跟随本文，这里将教大家如何使用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"> <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样式，使它更好看些。代码如下:
<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控制它的隐藏显示。
完成"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完成的数据显示在文本框中。
- 1. 当提交的数据（$_REQUEST ['URL']）不存在，则它会响应一个错误消息（“请输入网址”）。
- 2. 从$_REQUEST中得到URL。
- 3. 创建一个JSON数据，包含URL和谷歌API密钥。这个JSON数据将被发送到Google作为请求参数。
- 4. 使用PHP的cURL连接谷歌API服务器。
- 5. 从谷歌获取数据，并解码JSON对象。
- 6. 关闭cURL连接。
- 7. 如果返回数据有错误，就返回错误信息，否则显示短URL。
接下来，我们继续完成“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密钥”。
大功告成。现在你可以去体验以下自己的短网址服务了。
4. 演示
从这里你可以 现场演示 .
5. 下载
你也可以从GitHub帐户，下载此 脚本。
6. 结束
感谢您看完这篇文章，希望它能对你有所帮助。
原文地址：http://www.startutorial.com/articles/view/how-to-create-your-own-url-shortening-service