Рубрики
Uncategorized

PHP_Ajax

Автор оригинала: David Wong.

Бизнес: Сделайте онлайн-голосование и проголосуйте за певца. Требования: Не требуется обновление, и объект XMLHttpRequest не разрешен. Анализ: До того, как объекты XHR стали популярными, существовал метод эффекта “без обновления”.

  1. С точки зрения HTTP, вы можете воспользоваться характеристиками 204 кодов состояния без содержимого

  2. есть доступ к iframe

  3. Использование характеристики загрузки изображения

  4. есть доступ к скрипту

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

php

    if ( !file_exists('./res.txt') ) {
        fopen('./res.txt', 'wbr');
    }
    
    $cnt = file_get_contents('./res.txt');

    $cnt += 1;
    
    file_put_contents('./res.txt', $cnt);

    
    // Utilizing 204 Characteristics of HTTP Protocol
    Header ('HTTP/1.1 204 No Conent'); // No content, browsers ignore the current file, and a series of jumps after this request are considered to have not occurred.
    
?>

Бизнес-требования: AJAX регистрируется, отправляет форму, запрашивает, чтобы страница не обновлялась. использовать iframe Характеристика

iframe Встроен в текущую страницу. Сообщение, отправленное на текущую страницу iframe Для достижения Эффекта Ajax 。


    

        User name: 
    

    

        Password:

Вывод: Бесполезно XMLHttpRequest В случае объектов JS все еще можно использовать для реализации запросов к фоновому серверу без обновления страницы или перехода.

Так называемый AJAX: То есть, если страница не обновляется, используйте ее XMLHttpRequest Объекты отправляют HTTP-запросы. Или сеть JavaScript.

Принцип реализации загрузки файлов AJAX (протокол HTTP + механизм JS): Анализ: С точки зрения протокола HTTP содержимое файла должно быть отправлено на сервер. Если возможно, это показывает, что, когда объект XMLHttpRequest отправляет содержимое файла на сервер, когда доступны данные POST, – – > Объект XHR получает содержимое файла, который вы хотите загрузить. – -> JavaScript считывает содержимое локального файла. – -> В целях безопасности JavaScript не может считывать содержимое локальных файлов. Поэтому AJAX в принципе недостижим.

Он реализован в режиме псевдо-AJAX.

  1. iframe Достигать.

  2. Это реализовано с помощью flash. Например: swfupload Подключаемый модуль

  3. Реализация HTML5. (HTML5 добавляет API для чтения файлов)

Ядро: XMLHttpRequest Объект. XML-объект-это специальный инструмент для HTTP-запросов.

Как использовать Xmlhttprequest Объекты делают AJAX-запросы? Анализ:

  1. Как создать экземпляр объекта.

  2. Как запросить справочные ресурсы.

  3. Как получить результат запроса (двусторонняя связь).

Создайте XML – объект.

new XMLHttpRequest();

Как я могу отправлять запросы через XHR?

Анализ протоколов HTTP требует четких факторов для запросов?

В соответствии с запросом банка:

  1. Как запросить.

    2.  
  2. Запросите этот ресурс (URL)
    3.  
  3. Режим синхронизации
     
 
Получите информацию о возврате
 
Сам объект XHR обладает некоторыми свойствами. responseText Представляет возвращаемое значение.
 
xhr.responseText
 
Используя асинхронность, как узнать, что запрос завершен.
 
Состояние объекта XHR непрерывно меняется во время процесса запроса и ответа (0-4) xhr.readyState Он может привязать функцию для отслеживания изменения состояния и запускать функцию при каждом изменении состояния. xhr.onreadystatechange
 
Независимо от последнего стандарта HTML5 возвращаемое значение равно: Обычный текст / XML-документ Две формы возврата
 
XML-документ
 
function createXHR() {
    var xhr = null;
    
    if ( window.ActiveXObject ) {
        xhr = new window.ActiveXObject();
    } else if ( XMLHttpRequest ) {
        xhr = new XMLHttpRequest('Microsoft.XMLHTTP');
    }
    return xhr;
}

// xml
function test1() {
    
    var xhr = createXHR();
    
    xhr.open('GET', './returntype.php', true);
    
    xhr.onreadystatechange = function () {
        if ( this.readyState == 4 ) {
            var xmldom = this.responseXML;
            console.log( xmldom );
        }
    }
            
    xhr.send(null);        
}

 
Обычный текст
 
Обычные варианты текста:
 
  1. Background возвращает большой раздел HTML-кода, непосредственно в формате HTML, на первую страницу.
    2.  
  2. Общий текст в формате JSON.
    3.  
  3. Возвращает короткую строку маркера, такую как: 0, 1, ok.
 
function createXHR() {
    var xhr = null;
    
    if ( window.ActiveXObject ) {
        xhr = new window.ActiveXObject();
    } else if ( XMLHttpRequest ) {
        xhr = new XMLHttpRequest('Microsoft.XMLHTTP');
    }
    return xhr;
}

// HTML code string returning plain text
function test2() {

    var xhr = createXHR();
    
    xhr.open('GET', './returnhtml.php', true);
    
    xhr.onreadystatechange = function () {
        
        if ( this.readyState == 4 ) {
            console.log( this.responseText );
        }
        
    }
    
    xhr.send(null);

}

// JSON format string object
function test3() {
    var xhr = createXHR();
    xhr.open('GET', './returnjson.php', true);
    
    xhr.onreadystatechange = function () {
        
        if ( this.readyState == 4 ) {
            console.log( this.responseText );
        }
        
    }
    
    xhr.send(null);
}
 
Jsonp-это междоменное решение.
 
 
Состояние готовности Значения статуса:
 
примите Механизм перехода в очередь Вставьте функцию обратного вызова перед выполняемым в данный момент кодом.
 
iframe
 
  1. Онсубмит
    2.  
  2. Создайте iframe
    3.  
  3. Укажите целевую модификацию формы на iframe
    4.  
  4. Уничтожить iframe
 
$('form').submit(function () {
    var upName = 'up' + Math.random(); 
    $('
 
$error = $_FILES['pic']['error'] == 0 ? 'success' : 'fail';
    
    sleep(2);
    
    if ( $error == 0 ) {
        echo '';
    } else {
        Echo'failed upload';
    }
 
Данные формы
 
Индикатор выполнения: Общий размер, загруженный размер Решение: В HTML5 существует событие “процесс загрузки”, в котором вы можете прочитать текущую информацию о двух. Идея: В процессе загрузки постоянно запускайте функцию, считывайте (загруженный/общий размер), обновляйте данные страницы.
 
Примечание об использовании данных формы
 
  1. Каждое поле формы должно иметь атрибут name
    2.  
  2. Не удается установить setrequestheader head
    3.  
  3. Специальные символы не нужно кодировать
    4.  
  4. В теге формы не требуется никаких настроек enctype='составные/данные формы' Атрибуты (настройки не требуются, даже если загружены домены файлов) (Нет обновленных вложений для загрузки, FormData может собирать информацию о домене файла)
 
Объект AJAX – > загрузка – > onprogress
 
Объекты AJAX имеют свойства участника загрузка – это объект, у которого есть один атрибут onprogress , который является временем, событие выполняется каждые 0,1 секунды, процесс выполнения будет знать текущую ситуацию с загрузкой вложений. (например, общий размер загружаемого файла, размер загружаемого файла и т.д.)
 
/**
 * File file upload
 */
function selfile() {
    
    // Creating FromData Objects
    var fd = new FormData();
    
    // Get the file object
    var pic = document.getElementsByTagName('input')[0].files[0];
    
    // Append the retrieved file object to the form data.
    fd.append('pic', pic);
//    fd.pic = pic;
    
    // AJAX
    var xhr = new XMLHttpRequest();
    
    xhr.open('POST', 'upfile.php', true);
    
    xhr.onreadystatechange = function () {
        
        if ( xhr.readyState == 4 ) {
            document.getElementById("debug").innerHTML = xhr.responseText;
        }
        
    }
    
    xhr.upload.onprogress = function ( ev ) {
        
        // Whether the length can be calculated. (Differentiation: Block upload) 
        if ( ev.lengthComputable ) {
            // How many/total uploads have been uploaded
            var percent = 100 * ev.loaded / ev.total;
            
            Document. getElementById ('debug'). innerHTML ='uploaded:'+ percent. toFixed (2);
            
        }
    }
    
    xhr.send(fd);
    
}
 
Объект Blob
 
В то время как цикл для загрузки файлов
 
/**
 * API used
 * file --> Blob
 * Blob has slice, which can intercept part of binary objects.
 */

/**
 * ideas:
 * Intercept 10M, upload
 * Determine whether the document has been intercepted
 * 
 * While {// intercept, upload}
 */
    
/**
 * Upload files
 */
function sendFile() {
    
    Const LENGTH = 10 * 1024 * 1024; // one-off interception length
    Var start = 0; // Where to start intercepting
    Var end = start + LENGTH /// To which end
    
    var blob = new Blob();
    var fd = null;
    
    // XHR object
    var xhr = null;
    
    // Get the total file size
    var pic = document.getElementById("pic").files[0];
    var totalSize = pic.size;
    var percent = 0;
    
    while ( start < totalSize ) {
        
        // Interception of documents
        blob = pic.slice(start, end);
        
        fd = new FormData();
//                    fd.append('part', blob);
        fd.part = blob;
        
        // XML object
        xhr = new XMLHttpRequest();
        xhr.open('POST', 'sliceup.php', true);
        
        xhr.upload.onprogress = function ( ev ) {
        }
        
        // Send requests
        xhr.send(fd);
        
        start = end;
        end = start + LENGTH;
        
        percent += 100 * end / totalSize;
        if ( percent > 100 ) {
            percent = 100;
        }
        document.getElementById("msg").style.width = percent + '%'; 
        
    }
    
    
}
 
Таймер для резки загрузки