如何使用Google短網址的API來創建我們自己簡單的短網址服務
由于現在使用推ter服務的越來越多，短網址服務也越來越受歡迎。 因此越來越多的第三方的短網址服務開始大批量創建。
如果你有興趣，那么請跟隨本文，這里將教大家如何使用Google短網址的API來創建我們自己簡單的短網址服務。 Let's go!
以下是本文的目錄
- 1. 準備
- 2. 創建 index.php
- 3. 創建gen.php
- 4. 演示
- 5. 下載
- 6. 結束 </ol>
- 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的等待加載提示。 </ol>
- 第1步：使用谷歌提供的jQuery庫。
- 第2步：一個提交的事件處理程序。
- 第3步：使用“POST”方法的數據序列化形式，提交表單數據到“gen.php”。
- 第4步：發送數據時，顯示加載的DIV層。
- 第5步：AJAX操作完成時，隱藏加載的DIV層 。
- 第6步：將AJAX完成的數據顯示在文本框中。 </ul> </ul>
- 1. 當提交的數據（$_REQUEST ['URL']）不存在，則它會響應一個錯誤消息（“請輸入網址”）。
- 2. 從$_REQUEST中得到URL。
- 3. 創建一個JSON數據，包含URL和谷歌API密鑰。這個JSON數據將被發送到Google作為請求參數。
- 4. 使用PHP的cURL連接谷歌API服務器。
- 5. 從谷歌獲取數據，并解碼JSON對象。
- 6. 關閉cURL連接。
- 7. 如果返回數據有錯誤，就返回錯誤信息，否則顯示短URL。 </ol>
內容
1. 準備
創建兩個PHP文件，并命名為 "index.php" 和"gen.php"。
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></pre></div>
這里將創建一個簡單的文本框和提交按鈕。
效果如下：
接下來，讓我們添加一些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> </pre></div>
我們這里就不對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; }<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> </pre></div>
讓我們來仔細看看，上面添加在那些的JavaScript代碼：
<script src="; <!-- 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></pre></div>
接下來，我們繼續完成“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本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！相關經驗
