Вот что я делаю.
Я создаю веб-сайт, где пользователи из Twitter загружают изображения на мой сайт от своего клиента tweetbot. Мое приложение, извлекает фотографию из tweetbot и загружает ее на мой облачный сервер racskpace. Я успешно сделал все это. Я сейчас разрабатываю пользовательский интерфейс, который выглядит следующим образом. Существует также веб-загрузчик.
http://d.pr/i/x4A0
Веб-загрузчик отлично работает. Я хочу, обратите внимание на три изображения ниже. Я хочу, чтобы он изменился вживую. Например, если пользователь загружает фотографию через свой клиент tweetbot, фотографии должны появиться здесь. Процесс загрузки выполняется с файлом /api/index.php. Поэтому, какой бы код мне ни понадобился, чтобы всякий раз, когда пользователь загружается, файл /api/index.php выполняется, и мой пользовательский интерфейс должен отражать это в реальном времени.
Так что я немного поработал в AJAX, чтобы сделать это. Я включил следующую функцию в /api/index.php
<script type="text/javascript"> function showPhoto(str) { 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) { $shortenedurl = xmlhttp.responseText; } } xmlhttp.open("GET", "getphoto.php?q=" + str, true); xmlhttp.send(); } </script> Я также выполнил эту функцию, добавив showPhoto ($ shortenedurl) в конец файла /api/index.php
GetPhoto.php выглядит так:
<?php $q=$_GET["q"]; $con = mysql_connect("","",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("", $con); $result = mysql_query("SELECT * FROM tblphoto WHERE shorturl = '$q'"); $row = mysql_fetch_array( $result ); $tweet = $row['tweet']; $sn = $row['user']; $thumb = $row['thumb']; mysql_close($con); ?> <div class="one-third column feature"> <h2> <?php echo $sn; ?> </h2> <img src=<?php echo $thumb; ?>/> <p> <?php echo $tweet; ?> </p> </div> <div class="one-third column feature"> <h2>Two</h2> <img src="http://lorempixum.com/400/100/nature/2" /> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="one-third column feature"> <h2>Three</h2> <img src="http://lorempixum.com/400/100/nature/3" /> <p>Lorem ipsum dolor sit amet...</p> </div>
Затем я включаю getPhoto.php в свой индекс index.html.
Я также хочу иметь возможность прокручивать базу данных и отображать только три изображения одновременно. Поэтому, если пользователь загружает фотографию, последнее фото слева изменяется на самое последнее. Предыдущее левое большинство занимает позицию два, а предыдущая средняя занимает третью позицию. Правильная фотография снижается.
Прямо сейчас ничего не отображается, как на скриншоте. Я в правильном направлении, или я делаю это неправильно?