您的位置：首页 > 其它

如何创建自己的短网址服务

2012-03-20 19:57 417 查看

46人收藏此文章, 我要收藏
发表于7天前 , 已有3220次阅读共12个评论

由于现在使用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页面：

view source

print ?

html

head

</

head

body

05	< div id = "container" >

06	< h1 >Google URL Shortener</ h1 >

07	< div id = "generator" >

08	< form id = "form" action = "#" method = "post" >

09	< fieldset >

10	< input type = "text" name = "url" id = "short" >

11	< input type = "submit" value = "Shorten" ></ input >

12	< div class = "loading" ></ div >

13	</ fieldset >

</

form

</

div

</

div

</

body

</

html

这里将创建一个简单的文本框和提交按钮。

效果如下：

接下来，让我们添加一些CSS样式，使它更好看些。代码如下:

view source

print ?

html

head

style

body{

05	width:100%;

06	margin:0px;

07	padding:0px;

09	#container{

10	font-family: Arial, serif;

11	font-size:12px;

12	padding-top:20px;

13	width:700px;

14	margin: auto;

form{

17	width:100%;

18	padding: 0px;

19	margin: 0px;

21	form fieldset{

22	padding:20px;

24	form input{

25	padding:5px;

26	font-size:14px;

28	form input[type=text]{

29	float:left;

30	width:80%;

31	border: 1px solid #CCCCCC;

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;

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;

52	</ style >

</

head

body

55	< div id = "container" >

56	< h1 >Google URL Shortener</ h1 >

57	< div id = "generator" >

58	< form id = "form" action = "#" method = "post" >

59	< fieldset >

60	< input type = "text" name = "url" id = "short" >

61	< input type = "submit" value = "Shorten" ></ input >

62	< div class = "loading" ></ div >

63	</ fieldset >

</

form

</

div

</

div

</

body

</

html

我们这里就不对CSS样式进行说明了。

请注意，我们还要创建了一个"class='loading'"的"DIV" 层，这用于Ajax的加载；默认情况它是不显示的，我们使用jQuery控制它的隐藏显示。

完成"index.php"的最后一步，也是最重要的一步，我们将导入jQuery库来完成Ajax操作。

复制并粘贴以下的JavaScript代码到CSS样式下面。我们稍后将作解释。

view source

print ?

html

head

style

body{

05	width:100%;

06	margin:0px;

07	padding:0px;

09	#container{

10	font-family: Arial, serif;

11	font-size:12px;

12	padding-top:20px;

13	width:700px;

14	margin: auto;

form{

17	width:100%;

18	padding: 0px;

19	margin: 0px;

21	form fieldset{

22	padding:20px;

24	form input{

25	padding:5px;

26	font-size:14px;

28	form input[type=text]{

29	float:left;

30	width:80%;

31	border: 1px solid #CCCCCC;

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;

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;

52	</ style >

53	< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></ script >

54	< script >

55	$(document).ready(function(){

56	$('#form').submit(function(){

$.ajax({

58	type: "POST",

59	url: "gen.php",

60	data: $(this).serialize(),

61	beforeSend: function(){

62	$('.loading').show(1);

},

64	complete: function(){

65	$('.loading').hide(1);

},

67	success: function(data){

68	$('#short').val(data);

});

71	return false;

});

});

74	</ script >

</

head

body

77	< div id = "container" >

78	< h1 >Google URL Shortener</ h1 >

79	< div id = "generator" >

80	< form id = "form" action = "#" method = "post" >

81	< fieldset >

82	< input type = "text" name = "url" id = "short" >

83	< input type = "submit" value = "Shorten" ></ input >

84	< div class = "loading" ></ div >

85	</ fieldset >

</

form

</

div

</

div

</

body

</

html

让我们来仔细看看，上面添加在那些的JavaScript代码：

view source

print ?

01	< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></ script > <!-- setp 1 -->

02	< script >

03	$(document).ready(function(){

04	$('#form').submit(function(){ //step 2

05	$.ajax({//step 3

06	type: "POST",

07	url: "gen.php",

08	data: $(this).serialize(),

09	beforeSend: function(){ //step 4

10	$('.loading').show(1);

},

12	complete: function(){ //step 5

13	$('.loading').hide(1);

},

15	success: function(data){//step 6

16	$('#short').val(data);

});

19	return false;

});

});

22	</ script >

第1步：使用谷歌提供的jQuery库。
第2步：一个提交的事件处理程序。
第3步：使用“POST”方法的数据序列化形式，提交表单数据到“gen.php”。
第4步：发送数据时，显示加载的DIV层。
第5步：AJAX操作完成时，隐藏加载的DIV层。
第6步：将AJAX完成的数据显示在文本框中。

接下来，我们继续完成“gen.php”，它涉及Google的短网址API。

3. 创建 gen.php

复制并粘贴以下代码，完成“gen.php”。

view source

print ?

<?php

//1

03	if (isset( $_REQUEST [ 'url' ])&&! empty ( $_REQUEST [ 'url' ])){

//2

05	$longUrl = $_REQUEST [ 'url' ];

06	$apiKey = 'Your-Api-Key' ;

//3

08	$postData = array ( 'longUrl' => $longUrl , 'key' => $apiKey );

09	$jsonData =json_encode( $postData );

//4

11	$curlObj =curl_init();

12	curl_setopt( $curlObj , CURLOPT_URL, 'https://www.googleapis.com/urlshortener/v1/url' );

13	curl_setopt( $curlObj , CURLOPT_RETURNTRANSFER, 1);

14	curl_setopt( $curlObj , CURLOPT_SSL_VERIFYPEER, 0);

15	curl_setopt( $curlObj , CURLOPT_HEADER, 0);

16	curl_setopt( $curlObj , CURLOPT_HTTPHEADER, array ( 'Content-type:application/json' ));

17	curl_setopt( $curlObj , CURLOPT_POST, 1);

18	curl_setopt( $curlObj , CURLOPT_POSTFIELDS, $jsonData );

//5

20	$response =curl_exec( $curlObj );

21	$json =json_decode( $response );

//6

23	curl_close( $curlObj );

//7

25	if (isset( $json ->error)){

26	echo $json ->error->message;

else

28	echo $json ->id;

else

31	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. 结束

感谢您看完这篇文章，希望它能对你有所帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航