Не могу заставить работать простую загрузку на AJAX и jQuery

169

Kristinka

12 февраля 2015, 10:48

985

Есть такой код:


<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript">

 

function PageRecive(s)

{

    document.getElementById('text').innerHTML=s;

}

 

var xmlHttp=false;

function AjaxCreate()

{

    if (xmlHttp) return true;

    /* Сначала попробуем создать XMLHttpRequest для голимого и глючного Internet Explorer */

    /*@cc_on @*/

    /*@if (@_jscript_version >= 5)

    try {

        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

        try {

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        } catch (e2) {

            xmlHttp = false;

        }

    }

    @end @*/

    /* А теперь, если у нас нормальный браузер, то создаём всё по-нормальному */

    if (!xmlHttp && typeof XMLHttpRequest != 'undefined')

        xmlHttp = new XMLHttpRequest();

    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

        d.write('<div style="font-size: 16pt; color: black;">Не удалось создать объект для работы с Ajax. Возможно, в вашем браузере выключен JavaScript или вы пользуетесь фиговым браузером. Рекомендую установить <b>Mozilla Firefox</b> или <b>Opera</b></div>');

        xmlHttp=false;

        return false;

    }

    return true;

}

 

function AjaxGet(url,callback)

{

    function UpdatePage()

    {

        if (xmlHttp.readyState==4) {

            callback(xmlHttp.responseText);

        }

    }

    if (!xmlHttp) AjaxCreate();

    xmlHttp.open('GET',url,true);

    xmlHttp.onreadystatechange=UpdatePage;

    xmlHttp.send(null);

}

 

</script>

</head>

<body>

<table><tr><td>

<a href="#" onclick="AjaxGet('page1.html',PageRecive); return false;">Меню 1</a><br />

<a href="#" onclick="AjaxGet('page2.html',PageRecive); return false;">Меню 2</a><br />

<a href="#" onclick="AjaxGet('page3.html',PageRecive); return false;">Меню 3</a><br />

</td><td>

<div id="text">Тут будет содержимое подгружаемых страниц</div>

</td></tr></table>

</body>

</html>

Почему то у меня не работает этот код, сделала файл index.html c кодом что выше, рядом положила три файла page1.html , page2.html , page3.html ...... для примера сделала все эти три страницы с разными цветами фона, по идее при нажатии на ссылки на странице должны появляться все эти три цвета...Но ничего не происходит. Помогите плиз.

1774

LEOnidUKG

12 февраля 2015, 11:19

#1

Включите отладку и смотрите, что происходит.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/ ✅ Настройка и оптимизация серверов https://getmanyspeed.ru/

K

169

Kristinka

12 февраля 2015, 11:32

#2

LEOnidUKG:
Включите отладку и смотрите, что происходит.

вообще ничего не происходит.

K

169

Kristinka

12 февраля 2015, 11:43

#3

Может кто разбирается поможет подправит мне, я вот архив выкладываю, суть такая, сбоку должна быть менюшка со ссылками, а содержимое должно подгружаться из рядом лежащих страниц page1.html , page2.html , page3.html ......

zip podgruzka.zip

M2

341

mark2011

12 февраля 2015, 11:44

#4

А зачем вы голый ajax используете? Пользуйте jquery, например. Там уже все методы для всех браузеров прописаны, остается только применить их :)

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше

K

169

Kristinka

12 февраля 2015, 11:47

#5

mark2011:
А зачем вы голый ajax используете? Пользуйте jquery, например. Там уже все методы для всех браузеров прописаны, остается только применить их :)

сделаете мне пример? я так не пойму...

---------- Добавлено 12.02.2015 в 15:49 ----------

Пробовала и такой скрипт:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>

<p>Какую страницу желаете открыть?</p>
<form>
<input id="btn1" type="button" value="Страница 1">
<input id="btn2" type="button" value="Страница 2">
</form>
<div id="content"></div>

<script>
$(document).ready(function(){

$('#btn1').click(function(){
$.ajax({
url: "page1.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});

$('#btn2').click(function(){
$.ajax({
url: "page2.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});

});
</script>

</body>
</html>

И тоже не заработало.

SP

56

SeoProger

12 февраля 2015, 11:52

#6

Я попробовал скачать и запустить Ваш скрипт в архиве - все работает. Только запускайте из веб-сервера, а не просто открыв файл в браузере, чтобы не было "кросс-доменных" ajax-запросов.

---------- Добавлено 12.02.2015 в 14:55 ----------

Второй скрипт с jQuery тоже работает.

Делаю небольшие заказы на php, perl, js/ajax, delphi; парсеры, простые сайты с админкой, установка\настройка sape, wordpress и др. Мой Блог (http://www.seoproger.ru)

Изменения порядка подтверждения прав Почта Mail.Ru реализовала просмотр В Яндекс.Дискe для iOS

K

169

Kristinka

12 февраля 2015, 11:57

#7

SeoProger:
Я попробовал скачать и запустить Ваш скрипт в архиве - все работает. Только запускайте из веб-сервера, а не просто открыв файл в браузере, чтобы не было "кросс-доменных" ajax-запросов.

я пробовала и с денвера локально и хостинга своего, ничего не происходит...А у вас с моего архива как работало, при нажатии на ссылки появлялись разные цвета ? Потому что у этих трёх страниц я для примера сделала фон разных цветов,чтоб было нагляднее.Можете показать как у вас это раотает загрузив куда-нибудь на сервер и дать ссылку в личку..Потом удалите.

---------- Добавлено 12.02.2015 в 15:58 ----------

SeoProger:
Я попробовал скачать и запустить Ваш скрипт в архиве - все работает. Только запускайте из веб-сервера, а не просто открыв файл в браузере, чтобы не было "кросс-доменных" ajax-запросов.

---------- Добавлено 12.02.2015 в 14:55 ----------

Второй скрипт с jQuery тоже работает.

Странно :( Покажите на реальных ссылках в личку...

Яндекс покажет погодную карту В Яндекс.Метрике появилась Карта Google обновил рекомендации по

SP

56

SeoProger

12 февраля 2015, 11:59

#8

Цвета в таком исполнении меняться не будут - текст добавьте в тэг body на страницы и увидите как он меняется.

---------- Добавлено 12.02.2015 в 15:03 ----------

Ну и отдавать всю страницу через ajax не стоит - отдавайте те блоки, которые нужны. Т.е. в файлах page1...3.html не нужны <html><body>....

Яндекс вносит изменения в В Яндекс.Вебмастере появились новые Google не советует закрывать

K

169

Kristinka

12 февраля 2015, 12:03

#9

SeoProger:
Цвета в таком исполнении меняться не будут - текст добавьте в тэг body на страницы и увидите как он меняется.

тоесть вы хотите сказать чтто таким образом я не смогу подгружать страницы со своим фоном, картинками и прочим?

SP

56

SeoProger

12 февраля 2015, 12:10

#10

Kristinka:
тоесть вы хотите сказать чтто таким образом я не смогу подгружать страницы со своим фоном, картинками и прочим?

Я хочу сказать что то, как Вы сделали сейчас, не поменяет цвет страницы. Как я понял Вам нужно наглядно увидеть что ajax-запрос работает и содержание меняется - для этого добавьте текст на страницы. По поводу изменений фонов и т.д. смотрите основы HTML/CSS/JS, но обычно ajax не используют для замены страницы полностью.

В Яндекс.Метрике появилась Карта Google отозвал рекомендации по Google не советует закрывать

Что такое Power BI и зачем это нужно бизнесу

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах