XHR2はJSONPと比べてどんなメリットがあるんだろうか？
JSONPで行っている事は、外部のJavascriptを読み込んでいることに他ならず、不用意に利用することは大変危険な行為です。
徹底解説 HTML5 APIガイドブック コミュニケーション系API編まぁ、JSONPはハック色が強いですからね。
というわけで、クロスドメイン間で通信ができるというXHR2を試してみた。
サーバーのコード
ログ見てわかったんだがPOSTメソッドの時はOPTIONSで問い合わせないっぽい。なのでコメントアウトしても動いた。Access-Control-Allow-Originは必須で、コレがないと動かない。
from flask import Flask, make_response, request app = Flask(__name__) app.debug = True #@app.route('/events', methods=['OPTIONS']) #def view_events(): # response = make_response() # response.headers['Access-Control-Allow-Origin'] = '*' # return response @app.route('/events', methods=['POST']) def show_events(): u = request.form['username'] p = request.form['password'] response = make_response("user: %s, pass: %s" % (u, p)) response.headers['Access-Control-Allow-Origin'] = '*' return response if __name__ == '__main__': app.run(host='www.kzfmix.com')
クライアントのコード
普通にXMLHttpRequestをnewしてPOSTメソッドでsendする
<!DOCTYPE html> <html> <head> <title>xhr2 test</title> </head> <body> <script> document.addEventListener("DOMContentLoaded", function(){ var formData = new FormData(); formData.append('username', 'myuser'); formData.append('password', 'mypass'); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://www.kzfmix.com:5000/events"); xhr.send(formData); xhr.onerror = function(e) { console.log("ERROR"); console.log(e); } xhr.onload = function(e) { console.log("LOAD"); console.log(e); console.log(xhr.status); console.log(xhr.statusText); console.log(xhr.responseText); alert(xhr.responseText); } }, false); </script> </body> </html>
実行結果
異なるドメイン（オリジン）間でデータの受け渡しが出来てる
$ python xhr2.py * Running on http://www.kzfmix.com:5000/ * Restarting with reloader... 124.41.xx.xxx - - [26/Jul/2011 19:23:51] "POST /events HTTP/1.1" 200 - 124.41.xx.xxx - - [26/Jul/2011 19:24:04] "POST /events HTTP/1.1" 200 -