ajax() fn

ajax(action, options, after, before)

ajaxリクエストを実行する関数です。(メンバ関数ではありません。) 実装はnanoajax に少し似ています。

パラメータ

action: string

ajaxリクエストの送信先。

options: object

渡されるオプションをまとめたオブジェクト。

• method : リクエスト送信時のメソッド。 GETまたはPOSTを指定することができます。 デフォルトはGETです。
• body : a=b&c=d形式の文字列、または単純なオブジェクト。
• headers : { key : value}形式のヘッダー。
  ('pragma' : 'no-cache'、'Cache-Control' : 'no-cache'等)

after: function

リクエストを送信し、完了した時に呼び出される関数を指定します。 第1引数にはnull、 第2引数にはJSONデータか、文字列を受け取ります。

before: function

リクエスト送信直前に呼び出される関数を指定します。 第1引数にはxhrオブジェクトを受け取ります。 オプションです。

var action = '/save';
var options = { body: 'a=b' };
var after = function(err, data){ console.log(data); };
var before = function(xhr){};

ajax(action, options, after, before);

戻り値

xhr

送信済みのxhrオブジェクトを返します。

Tips

beforeコールバックを使用して、 xhrオブジェクトをそのまま変更することができます。 このコールバックは、全てのパラメータを設定した後、 リクエストの直前に呼び出されます。

デモ

"PUSH"ボタンを押すと、 console.logに'Done! Thanks, Umbrella!!'と出力します。

JavaScript

u('#demo button').on('click', function() {
  var action = '../json/data_ajax.php';
  var options = {
    method: 'POST',
    body: 'msg=Umbrella!!',
  };
  var after = function(err, data){
    console.log('Done! Thanks, ' + data.msg);
  };
  var before = function(xhr){};
  ajax(action, options, after, before);
});

HTML

<form id="demo">
  <button type="button">PUSH</button>
</form>

PHP

<?php
header('Content-Type: application/json');
echo json_encode(array('name' => 'Umbrella!!'));
exit;