原生Ajaxパッケージエッセイ

XMLHttpRequestオブジェクトは、サーバとデータを交換するために使用されます.XMLHttpRequestオブジェクトのopen()とsend()メソッドを使用します.
open(method,url,async)
method:リクエストのタイプ;GETまたはPOST
url:サーバ上のファイルの場所
async:true(非同期)またはfalse(同期)
 
send(string)
string:POST要求のみ
注意:HTMLフォームのようなPOSTデータが必要な場合は、setRequestHeader()を設定してHTTPヘッダを追加し、send()メソッドで送信するデータを指定します:XMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");例は、以下のコード58行に示す.
 

 1 var Factory = {
 2     create: function() {
 3         return function() { this.init.apply(this, arguments); }
 4     }
 5 }
 6 
 7 var Ajax = Factory.create();
 8 
 9 Ajax.prototype = {
10     init: function (successCallback, failureCallback) {
11         this.xhr = this.createXMLHttpRequest();
12         var xhrTemp = this.xhr;
13         var successFunc = null;
14         var failFunc = null;
15 
16         if (successCallback != null && typeof successCallback == "function") {
17             successFunc = successCallback;
18         }
19 
20         if (failureCallback != null && typeof failureCallback == "function") {
21             failFunc = failureCallback;
22         }
23 
24         this.get.apply(this, arguments);
25         this.post.apply(this, arguments);
26 
27         this.xhr.onreadystatechange = function () {
28             if (xhrTemp.readyState == 4) {
29                 if (xhrTemp.status == 200) {
30                     if (successFunc != null) {
31                         successFunc(xhrTemp.responseText, xhrTemp.responseXML);
32                     }
33                 }
34                 else {
35                     if (failFunc != null) {
36                         failFunc(xhrTemp.status);
37                     }
38                 }
39             }
40         }
41     },
42     get: function (url, async) {
43         this.xhr.open("GET", url, async);
44         this.xhr.send();
45     },
46     createXMLHttpRequest: function () {
47         if (window.XMLHttpRequest) {
48             return new XMLHttpRequest();
49         }
50         else {
51             return new ActiveXObject("Microsoft.XMLHTTP");
52         }
53 
54         throw new Error("Ajax is not supported by the browser!");
55     },
56     post: function (url, data, async) {
57         this.xhr.open("POST", url, async);
58         this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
59         this.xhr.send(data);
60     },
61     random: function (length) {
62         var array = new Array("0", "1", "2", "3", "5", "6", "7", "8", "9");
63         var len = parseInt(length);
64         var key = "";
65 
66         for (var i = 0; i < len; i++) {
67             key += Math.floor(Math.random() * 10);
68         }
69 
70         return key;
71     }
72 }

 
GETとPOSTの方法では以下のように使用される.

       function get() { 
            var ajax = new Ajax(success,fail);
            ajax.get("Scripts/Util.js", true);
        }

        function post() {
            var ajax = new Ajax(success, fail);
            ajax.post("AjaxService.asmx/GetArgs","name=jasen", true);
        }
         
        function success(responseText, responseXML) {
            alert("result:" + responseText);
        }

        function fail(status) {
            alert("status:" + status);
        }

 
以上は随筆の練習にすぎず、参考までに...