Ajaxのプロトコルではまった件
▲jQueryのajax()のurlパラメータに自分のホストの傘下を指定した。
現在ページのURLのプロトコルがhttpsでもhttpでも、ajaxの送信プロトコルがhttpになってしまい、httpsからアクセスしたときにブラウザの下記エラーが出る。
Mixed Content: The page at 'https://XXX' was loaded over HTTPS,
but requested an insecure script 'http://XXX.
This request has been blocked; the content must be served over HTTPS.
→ホスト傘下を指定した場合にちゃんとホストの通りのプロトコルを選んでほしい。
→もしくはhttpを呼んでもエラーが出ないようにしてほしい。
https://tea-leaves.jp/home/ja/article/1375702709
①CORS(Cross-Origin Resource Sharing)を使うことで回避
サーバ側に、以下のような通信を許可するHTTPヘッダを返すようにします。
Access-control-allow-origin: http://〜(接続元ドメインまたは、全てのサイトから許可する場合はhttpすら書かずに「*」)
②IE8、IE9では効果なしなので、下記もやる
iframeを使ってhttpsのページを読み込みそこから通信、フレーム間はpostMessageを使ってやり取り。→面倒くさすぎる!!
〇javascriptで現在のページのURLを取得する方法一覧
http://www.htmq.com/js/location_host.shtml
〇ajax通信の返り値について
https://qiita.com/otsukayuhi/items/31ee9a761ce3b978c87a
第一引数dataはjqXHRオブジェクトのresponseJsonプロパティ値と同じものです。
第二引数textStatusは、通信の結果により、success, notmodified, nocontent, error, timeout, abort, parsererrorのどれかが返る。
第三引数jqXHRオブジェクトは、XMLHttpRequestオブジェクトのこと。つまり、クライアントとサーバー間とをやり取りするための情報?のこと。
〇ajax()メソッドのサンプル
$.ajax({
url:"http://httpbin.org/post",// 通信先のURL
/* 同一ホスト内のルートからのパスで指定するときは先頭を"/"にします。
先頭が"/"でない場合は、現在のURLからの相対パスになります。
https://qa.atmarkit.co.jp/q/4767
*/
type:"POST", // 使用するHTTPメソッド
data:$("#form1").serialize(), // 送信するデータ
dataType:"json", // 応答のデータの種類 // (xml/html/script/json/jsonp/text)
timespan:1000 // 通信のタイムアウトの設定(ミリ秒)
}).done(function(data1,textStatus,jqXHR) {
$("#span1").text(jqXHR.status); //例:200
$("#span2").text(textStatus); //例:success
}).fail(function(jqXHR, textStatus, errorThrown ) {
$("#span1").text(jqXHR.status); //例:404
$("#span2").text(textStatus); //例:error
$("#span3").text(errorThrown); //例:NOT FOUND
}).always(function(){
$("#span6").text("complete");
});
〇ファイルパスについて(知らなかった「サイトルート相対パス」!!!)
=相対URI(相対URL)