2016-09-26 12 views
1

$ .ajaxにはbeforeSend関数がありますが、XMLHttpRequestを使用しようとしていますが、$ .ajaxのbeforeSendと同等の機能を探しています。どのように私はここにそれを実装することができます。AJAX:XMLHttpRequestのbeforeSend関数と同等の機能は何ですか?

ここに私のXHRコードがあり、

xhr = new XMLHttpRequest(); 
    var url = '../ajax/ajax_edit/update_ajax_staffUser.php'; 

    if(file.files.length !== 0){ 

     if(!check(fileUpload.type)){ 
      alert("This file format not accepted"); 
      return false; 
     } 
     xhr.open('post', url+param, true); 
     xhr.setRequestHeader('Content-Type','multipart/form-data'); 
     xhr.setRequestHeader('X-File-Name', fileUpload.name); 
     xhr.setRequestHeader('X-File-Size', fileUpload.size); 
     xhr.setRequestHeader('X-File-Type', fileUpload.type); 
     xhr.send(fileUpload); 
    }else{ 
     xhr.open('post', url+param, true); 
     xhr.setRequestHeader('Content-Type','multipart/form-data'); 
     xhr.send(fileUpload); 
    } 


    xhr.onreadystatechange = function(e){ 
     if(xhr.readyState===4){ 
      if(xhr.status==200){ 
       $('.bounce_dim').show(); 
       setTimeout(function(){ 
        $('.trigger_danger_alert_changable_success').show().delay(5000).fadeOut(); 
        $('#palitan_ng_text_success').html('User successfully modified'); 
        $('#frm_edit_staffUser')[0].reset(); 
        $('#modal_staff').modal('hide'); 
        $('.bounce_dim').hide(); 
       },1000); 
       getUserStaffTable(); 
      } 
     } 
    } 

は、ユーザーが自分のWebに画像をアップロードしているので、私は、画像のサイズが大きすぎるため、火災の前に呼び出しを待機インタフェースを作成する必要があります。

+1

beforesendは、ajax呼び出しが送信される前に実行される単なる関数です。何も特別なものではありませんか?これらのアニメーションも含め、jQueryに依存するコードの残りを取り除くことを計画していますか?そうでなければ、何がポイントですか? – adeneo

+0

いいえ、ボタンをクリックすると、画像が完全にアップロードされるまで、最初に読み込んでいるアニメーションがポップアップするはずです。何が起こるかは、ボタンをクリックすると、画像がまだアップロードされているかどうかをユーザーが特定できなくなります。また、まだ画像がアップロードされている間にユーザーが私のページ上でアクションを起こさせたくないのです。 –

+0

また、私は他の$ .ajaxコードでbeforeSendの中にアニメーションを入れています。 –

答えて

4

あなたはこのように、ちょうどあなたのXHRのintantiation前beforeSend()機能を置くことによってこれを行うことができます:

beforeSend(); 
xhr = new XMLHttpRequest(); 

しかし、あなたは上記のコードの前に、あなたのbeforeSend()関数を定義する必要があります

var beforeSend = function(){ 
    // your code here 
} 
+0

それはなぜ、ありがとう、 –

+0

あなたは大歓迎です:) – Argonic

+0

要求が同期的に行われたときには動作しません –

1

.beforeSendだけでこれだけの行の前にあなたのコードを入れて、.sendを実行する前に、関数を呼び出します。

xhr.setRequestHeader('Content-Type','multipart/form-data'); 
xhr.setRequestHeader('X-File-Name', fileUpload.name); 
xhr.setRequestHeader('X-File-Size', fileUpload.size); 
xhr.setRequestHeader('X-File-Type', fileUpload.type); 
beforeSend(); // Put any code to run before sending here 
xhr.send(fileUpload); 
+0

これは私のコードを$ .ajax beoreSendにラップすることを意味しますか? –

+1

@EchoingThroughoutTelNumaraいいえ、更新された回答を参照してください。 'beforeSend'は文字通り送信前のコードです。 – lerouche

+0

それが動作しない –

関連する問題