HTML / AJAX / PHP синхронная гармония?Может ли асинхронный когда-либо работать? - PullRequest
2 голосов
/ 20 октября 2011

Я разрабатываю лучший способ связать javascript для получения данных из php с помощью Ajax. И все это при попытке свести строки кода к минимуму и с максимальной скоростью. Я придумал способ передать AJAX-значение через Object, чтобы его можно было изменить, как если бы оно было передано по ссылке, а затем отправить его обратно. Но пока я могу делать это только синхронно, поскольку данные не будут доступны, пока не завершится AJAX.

Точка: Я искал простой способ получить доступ ко всему моему содержимому PHP с помощью JavaScript. Если хотите, создайте простой API JavaScript (GetSomePHPstuff).

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

В этом примере я отправляю текстовое значение из html через javascript в ajax в php, а php отправляет его обратно в ajax обратно в javascript обратно на мою html-страницу.

Вот наш простой файл типа HTML.

test.html

<script language="javascript" src="ajax.js"></script>

<input type="text" id="text"/>
<input type="button" value="Return Text" 
onClick="alert(ajaxReturnText(document.getElementById('text').value));"/>

Вот файл ajax / javascript.

ajax.js

function ReturnText(input, output){
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            output.value = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","php.php?text="+input,false);
    xmlhttp.send();
}

function ajaxReturnText(input){
    var output = new Object();
    ReturnText(input, output);
    return output.value
}

А вот и файл PHP

php.php

<?php 
function ReturnText($text){
    return $text;
}
if($text = $_GET["text"]){
    echo ReturnText($text);
    die();
}
?> 

Ответы [ 2 ]

2 голосов
/ 20 октября 2011

Это не может работать асинхронно таким образом.Вы должны понимать, что эта строка:

output.value = xmlhttp.responseText;

будет выполнена после ajaxReturnText (), если вы определите ее асинхронно.Если вы определили синхронно, то ajaxreturtext () не будет работать до тех пор, пока не будет выполнен запрос.Для меня ваша проблема в том, что код должен соответствовать основополагающим правилам, в вашем случае это то, что вы должны помнить, чтобы определить, что делать после ajax внутри этой функции обновления здесь:

xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            output.value = xmlhttp.responseText;
/*define what to do next here*/
        }

Итак, выНикогда не вызывайте код для непосредственного выполнения асинхронной операции, но если вы вызываете его изнутри соответствующей функции, см. полный код:

<html>
<head>
<script type="text/javascript"> 
/*to be called synch*/
function ReturnText(input){
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
            /*here define what to be called asynch*/
            ajaxReturnText(xmlhttp.responseText); 
        }
    } 
    xmlhttp.open("GET","php.php?text="+input,true);
    xmlhttp.send();
}

/*to be called asynch*/
function ajaxReturnText(input){
    var output = new Object();
    output.value =input; 
    alert(output.value);
     document.getElementById('test').innerHTML=
     "This is the value of the object: "+input;
}
</script>
</head>
<body>
<div id="test"></div>
<input type="text" id="text"/>
<input type="button" value="Return Text" 
onClick="ReturnText(document.getElementById('text').value);"/> 
</body>
</html>

Если вы хотите узнать больше, у меня есть класс для него: см. здесь

1 голос
/ 23 февраля 2012

Вы можете без проблем получать сгенерированные сервером события в реальном времени, я делал это давным-давно, до AJAX.Теперь этот способ называется Comet .Я использовал фреймы и методы сценария.Теперь лучше работать с ajax, но здесь есть некоторые проблемы, которые вам нужно решить.

Вы можете получать данные в режиме реального времени, используя обратный вызов .onreadystatechange с .readyState==3.
Этот обратный вызов генерируется каждый раз, когда приходят новые данныес сервера.Вам необходимо запомнить последний .responseText размер и прочитать новые данные с этого момента до конца, а затем сохранить новый размер.

  • Проблема номер один :
    IE генерирует исключение при попытке прочитать .responseText до события с .readyState==4.Таким образом, серверная часть должна обрывать соединение после каждого события, чтобы сделать readyState читабельным и заставить клиента заново его воссоздать (см. «Длинный опрос»).Если браузер не IE, вам не нужно каждый раз заново создавать соединение.Но здесь мы тоже сталкиваемся с проблемой номер.
  • Проблема номер два:
    .responseText размер.Может быть очень большим, если соединение используется в течение длительного времени.Поэтому вам нужно реализовать счетчик (отправка событий или байтов) на сервере или клиенте и воссоздать соединение путем переполнения счетчика.
  • Еще одна проблема - таймауты.Вам необходимо отключить тайм-аут на сервере (см. set_time_limit()) и отправить в браузер что-то незначительное (например, пробел), если у вас нет событий, которые бы предотвращали тайм-аут браузера.

Обычно вам нужно два канала на сервер:загрузить и скачать.У вас есть канал загрузки с jQuery или другим фреймворком, но я не уверен насчет загрузки.Боюсь, вы не можете использовать технику readyState==3 с jQuery.Может быть APE Framework может это сделать?

...