jQuery и Ajax - парсим Яндекс ТИЦ
2079
В сегодняшней статье мы рассмотрим, как не прибегая к сторонним сервисам и используя jQuery и Ajax, можно получить значение Яндекс ТИЦ! Для этого мы напишем свой собственный небольшой скрипт.
Выглядеть наше приложение будет так!
Итак, для начала создадим самую простую html-страничку, на которой будет находиться поле, для ввода URL-адреса сайта и кнопка "Узнать ТИЦ"!
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery и Ajax - парсим ТИЦ</title> </head> |
Как было сказано выше, мы будем использовать библиотеку jQuery, поэтому подключим её между тегами <head> и </head>. Также добавим слой, в котором будет отображаться результат выполнения скрипта:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery и Ajax - парсим ТИЦ</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div align="center"> <p>Введите URL-адрес: </p> <b>http://</b> <input type="text" name="url" id="url" maxlength="25"> <input type="button" id="get_tic" value="Узнать ТИЦ"> |
Итак, площадка для работы готова! Теперь перейдем к написанию функции, которая будет посылать Ajax-запрос и выводить значение ТИЦ в только что созданный слой <div> с классом class="result".
$(function(){
$('#get_tic').click(function(){
//получаем url-адрес сайта для парсинга
var url = $('#url').val();
//очищаем предыдущие записи
$(".result ul li").remove();
//Если количество символов больше 3, то начинаем парсить
if (url.length > 3){
//Добавляем строку и показываем пользователю,
|
Если Вы еще не знакомы с jQuery, то прежде чем продолжить, прочитайте вот эту и эту заметку по jQuery!
Итак, первым делом при клике на кнопку "Узнать ТИЦ", вешаем функцию, которая будет посылать ajax-запрос и выводить значение ТИЦ.
$('#get_tic').click(function(){
});
|
Дальше получаем введенный url-адрес и присваиваем его переменной url!
var url = $('#url').val();
|
Затем удаляем предыдущие записи (это делается для того, чтобы можно было обработать несколько сайтов не перезагружая страницу) и подсчитываем количество символов в введенном урл. Если количество символов меньше 4, то выводим предупреждение!
$(".result ul li").remove();
if (url.length > 3){
.
.
. }
else{
alert('Вы не ввели URL-адрес!');
}
|
Если длина url-адреса нормальная, то вставляем в слой с классом class="result" строку и выводим изображение 
, которое демонстрирует, что запрос обрабатывается!
$(".result ul").append("<li><B>URL: http://"+url+"</B>"
+"<div class='loading'><span></span>"
+"<img id='loading' src='loading.gif'></div></li>");
|
Информировать пользователя о том, что запрос обрабатывается, является важным фактором, иначе пользователь подумает, что ничего не происходит и покинет страничку!
Дальше идет сам ajax-запрос, который отсылает данные (в нашем случае введенный url-адрес) методом POST, скрипту parser.php, который получает и выводит значение Яндекс ТИЦ.
$.post(
'parser.php',
'url='+url,
function(data){
$('.loading span').html(data);
}
);
|
В случае успешного запроса отображаем полученный ТИЦ на странице!
Ну и когда ajax-запрос окончен, скрываем картинку загрузки
$("img#loading").ajaxStop(function(){
$(this).hide();
});
|
Ну и на последок выкладываю файл parser.php
<?php
function GetTCY($url) {
$url="http://bar-navig.yandex.ru/u?ver=2&show=32&url=http://".$url;
$Result=file_get_contents($url);
return $Result ? (int) substr(strstr($Result,'value="'),7):false;
}
$urls = trim($_POST['url']);
echo GetTCY($urls);
?>
|
Скачать исходники можно по этой ссылке
Удачи!
-
Комментарии (0)
- Сайт
Facebook
Подписка
Подпишитесь прямо сейчас на почтовую рассылку:
"Новичку Инфо-Бизнеса.
От Простого К Сложному"
и получайте каждую неделю на свой электронный адрес список новых статей, опубликованных на страницах этого проекта.
Рекомендую
Видеокурсы
Нашли ошибку в тексте
