подгрузка картинки через аякс

@Linked · Регистрация: 12.12.2010

Студворк — интернет-сервис помощи студентам

Вопрос в том, что я хочу подгрузить картинку а не текст..Ну, он подгружает тег с выводом картинки из file.php)Как ето исправить?Вот код:
index.php

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<title>Ajax</title>
<script type = "text/javascript">
function getXmlHttpRequest()
{
    return new XMLHttpRequest;
}
var url = "file.php";
var req = getXmlHttpRequest();
function q_st()
{
    req.onreadystatechange = q_en;
    req.open("GET", url, true);
    req.send(null);
}
 
function q_en()
{
    var result = document.getElementById("div1");
    result.firstChild.nodeValue = req.responseText;
}
</script>
</head>
<body>
<div id = "div1">TEST</div>
<button onclick = "q_st()">Ok!</button>
</body>
</html>

file.php

PHP
1
2
3
<?php
echo "<img src = '1.JPG'>";
?>

@Notortep · 12.10.2012, 00:10

файл file.php должен возвращать не HTML-текст, а саму картинку
т.е. сначала вы должны картинку создать, а потом её вывести в браузер
приблизительно так:

PHP
1
2
3
4
5
6
7
<?php
$image = ImageCreateFromGIF("http://otpada.net/uploads/posts/1152776512_1152643253_zidane_ush.gif");
 
header ("Content-type: image/gif");
Imagegif($image);
ImageDestroy($image);
?>

соответственно, в скрипте вам надо получить не responseText, а просто response, причём бинарного типа
поэтому, при отсылке запроса вам надо указать желаемый тип ответа
в функции q_st () надо добавить:

JavaScript
1
2
3
4
5
...
req.open ("GET", url, true);
req.responseType = 'blob'; // добавьте эту строку
req.send (null);
...

функция q_en () у вас написана безграмотно - нет проверки готовности ответа
значит, её, во-первых, надо добавить
во-вторых, надо добавить создание тега <img>
ну и потом запустить загрузку полученного респонса в src этого тега

JavaScript
1
2
3
4
5
6
7
8
9
10
function q_en ()
{
if (req.readyState == 4)
   {
   var virtimage = document.createElement ('img'),
   image = document.getElementById ('div1').appendChild (vitrimage);
   image.addEventListener ('load', function (evt) {URL.revokeObjectURL (evt.target.src)});
   image.src = URL.createObjectURL (req.response);
   }
}

где-то так...
в MSIE будет работать только с 10 версии

@Linked · 12.10.2012, 00:12 **[ТС]**

Notortep, а как правильно всё сделать, грамотно так сказать?Чтобы работало во всех (ну почти) браузерах и получало ответ от сервера?Можете пояснить для чего это?

@Notortep · 12.10.2012, 00:33

Сообщение от Linked

Можете пояснить для чего это?

не понял ?!?

для чего это вам - я пояснить не могу
-----

AJAX - асинхронная javascript-технология в смысле:
-- javascript послал запрос и отключился
-- а вы продолжаете работать со страницей, покуда происходят те самые readystatechange (буквально - "изменения состояния готовности") ответа

как только при очередном "изменении состояния готовности" номер состояния готовности (а их как раз несколько - номерами от 1 до 4) достигнет 4-х ("усе готово, шеф!"), javascript "включится" и сделает то, что прописано в функции, коя и назначена при достижении readyState == 4

что ещё непонятного?

@Linked · 12.10.2012, 00:38 **[ТС]**

Notortep, мне для регистрации на аяксе так сказать(чтобы не такая нудная была), да и вообще чтобы понимать и самому можно было как-то использовать)Например тот-же чат на аяксе и т.д..Я второй день только в нём разбираюсь, поетому не надо судить так строго)Вернее JS крайняк владею, а вот Аяксом только сейчас заинтересовался..Да, тот-же самый JS, но приёмы довольно неизвестные мне..Что нибудь мб тогда можете посоветовать?

@Notortep · 12.10.2012, 01:44

см. тему SQL Server и JavaScript - там относительно подробно объяснено

@Linked · 12.10.2012, 07:01 **[ТС]**

Notortep, спасибо!Буду пробовать разбираться

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	12.10.2012, 00:12 [ТС]
	Notortep, а как правильно всё сделать, грамотно так сказать?Чтобы работало во всех (ну почти) браузерах и получало ответ от сервера?Можете пояснить для чего это? 0

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	12.10.2012, 00:38 [ТС]
	Notortep, мне для регистрации на аяксе так сказать(чтобы не такая нудная была), да и вообще чтобы понимать и самому можно было как-то использовать)Например тот-же чат на аяксе и т.д..Я второй день только в нём разбираюсь, поетому не надо судить так строго)Вернее JS крайняк владею, а вот Аяксом только сейчас заинтересовался..Да, тот-же самый JS, но приёмы довольно неизвестные мне..Что нибудь мб тогда можете посоветовать? 0

@Notortep Заблокирован
	12.10.2012, 01:44
	см. тему SQL Server и JavaScript - там относительно подробно объяснено 1

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	12.10.2012, 07:01 [ТС]
	Notortep, спасибо!Буду пробовать разбираться 0