Почему мой основной сценарий Ajax не работает?

Question

Я играл с Javascript, и теперь я пришел в Ajax.Я пытаюсь написать очень простой скрипт, который бы получал содержимое файла - напечатать содержимое файла txt в div с помощью id=test.Это сценарий:

function loadXMLDoc(url)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("GET" , url ,false);
    xmlhttp.send(null);
    document.getElementById('test').innerHTML = xmlhttp.responseText;  
}

, когда я использую его на этом сайте:

<div id="test"  name="test"> HELLo </div>
<button type="button" onclick="loadXMLDoc('test1.txt')">ClickMe1</button>

С этим сценарием HELLo заменяется ничем - сценарий очищает контейнер.

Может быть, я упускаю что-то тривиальное, но мне нужно установить PHP?Я так не думаю, но ... я не уверен, что здесь происходит.Когда я отлаживаю, xmlhttp пусто все время.Зачем ?

Answer 1

Для браузеров, отличных от IE

Активный X-объект IE, похоже, не очень заботится о состоянии готовности, другие браузеры могут не загружать текст достаточно быстро во время запуска вашей функции (следовательно, почему вы получаете пустое значение вместо содержимого файла). IE X, кажется, обрабатывает это автоматически и игнорирует состояние готовности, поэтому вам придется разбить код по-другому, как показано ниже. Обычно вы проверяете status запроса, чтобы увидеть, полностью ли он прочитан или нет, прежде чем получить доступ к responseText.

Добавить onreadystatechange вы не можете проверить атрибут status, поскольку по запросу файловая система не выполняется никаких HTTP-запросов. (Статус всегда будет 0 для запроса, не отправленного через HTTP). Лучшее, что я могу предложить, это:

function loadXMLDoc(url)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        document.getElementById('test').innerHTML = xmlhttp.responseText;
        }
       xmlhttp.open( "GET", url );
       xmlhttp.send(null);

    }
    else
    {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

       xmlhttp.open( "GET", url );
       xmlhttp.send(null);
       document.getElementById('test').innerHTML = xmlhttp.responseText;
    }

}

Для ХРОМА

Если вы используете CHROME , вы должны запустить Chrome с помощью переключателя --allow-file-access-from-files. В противном случае он отклонит запросы файловой системы ajax. (Вам придется установить это, даже если вы используете так называемую «более простую» библиотеку, такую ​​как jQuery).

Запуск приложений AJAX в файловой системе в целом

Обычно не очень хорошая идея, много предостережений по этому маршруту. Обычно локальная разработка выполняется с помощью веб-сервера, установленного на localhost на компьютере разработчика.

Answer 2

Вам нужно проверить состояние ReadyState и состояние ответа HTTP перед заменой текста;

if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("test").innerHTML=xmlhttp.responseText;
    }

пример на http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

Пожалуйста, дайте мне знать, если он работает.

Answer 3

Во-первых, вы должны бороться с Одинаковой политикой происхождения .

Простой рабочий код для синхронного запроса следующий:

var req = new XMLHttpRequest();
req.onreadystatechange = function() {

if (req.status == 200 && req.readyState == 4) {
    ...
}

req.open('GET', url, true);
req.send(null);

Обратите внимание, что это работает для Firefox / Opera / Chrome. Если IE, используйте:

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

Answer 4

Вам нужен сервер для прослушивания запросов.Ваша обычная файловая система не сможет отвечать на запросы AJAX.

Вам не нужен PHP, однако вам понадобится Apache или аналогичный веб-сервер.

Answer 5

Сегодня по-старому принято называть ajax как xmlhttp = new XMLHttpRequest ();

У вас есть много других вариантов для этого.

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Answer 6

Попробуйте с помощью jQuery. Загрузите последнюю версию здесь и напишите этот фрагмент кода:

function loadXMLDoc(url) {   
  $("#test").load(url);
}

Это намного проще и менее подвержено ошибкам