【JavaScript】jQuery

ajaxを途中で止める

概要

Ajax通信を途中で止めたい場合

スクリプト

Ajax通信を変数「request」

jQuery

request = $.ajax({
  url: xxx.xml,
  type: "GET",
  dataType: "xml",
  timeout: 10000,
  cache: false,
  error: function(){
    // 失敗したとき
  },
  success: function(xml){
    // 成功したとき
  }
});

停止方法

停止したい場合「request」をabort

request.abort();

---

Ajaxで画像アップロード

jQueryのAjaxで画像をアップロードする場合

使用方法

var formData = new FormData( $('form')[0] );
var url = 'test_api.php';

var opt = {
    type: 'POST',
    url: url,
    dataType: 'json',
    timeout: 10000,
    cache: false,
    data: formData,
    processData: false,// Ajaxがdataを整形しない指定
    contentType: false // contentTypeもfalseに指定
};

$.ajax(opt).done(function (response, textStatus, jqXHR) {
    //通信が成功したとき
}).fail(function (jqXHR, textStatus, errorThrown) {
    //通信に失敗したとき
}).always(function (jqXHR,json) {
    //通信が完了したとき
});

解説

jQueryのAjax通信する場合、jQueryがPOSTデータを整形するため、整形しない設定にする必要があります。

---

要素が削除された時のカスタムイベント

概要
jQueryで要素が削除された時にイベントを発火させる

スクリプト
** JavaScript **

(function($){
    ////////////
    $.event.special.onremove = {
        remove: function(o) {
            if (o.handler) {
                o.handler.apply(this, arguments);
            }
        }
    };
})(jQuery);

使用方法

$(element).on('onremove',function(e){
    //要素が削除されたあとの処理
});

---

jQueryとprototypeの両方を使う時にやるべきこと

概要

jQuery.jsとprototype.jsの両方をサイトで使用している場合
jQuery側の「$」関数を別の名前にする

jQuery.noConflict();
var j$ = jQuery;

使用方法

j$(function(){
    //処理
});

---

カスタムイベント

概要

jQueryでカスタムイベントを使用する場合

スクリプト

「customEvent」というイベントを作成しましす。

//イベント設定
$(window).on('customEvent', function() {
  //イベント処理
});

//発火
$(window).trigger('customEvent');