вопрос новичка: использование метода open не загружает мой текстовый файл - PullRequest
0 голосов
/ 16 февраля 2011

сервер: apache http server 2.2 проблема: код не загружает мой текстовый файл

привет люди. В настоящее время я пытаюсь выучить JavaScript и следую нескольким урокам. ниже приведен код от w3schools. то, что он должен сделать, это изменить отображаемый текст после нажатия кнопки. однако, это не работает для меня. html-файл, в котором сохранен приведенный ниже код, и текстовый файл, который я пытаюсь открыть, находятся в одной папке. Я получаю доступ к html-файлу из chrome, используя это: http://localhost/ajaxtutorial.html., пока он правильно отображает html-файл, после нажатия кнопки ничего не происходит. Я попытался изменить файл на php и сделать эквивалентный файл php для указанного текстового файла, но все равно ничего не происходит. пожалуйста, помогите.

<html>

<script type="text/javascript">

//comments are from http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.php

    function loadXMLDoc(url , cfunc)
    {
        var xmlhttp;

        //XMLHttpRequest object is used to exchange data with a server behind the scenes
        //creates an xmlhttprequest object
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        //The XMLHttpRequest object has a special property called onreadystatechange
        //onreadystatechange stores the function that will process the response from the server
        //every time the "ready state" changes, this function will be executed
        xmlhttp.onreadystatechange=cfunc;

        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);

    }   

    function myFunction()
    {
        loadXMLDoc
        ("ajax_info.txt",           
          function()
          {
            //The XMLHttpRequest object has another property called readyState
            //This is where the status of our SERVER'S RESPONSE is stored
            //The SERVER RESPONSE can be processing, downloading or completed
            //When the property readyState is 4 that means the response is complete and we can get our data

            //Download worked as intended, data request successful if status property = 200

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

          }               
        );
    }

</script>

<div id="myDiv">
    <h2>Let AJAX change this text</h2>
</div>

<button type="button" onclick="myFunction()">Change Content</button>

1 Ответ

1 голос
/ 16 февраля 2011

В myFunction переменная xmlhttp не входит в область действия функции. Это должно вызывать ошибку JavaScript, которую вы можете просмотреть в Chrome, выбрав Меню> Инструменты> Консоль JavaScript. Один из способов исправить это - передать объект xmlhttp в качестве параметра.

function loadXMLDoc(url , cfunc) {
    //some code...
    xmlhttp.onreadystatechange=function() {
        //pass xmlhttp as a parameter to this function and preserve the context
        //see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
        cfunc.call(this, xmlhttp);
    }
    //some more code...
}

function myFunction() {
    loadXMLDoc("ajax_info.txt", function(xmlhttp) {
        //xmlhttp is now in scope because we passed it as a parameter
    });
}

Обновление

Я создал рабочий пример на http://jsfiddle.net/6rPgE/

Что касается вашего вопроса о модификациях, которые я предложил ... Вторым параметром метода loadXMLDoc (cfunc) является функция. В этом случае внутри myFunction создается анонимная функция, которая будет передана в качестве параметра cfunc в loadXMLDoc. Когда вызывается обратный вызов onreadystatechange, функция cfunc вызывается с xmlhttp в качестве первого параметра. Этот параметр передается в анонимную функцию, определенную внутри myFunction, и отвечает за фактическое выполнение чего-либо с ответом AJAX. С другой стороны, я настоятельно рекомендую использовать отладчик ( Chrome имеет один встроенный ) и информацию, предоставленную консолью ошибок браузера, чтобы помочь вам в устранении этих проблем в будущем. Изучение использования отладчика сэкономит вам бесчисленные часы удара головой об стену.


Обновление 2

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

Другой пример, который использует jQuery на http://jsfiddle.net/j9QvE/1/


Обновление 3

Обратите внимание, что в моем коде я заменил путь к ajax_info.txt на путь , специально используемый для тестирования функциональности AJAX в jsFiddle (/ echo / js /? Js = Success!). Это было необходимо, поскольку ajax_info.txt не существует на серверах jsFiddle, поэтому его запрос мог привести к ошибке 404. Не забудьте изменить путь, чтобы указать на соответствующий ресурс в вашем собственном домене.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...