ajax – Stepan Suvorov Blog https://stepansuvorov.com/blog Release 2.0 Fri, 01 Sep 2023 15:40:58 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.1 jQuery: $.put and $.delete https://stepansuvorov.com/blog/2014/04/jquery-put-and-delete/ https://stepansuvorov.com/blog/2014/04/jquery-put-and-delete/#comments Tue, 01 Apr 2014 09:52:55 +0000 http://stepansuvorov.com/blog/?p=1644 jQuery Ajax helpers set does not have shortcuts for  PUT and DELETE methods, but nothing prevents us to make them ourselves.

put

$.put = function(url, data, callback, type){

  if ( $.isFunction(data) ){
    type = type || callback,
    callback = data,
    data = {}
  }

  return $.ajax({
    url: url,
    type: 'PUT',
    success: callback,
    data: data,
    contentType: type
  });
}

delete

$.delete = function(url, data, callback, type){

  if ( $.isFunction(data) ){
    type = type || callback,
    callback = data,
    data = {}
  }

  return $.ajax({
    url: url,
    type: 'DELETE',
    success: callback,
    data: data,
    contentType: type
  });
}

And a short form for both is:

jQuery.each( [ "put", "delete" ], function( i, method ) {
  jQuery[ method ] = function( url, data, callback, type ) {
    if ( jQuery.isFunction( data ) ) {
      type = type || callback;
      callback = data;
      data = undefined;
    }

    return jQuery.ajax({
      url: url,
      type: method,
      dataType: type,
      data: data,
      success: callback
    });
  };
});
]]>
https://stepansuvorov.com/blog/2014/04/jquery-put-and-delete/feed/ 4
jQuery Ajax Simple Mock https://stepansuvorov.com/blog/2014/01/jquery-ajax-simple-mock/ https://stepansuvorov.com/blog/2014/01/jquery-ajax-simple-mock/#respond Tue, 21 Jan 2014 15:27:12 +0000 http://stepansuvorov.com/blog/?p=1401 jQuery Ajax Simple Mock from Cowboy to bookmarks.

]]>
https://stepansuvorov.com/blog/2014/01/jquery-ajax-simple-mock/feed/ 0
Пишем свой Uploader с нуля на javascript используя FileApi. Часть4 https://stepansuvorov.com/blog/2012/07/%d0%bf%d0%b8%d1%88%d0%b5%d0%bc-%d1%81%d0%b2%d0%be%d0%b9-uploader-%d1%81-%d0%bd%d1%83%d0%bb%d1%8f-%d0%bd%d0%b0-javascript-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d1%83%d1%8f-fileapi-%d1%87%d0%b0-4/ https://stepansuvorov.com/blog/2012/07/%d0%bf%d0%b8%d1%88%d0%b5%d0%bc-%d1%81%d0%b2%d0%be%d0%b9-uploader-%d1%81-%d0%bd%d1%83%d0%bb%d1%8f-%d0%bd%d0%b0-javascript-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d1%83%d1%8f-fileapi-%d1%87%d0%b0-4/#respond Mon, 30 Jul 2012 11:17:21 +0000 http://stepansuvorov.com/blog/?p=341 Continue reading ]]> В частях 1, 2, 3 мы научились читать файлы с диска.Теперь попробуем разобрать процесс отправки файлов на сервер с помощью технологии ajax.

В начале вспомним как работать с аяксом для передачи файла на сервер:

  1. Метод передачи будет POST
  2. Обязательно нужно будет указать Content-Type, а именно multipart/form-data
  3. Правильно сформировать само тело сообщения

Получим следующий код(по пунктам):

var request = new XMLHttpRequest(); 
request.onreadystatechange = ajaxReady; 
request.open('POST', 'uploader.php', true); // (1)
request.setRequestHeader('Content-Type', contentType); // (2)
request.sendAsBinary(createTestMsg()); // (3)

ajaxReady – это просто callback-функция, которая вызовется при ajax-ответе. Для нее пока установим простую заглушку:

function ajaxReady() {
    if (request.readyState == 4 && request.status == 200) {
        alert(request.responseText);
    }
}

uploader.php  – тоже пока файл-заглушка на стороне сервера, следующего содержания:

<?php

var_dump($_POST);
var_dump($_FILES);

Теперь перейдем к более важным моментам. contentType определяем следующим образом:

var boundary = "AJAX-----------------------" + (new Date).getTime();
var contentType = "multipart/form-data; boundary=" + boundary;

boundary – это случайная последовательность байт, которые не должны встречаться в самом файле. Вы можете придумать свой алгоритм для генерации данной последовательности, т.к. это лишь пример.

Ну и самое основное – формирование сообщения:

function createTestMsg(){
    var fieldName = 'testfile';
    var fileName  = '4.jpg';
    var CRLF = "\r\n";

    var msg = "--" + boundary + CRLF;
    msg += 'Content-Disposition: form-data; ';
    msg += 'name="' + fieldName + '"; ';
    msg += 'filename="'+ fileName + '"' + CRLF;
    msg += 'Content-Type: application/octet-stream';
    msg += CRLF + CRLF; // marks end of the headers part
    msg += Array(9999).join(7) + CRLF;
    msg += "--" + boundary + "--" + CRLF;
    return msg;
}

Array(9999).join(7) – это такой вариант генерации фэйкового контента для файла.

Вот тут можно посмотреть весь код: http://learn.javascript.ru/play/E1MhM, но в песочнице он работать не будет, т.к. нет файла uploader.php на строне сервера, так что в любом случае нужно копировать локально и смотреть.

]]>
https://stepansuvorov.com/blog/2012/07/%d0%bf%d0%b8%d1%88%d0%b5%d0%bc-%d1%81%d0%b2%d0%be%d0%b9-uploader-%d1%81-%d0%bd%d1%83%d0%bb%d1%8f-%d0%bd%d0%b0-javascript-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d1%83%d1%8f-fileapi-%d1%87%d0%b0-4/feed/ 0