hpapi.blogspot.jp: Ajax

ラベル Ajax の投稿を表示しています。すべての投稿を表示

2021年3月3日水曜日

fetch() Ajax

// XMLHttpRequest()
function F_httprequest() {
    let req = new XMLHttpRequest();
    let url = '/' + CSVFile + '?key=' + Math.floor(Math.random() * (1 - 100) + 100);
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            let ajaxText = req.responseText;
            F_create_master(ajaxText);
            F_read_ajax(ajaxText);
        }
    }
    req.open("GET", url, true);
    req.send(null);
}

// fetch()
async function testFetch() {
    let pim = fetch('/' + CSVFile + '?key=' + Math.floor(Math.random() * (1 - 100) + 100));
    pim.then(function (msg) {
        msg.text().then(function (ajaxText) {
            console.log(TAGLine, 'step1');
            F_create_master(ajaxText);
            F_read_ajax(ajaxText);
        }).then(function () {
            console.log(TAGLine, 'step2');
        }).catch(function () {
            console.log(TAGLine, 'catch');
        })
    }).catch(function (e) {
        console.log(TAGLine, 'URLerror');
        console.log(e);
    })
}

// fetch() async await
async function testFetch() {
    let url = '/' + CSVFile + '?key=' + Math.floor(Math.random() * (1 - 100) + 100);
    let opt = {
        method: 'GET',
        headers: {
            // "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        // body: 'key=8080',
    };
    try {
        let pri = await fetch(url, opt);
        pri.headers.forEach(function (value, key) {
            console.log(key, value);
            // content - length 20949
            // content-type text/csv
            // date Fri, 05 Mar 2021 17:36:09 GMT
            // last-modified Fri, 05 Mar 2021 16:02:52 GMT
            // server SimpleHTTP/0.6 Python/3.9.0
        })
        let csvt = await pri.text();
        F_create_master(csvt);
        F_read_ajax(csvt);
    } catch (error) {
        console.log('error');
    }
}

2016年3月20日日曜日

javascript API Url 作成

呼び出し

lulu2.call(new link('text'));

function link(text){
this.api_url = 'https://api.flickr.com/services/rest/?';
this.opt = {method:'flickr.photos.search',
api_key:'e90c9fcfd150e3811a0523e73beb86df',
text: encodeURIComponent(text),
sort:'relevance', // sort:'interestingness-desc',
privacy_filter:'public+photos',
content_type:'photos+only',
per_page:'30',
format:'json',
nojsoncallback:'1',}
}

function lulu2(){
var url = '';
for(var i in this.opt){
url = url + i + '=' + this.opt[i] +'&';
}
return this.api_url+url;
}

2016年3月5日土曜日

Javascript で JSON を送信（Ajax)とPHPサーバの受信のエンコード順番

Javascript で JSON を送信（Ajax)とPHPサーバの受信のエンコード順番

Javascript 側

1. 特殊文字をエンコード
["] >>%22 , [&] >> %26にエンコード

2. encodeURIComponent で 1をエンコードする。
["] >> %2522 , [&] >> %2526

3. JSON.stringifyで送信

PHP サーバ側

1. json_decode

2. urldecode

確認するためのJavascript
<script type="text/javascript">
function x(x){

var e={};
//データそのまま
//NG PHP サーバー側 $_REQUEST データの所得失敗、＆リンクが切れます。
//console.info('データそのまま');
//e.input1 = document.getElementById('input1').value;
//e.input2 = document.getElementById('input2').value;

//データをURLエンコード
//NG PHP サーバー側 json_decode 失敗, " の原因でした。
//console.info('データをencodeURIComponent');
//e.input1 = encodeURIComponent(document.getElementById('input1').value);
//e.input2 = encodeURIComponent(document.getElementById('input2').value);

//データの特殊文字を%22％26にエンコード
//NG PHP サーバー側 json_decode 失敗, " の原因でした。
//console.info('データの特殊文字を%22％26にエンコード');
//e.input1 = fn_replace(document.getElementById('input1').value);
//e.input2 = fn_replace(document.getElementById('input2').value);

//データをURLエンコード、特殊文字を%22％26にエンコード
console.info('データをURLエンコード、特殊文字を%22%26にエンコード');
e.input1 = encodeURIComponent(fn_replace(document.getElementById('input1').value));
e.input2 = encodeURIComponent(fn_replace(document.getElementById('input2').value));

console.info('#111 origi',e);
var j = new XMLHttpRequest();
var url ='/youtube_db/test3.php?';
j.onreadystatechange = function(){
if(j.readyState == 4 && j.status == 200){
console.info('#222 response', j.responseText);
}
}

j.open('POST',url,true);
j.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//データをJSON.stringifyで送信
console.info('データをJSON.stringifyで送信');
console.info('#123 JSON.stringify',JSON.stringify(e));
j.send('p=' + JSON.stringify(e));

//データをそのままで送信
//console.info('データをそのままで送信');
//console.log('#123 json en',JSON.stringify(e))
//j.send('p=' + e);

function fn_replace(q){
var x = {'&':'%26', '"':'%22'};
for(var i in x){
q= q.replace(RegExp(i,'g'),x[i]);
}
return q;
}
}

//データそのまま
//NG PHP サーバー側 $_REQUEST データの所得失敗、＆リンクが切れます。

//データをURLエンコード
//NG PHP サーバー側 json_decode 失敗, " の原因でした。

//データの特殊文字を%22％26にエンコード
//NG PHP サーバー側 json_decode 失敗, " の原因でした。

//データをURLエンコード、特殊文字を%22％26にエンコード

Javascript

PHP Server

<?php
//
$x = $_REQUEST;
echo "php server\n";
echo "var_dump()\n";
var_dump($x['p']);
echo "\n";
echo "var_dump(json_decode)\n";
var_dump(json_decode($x['p']));
$temp = json_decode($x['p']);
echo "\n";
echo 'urldecode($temp->input1)'.urldecode($temp->input1);
echo "\n";
echo 'urldecode($temp->input2)'.urldecode($temp->input2);
echo "\n";
echo "\n";

echo "次は\n";
echo "URLencodeしてからjson_decode.";
echo "「\"」先にデコードされる、するとjson_decodeは NULL になります。";
echo "\n";
$y = $_REQUEST;
echo "php server\n";
echo "urldecode\n";
$temp = urldecode($y['p']);
var_dump($temp);
var_dump(json_decode($temp));

?>

'\n' >> '%0d%0a'

function fn_replace(q){
var x = {'&':'%26',
'"':'%22',
'\n':'%0d%0a'
};
for(var i in x){
q= q.replace(RegExp(i,'g'),x[i]);
}
return q;
}

2016年2月29日月曜日

PHPサーバーに、javascript ajax でJSON を送信する際に、「＆」「"」のエンコードのメモ

PHPサーバーに、javascript ajax でJSON を送信する際に、
「＆」「"」のエンコードのメモ

他の方法があれば、教えてください。

Javascript 側送信
1. 事前に文字列を置き換

文字列を書き換えしない場合、送信することが
できますが PHPサーバー側「＆」リンクが切、「"」は
文字列エラーになります。

var c = '樂凡&祁隆 - 愛"你一"生';
JSON.stringify({send:c}); << NG
c.replace(/&/g,"%26");
c.replace(/"/g,"%22");

2 encodeURI() でエンコードします。
c=encodeURI(c);

2. JSON.stringify で送信します。

JSON.stringify({send:c});

PHPサーバー側受け取る

1. json_decode で
JSON エンコードされた文字列を受け取り、
それを PHP の変数に変換します。

2. urldecode で
URL エンコードされた文字列をデコードする。

$temp = json_decode($p);
$a = urldecode($temp->send);