Extracting URL Data with Jquery and Ajax
About the Functionality
For Extracying the URL Data we need the HTML file (for to send the request and get the response from the php file) and The PHP file(to get the request and process that and send back to the HTML page ) that request and response will be done using the Jquery Ajax Request , PHP file_get _Contents() function in PHP side.
At First the URL will be pasted in the text box that URL will be send to the PHP file as a Request using Jquery Ajax Functionality and the PHP file get the Whole SIte details from that link and it will give the response to the jquery request that function will get the title, image, description name of the website everything from the response and then it will show in the div #linkbox in Ajax
Basically Why we are using the PHP for getting the file request means that is a server side script but javascript or jquery is not a server side script that need to be get the whole site details thats why the reason we are using the PHP file here.
Javascript and HTML Code
$('#content').keyup(function(){} - content is the ID of the textbox. Using $(this).val() getting the textbox value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var content=$(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
// Filtering URL from the content using regular expressions
var url= content.match(urlRegex);
if(url.length>0)
{
$("#linkbox").slideDown('show');
$("#linkbox").html("<img src='link_loader.gif'>");
// Getting cross domain data
$.get("urlget.php?url="+url,function(response)
{
// Loading <title></title>data
var title=(/<title>(.*?)<\/title>/m).exec(response)[1];
// Loading first .png image src='' data
var logo=(/src='(.*?).png'/m).exec(response)[1];
$("#linkbox").html("<img src='"+logo+".png' class='img'/><div><b>"+title+"</b><br/>"+url)
});
}
return false;
});
});
HTML code
<textarea id="contentbox"></textarea> <div id="linkbox"></div> </script>
Why used urlget.php
Ajax origin policy we could not access the cross domain data with ajax request $.get("http://www.yahoo.com",function(response){ });. So that using local file(urlget.php) accessing the cross domain data.
urlget.php
Contains PHP code using file_get_contents function loading the URL data. Eg:urlget.php?url=http://yahoo.com<?php
if($_GET['url'])
{
$url=$_GET['url'];
echo file_get_contents($url);
}
?>
CSS
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #dedede;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
}
.img
{
float:left; width:150px; margin-right:10px;
text-align:center;
}
#linkbox
{
border:solid 2px #dedede; min-height:50px; padding:15px;
display:none;
}
0 comments