1. ホーム
  2. javascript

[解決済み] JQueryを使わずに、JSONをサーバーに送信し、JSONを取得する。

2022-06-13 06:56:47

質問

JQueryを使わずに、(文字列化できる)JSONをサーバーに送信し、ユーザー側で結果のJSONを取得する必要があるのですが、どうすればよいでしょうか?

GETを使用する場合、JSONをどのようにパラメータとして渡せばよいでしょうか。長すぎるというリスクはありますか?

POSTを使用する場合、どのようにして onload 関数をGETで使用するのでしょうか?

それとも別の方法を使うべきでしょうか?

備考

この質問は、単純なAJAXを送信することに関するものではありません。それは重複として閉じられるべきではありません。

どのように解決するのですか?

POSTメソッドでJSON形式のデータを送受信する

// Sending and receiving data in JSON format using POST method
//
var xhr = new XMLHttpRequest();
var url = "url";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
var data = JSON.stringify({"email": "[email protected]", "password": "101010"});
xhr.send(data);

GETメソッドによるJSON形式でのデータ送受信

// Sending a receiving data in JSON format using GET method
//      
var xhr = new XMLHttpRequest();
var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": "[email protected]", "password": "101010"}));
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
xhr.send();

サーバーサイドでPHPを使ってJSON形式のデータを扱う

<?php
// Handling data in JSON format on the server-side using PHP
//
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")));
// build a PHP variable from JSON sent using GET method
$v = json_decode(stripslashes($_GET["data"]));
// encode the PHP variable to JSON and send it back on client-side
echo json_encode($v);
?>

HTTP Get リクエストの長さの制限は、使用するサーバとクライアント(ブラウザ)の両方に依存し、2kB ~ 8kB です。サーバーは、URIがサーバーの処理可能な長さを超えている場合、414 (Request-URI Too Long) ステータスを返す必要があります。

注意 ある人が、状態の値の代わりに状態名を使うことができると言いました。言い換えれば、私は xhr.readyState === xhr.DONE の代わりに xhr.readyState === 4 問題は、Internet Explorerが異なる状態名を使用しているため、状態値を使用する方が良いということです。