jQueryを利用せずにAjaxを利用するサンプル

風の噂によれば、世の中には「DOM操作を多用するが、jQueryは禁止」という開発現場があるそうです(血涙)

まずはjsonをPOSTする例。

// jsonの準備
var json = {};
json.name = "nekoTheShadow";
json.job = "SystemsEngneer";

// XMLHttpRequestオブジェクトの生成
var xhr = new XMLHttpRequest();

// methodとurlを指定
xhr.open("POST", "/post/json");

// イベントリスナを設定
xhr.addEventListener("progress", function(){}); // 通信中
xhr.addEventListener("load", function(){}); // 通信成功
xhr.addEventListener("error", function(){}); // 通信失敗
xhr.addEventListener("abort", function(){}); // 通信をキャンセル

// Content-Typeを設定
xhr.setRequestHeader("Content-Type", "application/json");

// 送信
xhr.send(JSON.stringify(json));

次は普通(?)にPOSTする例:

// 送信するデータの準備
var data = "name=nekoTheShadow&job=SystemsEngneer";

// XMLHttpRequestオブジェクトの生成
var xhr = new XMLHttpRequest();

// methodとurlを指定
xhr.open("POST", "/post/json");

// イベントリスナを設定
xhr.addEventListener("progress", function(){}); // 通信中
xhr.addEventListener("load", function(){}); // 通信成功
xhr.addEventListener("error", function(){}); // 通信失敗
xhr.addEventListener("abort", function(){}); // 通信をキャンセル

// Content-Typeを設定
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 送信
xhr.send(data);

ご査収ください(´・ω・`)