понедельник, 14 октября 2013 г.

Передача Windows-1251 (cp1251) с помощью POST и AJAX на сторону сервера.

Внезапно, я обнаружил, что POST AJAX упорно передает мою строку в UTF-8, игнорируя все попытки указать ему кодировку. А серверные программы настроены принимать только windows-1251 и это вызывает некий конфликт. И выражается он в том, что русский текст становится текстом кракозябровым.
Некоторое время погуглив я обнаружил, что нормальное решение этой проблемы как-то не особо существует и основное мнение комьюнити показано, например, здесь. Краткое резюме:
это нельзя, потому что нельзя, используй перекодировку. Я же, со своей стороны решил, что вариант с удвоением трафика + потерей мощности меня не слишком радует.
Дальнейшие раскопки привели меня к причинам такого поведения AJAX: w3. Там написано, что строку надо передавать в UTF-8 и ничего больше не волнует. Но что более интересно, там сказано, что другие варианты можно передавать и не как UTF-8. Например: ArrayBuffer или Blob.
Покопав в этом направление, я нашел еще 1 статью. Этот вариант относится к новым возможностям, появившимся относительно недавно.

Идея проста:
Строка - это тот же массив символов. Просто ajax передаст ее массив 2вубайтовых чисел, а мы хотим передавать массив однобайтовых. Значит, чтобы передать строку на сервер в windows-1251 надо просто записать коды windows-1251 символов нашей строки в массив однобайтовых чисел. А на стороне сервера - просто прочитать из тела запроса как готовую строку в кодировке windows-1251.

Как это сделать:

1) Берем нашу строку data_str и какой-либо функцией меняем ее кодировку на нужную(в моем случае - это windows-1251). Такую функцию легко написать самому или найти на просторах сети, например, тут.

var converted_str = convertToWin1251(data_str);

2) Мы получили converted_str, которая все еще считается строкой в UTF-8, но содержит уже коды необходимой кодировки. Просто так послать ее нельзя, ибо AJAX все равно будет трактовать ее, как UTF-8 и попытается конвертировать, что окончательно ее испортит.
Поэтому, мы создаем массив 8мибайтовых неотрицательных чисел размером под нашу строку:

var send_arr = new Uint8Array(converted_str.length);

3) Теперь осталось только заполнить этот массив

for(var i = 0; i < converted_str .length; ++i)
send_arr[i] = converted_str.charCodeAt(i);

4) выставить правильную кодировку и отправить его:

ajaxVar.open('POST', 'http://FOO.BAR', 1);
ajaxVar.setRequestHeader('Content-Type', 'text/plain; charset=windows-1251');
ajaxVar.send(send_arr);

где ajaxVar - это созданный ajax-запрос.
Собственно, все.

Осталось только принять данные на строне сервера. Они передаются как RAW POST DATA. Неплохо было бы, чтобы принимающая сторона умела работать с ней. С++ С#/ASP.NET насколько я помню, проблем с этим не имеют, PHP это делает так.

P.S. Если кто-то не согласен, нашел способ лучше или просто есть что сказать по существу - добро пожаловать в комментарии =)

7 комментариев:

  1. Вот рабочие варианты запроса к серверу с возвратом в кодировке 1251 часа 2 гуглил мануалы
    Вариант 1:
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "AjaxKart.asp?"+"action=ModifyKolCart&elem="+elem+"&kol="+$('#'+kol).val());
    xhr.overrideMimeType('text/plain; charset=windows-1251');
    xhr.onload = function(e) {
    $('#kart').html(this.response);
    }
    xhr.send();

    ну и вариант 2 ajax:
    $.ajax({
    type: "POST",
    url: "AjaxKart.asp?"+"action=ModifyKolCartNom&elem="+elem+"&kol="+$('#'+kol).val(),
    beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=windows-1251");
    },
    success: function(response){
    $('#kart').html(response);
    }
    });

    ОтветитьУдалить
    Ответы
    1. Да, но НА сервер данные передаются все равно в UTF-8 =)

      Удалить
  2. Поясните, пожалуйста, вот эту строчку

    ajaxVar.send(b);

    куда дальше попадает send_arr и что такое b ?

    ОтветитьУдалить
    Ответы
    1. Это опечатка, вкравшаяся в одной из правок, спасибо, что заметили, исправил ее. Конечно же, b - это массив, который мы передаем.

      А попадает он потом туда, куда вы его передаете тем методом, который укажете в ajaxVar.open(). Дальше все зависит от того, чем принимается. Я принимал его на вход программы, которая умеет работать с RAW POST DATA. Если возникнут проблемы - напишите конкретику(как отправляется, чем обрабатывается) и я постараюсь помочь =)

      Удалить
    2. То есть send_arr - это строка вида "ajax=Y&param1=value...", обработанная с помощью специальных функций.

      P.S. Проблему я уже решил, конвертируя кодировку на стороне сервера.

      не знаю, стоит ли тратить на это время, но в принципе разобраться, конечно хотелось бы...


      У меня запрос отправляется ajax-ом на jquery.
      Получает php.
      Вашим способом, к сожалению, не получилось.

      На стороне сервера преобразовываю массив цифр сначала в строку , потом в массив - все равно получаю то же самое - данные получаются не в той кодировке.



      Жаль, что это решается таким сложным способом.

      Удалить
    3. По сути строка - это же массив символов. При отправке строки ajax символы кодируются двубайтовыми числами. send_arr - это массив однобайтовых чисел. При отправке ajax отправляет его как массив, не изменяя. Соответственно, мы просто записываем в него строку, как она выглядела бы в однобайтовой кодировке и отправляем. А на стороне пхп ее надо потом прочитать как данные и можно использовать уже как готовую строку в соответствующей однобайтовой кодировке. Дополнительно преобразовывать на стороне сервера ничего не надо, в этом и была идея

      Удалить
  3. Возникла необходимость отправлять на сервер POST-ом формы в cp1251 (к серверу доступа нет). Решил таким способом:
    function sendForm(url, data, ok, error, callback) {
    var str = "";
    var boundary = '----WebKitFormBoundary5zih7EsEnWJI1WJw';
    for(var i in data) {
    str += '--' + boundary + '\r\n'
    + 'Content-Disposition: form-data; name="'+i+'"\r\n\r\n'
    + data[i] + '\r\n';
    }

    var converted_str = UnicodeToWin1251(str);

    var send_arr = new Uint8Array(converted_str.length);
    for(var i = 0; i < converted_str.length; ++i) send_arr[i] = converted_str.charCodeAt(i);

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
    if(this.status == 200) {
    ok(this.responseText);
    } else {
    error(this.responseText);
    }
    callback();
    }
    };
    xhttp.open("POST", url, true);
    xhttp.setRequestHeader('Content-Type', 'multipart/form-data; boundary='+boundary);
    xhttp.send(send_arr);
    }

    var DMap = {0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12, 13: 13, 14: 14, 15: 15, 16: 16, 17: 17, 18: 18, 19: 19, 20: 20, 21: 21, 22: 22, 23: 23, 24: 24, 25: 25, 26: 26, 27: 27, 28: 28, 29: 29, 30: 30, 31: 31, 32: 32, 33: 33, 34: 34, 35: 35, 36: 36, 37: 37, 38: 38, 39: 39, 40: 40, 41: 41, 42: 42, 43: 43, 44: 44, 45: 45, 46: 46, 47: 47, 48: 48, 49: 49, 50: 50, 51: 51, 52: 52, 53: 53, 54: 54, 55: 55, 56: 56, 57: 57, 58: 58, 59: 59, 60: 60, 61: 61, 62: 62, 63: 63, 64: 64, 65: 65, 66: 66, 67: 67, 68: 68, 69: 69, 70: 70, 71: 71, 72: 72, 73: 73, 74: 74, 75: 75, 76: 76, 77: 77, 78: 78, 79: 79, 80: 80, 81: 81, 82: 82, 83: 83, 84: 84, 85: 85, 86: 86, 87: 87, 88: 88, 89: 89, 90: 90, 91: 91, 92: 92, 93: 93, 94: 94, 95: 95, 96: 96, 97: 97, 98: 98, 99: 99, 100: 100, 101: 101, 102: 102, 103: 103, 104: 104, 105: 105, 106: 106, 107: 107, 108: 108, 109: 109, 110: 110, 111: 111, 112: 112, 113: 113, 114: 114, 115: 115, 116: 116, 117: 117, 118: 118, 119: 119, 120: 120, 121: 121, 122: 122, 123: 123, 124: 124, 125: 125, 126: 126, 127: 127, 1027: 129, 8225: 135, 1046: 198, 8222: 132, 1047: 199, 1168: 165, 1048: 200, 1113: 154, 1049: 201, 1045: 197, 1050: 202, 1028: 170, 160: 160, 1040: 192, 1051: 203, 164: 164, 166: 166, 167: 167, 169: 169, 171: 171, 172: 172, 173: 173, 174: 174, 1053: 205, 176: 176, 177: 177, 1114: 156, 181: 181, 182: 182, 183: 183, 8221: 148, 187: 187, 1029: 189, 1056: 208, 1057: 209, 1058: 210, 8364: 136, 1112: 188, 1115: 158, 1059: 211, 1060: 212, 1030: 178, 1061: 213, 1062: 214, 1063: 215, 1116: 157, 1064: 216, 1065: 217, 1031: 175, 1066: 218, 1067: 219, 1068: 220, 1069: 221, 1070: 222, 1032: 163, 8226: 149, 1071: 223, 1072: 224, 8482: 153, 1073: 225, 8240: 137, 1118: 162, 1074: 226, 1110: 179, 8230: 133, 1075: 227, 1033: 138, 1076: 228, 1077: 229, 8211: 150, 1078: 230, 1119: 159, 1079: 231, 1042: 194, 1080: 232, 1034: 140, 1025: 168, 1081: 233, 1082: 234, 8212: 151, 1083: 235, 1169: 180, 1084: 236, 1052: 204, 1085: 237, 1035: 142, 1086: 238, 1087: 239, 1088: 240, 1089: 241, 1090: 242, 1036: 141, 1041: 193, 1091: 243, 1092: 244, 8224: 134, 1093: 245, 8470: 185, 1094: 246, 1054: 206, 1095: 247, 1096: 248, 8249: 139, 1097: 249, 1098: 250, 1044: 196, 1099: 251, 1111: 191, 1055: 207, 1100: 252, 1038: 161, 8220: 147, 1101: 253, 8250: 155, 1102: 254, 8216: 145, 1103: 255, 1043: 195, 1105: 184, 1039: 143, 1026: 128, 1106: 144, 8218: 130, 1107: 131, 8217: 146, 1108: 186, 1109: 190}

    function UnicodeToWin1251(s) {
    var L = []
    for (var i=0; i<s.length; i++) {
    var ord = s.charCodeAt(i)
    if (!(ord in DMap)) {
    L.push(63);
    } else {
    L.push(String.fromCharCode(DMap[ord]))
    }
    }
    return L.join('')
    }

    использование:
    sendForm('test.php', {name:'имя', message:'Сообщение'}, function(){alert('отправлена');}, function(){alert('не отправлена');}, function(){});

    ОтветитьУдалить