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

Question

Я играл с Javascript, и теперь я пришел в Аякс. Я пытаюсь написать очень простой скрипт, который получит содержимое файла - напечатайте содержимое файла 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 браузеров

активный объект в IE X, похоже, не слишком заботится о состоянии готовности, другие браузеры не могут иметь текст загружается достаточно быстро в то время вы запускаете свою функцию (следовательно, почему вы получаете пустоту вместо содержимого файла). Активный X IE, похоже, обрабатывает это автоматически и игнорирует состояние готовности, поэтому вам придется разбить код по-другому, как показано ниже. Обычно вы проверяете 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; 
    } 

} 

Для ХРОМ

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

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

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

Answer 2

Попробуйте jQuery. Скачать последнюю версию here и написать этот фрагмент кода:

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

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

Answer 3

Сегодня его старая мода называть Аякс как XMLHTTP = новый XMLHttpRequest();

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

• http://api.jquery.com/jQuery.ajax/

• 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 4

Вам нужно проверить 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 5

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

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

Answer 6

Во-первых, вам нужно сражаться с Same Origin Policy.

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

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");