Генератор форм

Баннер

Для веб-мастера

Реклама


jQuery и Ajax - парсим Яндекс ТИЦ

Рейтинг:
Дата: 8 февраля 2010 Просмотры 7779

В сегодняшней статье мы рассмотрим, как не прибегая к сторонним сервисам и используя jQuery и Ajax, можно получить значение Яндекс ТИЦ! Для этого мы напишем свой собственный небольшой скрипт.

Выглядеть наше приложение будет так!

Итак, для начала создадим  самую простую html-страничку, на которой будет находиться поле, для ввода URL-адреса сайта и кнопка "Узнать ТИЦ"!

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>jQuery и Ajax - парсим ТИЦ</title>
 </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="Узнать ТИЦ">
</div>
</body>
</html>

Как было сказано выше, мы будем использовать библиотеку 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="Узнать ТИЦ">

<div class="result">
<ul>
</ul>
</div>

</div> </body> </html>

Итак, площадка для работы готова! Теперь перейдем к написанию функции, которая будет посылать Ajax-запрос и выводить значение ТИЦ в только что созданный слой <div> с классом class="result".

$(function(){
   $('#get_tic').click(function(){
   //получаем  url-адрес сайта для парсинга
   var url = $('#url').val();
   //очищаем  предыдущие записи
   $(".result  ul li").remove();
   //Если  количество символов больше 3, то начинаем парсить
   if  (url.length > 3){
   //Добавляем  строку и показываем пользователю,
// что запрос обрабатывается
$(".result ul").append("<li><B>URL: http://"+url+"</B>" +"<div class='loading'><span></span>" +"<img id='loading' src='loading.gif'></div></li>"); //Посылаем POST запрос и выводим значение ТИЦ $.post( 'parser.php', 'url='+url, function(data){ $('.loading span').html(data); } );                                 //Когда ajax-запрос окончен, скрываем картинку загрузки $("img#loading").ajaxStop(function(){ $(this).hide(); });                               } else{ alert('Вы не ввели URL-адрес!'); } });

});

Если Вы еще не знакомы с 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);
 ?>

Скачать исходники можно по этой ссылке

Удачи!

Оцените эту статью:
Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Реклама

Баннер

Топ комментаторы

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/coding/93.html
5 из 5 на основе 0 оценок.
Твиттер Facebook Google plus RSS