如何使用Google短网址的API来创建我们自己简单的短网址服务
fmms
13年前
由于现在使用推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