Используйте AJAX для перезагрузки капчи

Question

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

У меня есть страница. Он использует капчу. Вот так:

<?php
session_start(); // the captcha saves the md5 into the session
?>
<img src="captcha.php" onclick="this.src = this.src" />

Это был мой первый код. Это не сработало, потому что браузер посчитал его бесполезным для перезагрузки изображения, если источник тот же. Мое текущее решение состоит в том, чтобы передать параметр get:

onclick="this.src = 'captcha.php?randomNumber='+ranNum"

Переменная JavaScript var ranNum генерируется случайным образом каждый раз, когда происходит событие onclick. Это работает нормально, однако, мне не нравится возможность, если - хотя это невероятно - случай, когда два числа одинаковы дважды подряд. Хотя случайное число варьируется от -50 000 до 50 000 - мне все равно это не нравится. И я не думаю, что метод правильный. Я хотел бы узнать «правильный метод» с помощью AJAX. Я знаю, что это возможно. Я надеюсь, вы знаете, как это возможно ^^ В таком случае, пожалуйста, покажите мне.

Заранее спасибо!

Кстати, если я пишу cap (t) cha по-другому, не говоря уже о том, что ссылка на файл PHP в моем коде верна: я использую randomImage.php

РЕДАКТИРОВАТЬ: случайное число в JavaScript генерируется только для перезагрузки изображения. Captcha.php не заботится о параметре $ _GET. Строка действительно случайная.

РЕДАКТИРОВАТЬ: Таким образом, я хотел бы знать, как сделать так, чтобы браузер повторно отображал изображение, не передавая различные параметры get каждый раз, когда происходит событие.

Answer 1

К сожалению, AJAX не обеспечивает хороший способ динамической загрузки изображений. Даже при использовании трюка с предварительной загрузкой javascript браузер загружает каждое изображение один раз для каждого URL. Единственный хороший способ заставить браузер загружать другое изображение из того же источника - это использовать другой параметр, как вы делаете сейчас. И, как указывалось в других ответах, для этого должно быть достаточно отметки времени.

Answer 2

Рассматривали ли вы вместо этого метку времени?

onclick="this.src='captcha.php?ts='+Math.round(new Date().getTime()/1000)"

Answer 3

Просто используйте:

<img src="captcha.php" onclick='this.src = "captcha.php&time=" + new Date().getTime();' />

Вы можете отказаться от параметра времени и сгенерировать случайное число в PHP. :)

Answer 4

Вы также можете получить изображение из Ajax-запроса в кодировке base64 и поместить его в тег img.

Конечно, я думаю, что это излишне, и файл в кодировке base64 составляет около 4/3 от размера оригинала. (Изображение размером 3 КБ будет иметь размер около 4 КБ на base64).

Edit: иметь атрибут img src, например

данные: изображение / PNG; base64, base64encodedimage