セキレイブログ

実のところAjaxしないことには、Pythonを使っている意味が半減です。

なので、試してみました。

しかもJQueryを使わないでやってみるという。

CORSの対応が必要かと思いgetCookieなども書いてありますが、GETリクエストの時には結局必要ありませんでした。

<div id="aiXhrTitle">AI-XHR div</div>
　<br>
　<input type="text" id="aiXhrInputText" >
　<button id="aiXhrButton" onclick="requestAiXhr(document.getElementById('aiXhrInputText').value, true );">
　</button>
<script>
　function getCookie(name) {
　var cookieValue = null;
　if (document.cookie && document.cookie !== '') {
　　var cookies = document.cookie.split(';');
　　for (var i = 0; i < cookies.length; i++) {
　　　var cookie = cookies[i].trim();
　　　// Does this cookie string begin with the name we want?
　　　if (cookie.substring(0, name.length + 1) === (name + '=')) {
　　　　cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
　　　　 break;
　　　}
　　}
　}
　return cookieValue;
}
var csrftoken = getCookie('csrftoken');

function createHttpRequest(){
　 request = new XMLHttpRequest();
　return request;
}
function on_responseAiXhr(obj){
　 text = obj.responseText;
　var target = document.getElementById('aiXhrTitle');
　target.innerHTML = text;
}

function requestAiXhr( alfaName, async ){
　var params='alfaName='+alfaName;
　var vurl = "/aixhr/";
　var httpoj = createHttpRequest();
　httpoj.open( 'GET' , vurl , async );
　//httpoj.setRequestHeader("X-CSRFToken", csrftoken);

　httpoj.onreadystatechange = function() {
　　if (httpoj.readyState==4) {
　　　on_responseAiXhr(httpoj);
　　}
　}
　httpoj.send();
}
</script>

このコードをコンテンツの中のRESPONSIVE GRID ROWーCOLUMNーHTMLの中にベタで書きました。

ajaxのリクエストを受ける側は、CodeRedCMSのプロジェクトフォルダの中に、生dangoでアプリケーションを用意してみました。

以下のような感じ。

$ python manage.py startapp aixhr

でアプリケーションを用意して/aixhr/views.pyでは以下のように単純に文字を返します。

from django.http import HttpResponse

def index(request):
return HttpResponse("Hello, world. Trial to XHR.")

まだこのサンプルには実装していないので、近いうちに。

>> サンプル作成中　

　上部メニューのXHRトライアルからはいると文字を ボタン状のHTML部品に差し変えるものを取りあえず実装。