チェ・ゲバムラの日記

脱犬の道を目指す男のブログ

【JS】jQueryでAjaxを実装〜JavaScript本格入門 Chapter9〜

汎用的なAjax実装 $.ajaxメソッド

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(
    function (){
        $('#btnsend').click(
            //通信開始時にメッセージ表示
            $('#result').html('通信中.....');

            //Ajax通信開始
     		$.ajax({
        		  url:'yahooJson.php',
        		  type:'GET',
        		  dataType:'json',
        		  //フォーム内容ハッシュ変換
    		 data:$('form').serializeArray(),
        		     timeout:5000,
        		     //通信成功
        		     success:function(data){
        		        $('#result').empty();
        		            for(var i = 0; i < data.Result.length; i++){
        		               $('#result').append(
        		                   $('<li></li>').append(
        		                        $('<a></a>')
        		                            .attr('href', data.Result[i].ClickUrl)
        		                            .html(data.Result[i].Title)
    		        			)
    		        		 );
    		     			}
        		     },
        		     //エラー時
        		     error:function(){
        		        $('#result').html('サーバーエラー発生');
        		     }
        		});
        );
    }
);
</script>


主な$.ajaxパラメータ
url
type
dataType
data
complete
error
success
timeout
jsonp
cache
など