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

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

AutoClicker - Автокликер для популярных тапалок в телеграм, который запускается на вашем ПК в браузере.
CheckTrust - сервис проверки качества сайтов. Экономия до 70% на аренде ссылок.
GoGetLinks - популярная система для получения качественных ссылок в обзорах с размещением навсегда.
Etxt.RU - биржа статей.
FastVPS - качественный VPS/VDS хостинг в германии.
Roistat - система сквозной бизнес-аналитики.

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

Рейтинг:

Дата: 8 февраля 2010 Просмотры

10951

В сегодняшней статье мы рассмотрим, как не прибегая к сторонним сервисам и используя 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);
 ?>

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

Удачи!