由于现在使用Twitter服务的越来越多，短网址服务也越来越受欢迎。 因此越来越多的第三方的短网址服务开始大批量创建。
如果你有兴趣，那么请跟随本文，这里将教大家如何使用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完成的数据显示在文本框中。
接下来，我们继续完成“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密钥”。
- 1. 当提交的数据（$_REQUEST ['URL']）不存在，则它会响应一个错误消息（“请输入网址”）。
- 2. 从$_REQUEST中得到URL。
- 3. 创建一个JSON数据，包含URL和谷歌API密钥。这个JSON数据将被发送到Google作为请求参数。
- 4. 使用PHP的cURL连接谷歌API服务器。
- 5. 从谷歌获取数据，并解码JSON对象。
- 6. 关闭cURL连接。
- 7. 如果返回数据有错误，就返回错误信息，否则显示短URL。
大功告成。现在你可以去体验以下自己的短网址服务了。
4. 演示
从这里你可以 现场演示 .
5. 下载
你也可以从GitHub帐户，下载此 脚本。
6. 结束
感谢您看完这篇文章，希望它能对你有所帮助。
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
