Conception de classe AJAX

**Bouki** · 06/04/2008, 20h04

Bonjour
J'ai passé l'après-midi dessus mais je ne trouve pas l'erreur dans ce code

la requête se déroule correctement, cependant la réponse n'est pas intercepté par le javascript

un debuggage sous firebug n'a rien donné, je sèche...

AJAX.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var AJAX = function(_call, _method, _synchronous, _response, _wait)
{
 
    if (_method != "GET" && _method != "POST")
    {
        _method = "GET";
        window.alert("Invalid method received (should be GET or POST)"); 
    }
 
    this.call = _call;
    this.method = _method;
    this.parameters = new Array();
    this.numberParameters = 0;
    this.object = false;
    this.synchronous = _synchronous;
    this.divWait = _wait;
    this.divResponse = _response;
 
    if (window.XMLHttpRequest)
    {
        this.object = new XMLHttpRequest();
    }
    else if (window.ActiveXthis.object)
    {
        this.object = new ActiveXthis.object("Microsoft.XMLHTTP");
    }
    else
    {
        window.alert("Your browser does not support AJAX");
    }
 
    this.object.onreadystatechange = function ()
    {   
        if (this.object.readyState == 4)
        {
            if (this.object.status == 200)
            {
                this.divWait.innerHTML = "";
                this.divResponse.innerHTML = this.object.responseText;
                alert("cas 1");
            }
            else
            {
                this.divWait.innerHTML = "Document not found";
                alert("cas 2");
            }
        }
        else
        {
            this.divWait.innerHTML = "Step " + (this.object.readyState + 1) + " / 5<br />Loading, please wait...";    
                alert("cas 3");
        }
    }
 
}
 
AJAX.prototype.toString = function ()
{
    return "AJAX Class";
}
 
AJAX.prototype.reset = function ()
{
    this.parameters = new Array();
    this.numberParameters = 0;
}
 
AJAX.prototype.addParameter = function (_name, _value)
{
    this.parameters[this.numberParameters++] = new Array(_name, escape(_value));
}
 
AJAX.prototype.loadResponse = function (_event)
{
    if (this.method == "GET")
    {
        realCall = this.call + "?";
        for (var i = 0; i < this.numberParameters; i++)
        {
            realCall += this.parameters[i][0] + "=" + this.parameters[i][1] + "&";     
        }
        realCall = realCall.substr(0, realCall.length - 1);
        this.object.open(this.method, realCall, this.synchronous);
        this.object.send(null);
    }
    else
    {
        this.object.open(this.method, this.call, this.synchronous);
        this.object.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        
        realCall = "";
        for (var i = 0; i < this.numberParameters; i++)
        {
            realCall += this.parameters[i][0] + "=" + this.parameters[i][1] + "&";     
        }
        realCall = realCall.substr(0, realCall.length - 1);
        this.object.send(realCall);            
    }
}

page de test

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <script type="text/javascript" src="AJAX.js"></script></script>
    </head>
    <body>
        <input type="text" name="test" id = "test" onkeyup = "update();"/> 
        <div id = "content">a</div>   
        <div id = "wait">b</div>   
        <script type="text/javascript">
            a = new AJAX("AJAX.php", "GET", true, document.getElementById("content"), document.getElementById("wait"));
        function update()
        {
            a.reset();
            a.addParameter("value", document.getElementById("test").value);
            a.loadResponse();
        }
 
        </script>
    </body>
</html>

**marts** · 06/04/2008, 21h08

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
    this.object.onreadystatechange = function ()
    {
        // ici, this fait référence à cette fonction
    }

**Bouki** · 06/04/2008, 21h24

merci marts, j'ai modifié mon code en conséquence mais ca ne marche toujours pas (même erreur)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
var AJAX = function(_call, _method, _synchronous, _response, _wait)
{
 
    if (_method != "GET" && _method != "POST")
    {
        _method = "GET";
        window.alert("Invalid method received (should be GET or POST)"); 
    }
 
    this.call = _call;
    this.method = _method;
    this.parameters = new Array();
    this.numberParameters = 0;
    this.object = false;
    this.synchronous = _synchronous;
    this.divWait = _wait;
    this.divResponse = _response;
 
    if (window.XMLHttpRequest)
    {
        this.object = new XMLHttpRequest();
    }
    else if (window.ActiveXthis.object)
    {
        this.object = new ActiveXthis.object("Microsoft.XMLHTTP");
    }
    else
    {
        window.alert("Your browser does not support AJAX");
    }
 
    this.object.onreadystatechange = this.functionOnChange;
}
 
AJAX.prototype.toString = function ()
{
    return "AJAX Class";
}
 
AJAX.prototype.functionOnChange = function ()
{   
    if (this.object.readyState == 4)
    {
        if (this.object.status == 200)
        {
            this.divWait.innerHTML = "";
            this.divResponse.innerHTML = this.object.responseText;
            alert("cas 1");
        }
        else
        {
            this.divWait.innerHTML = "Document not found";
            alert("cas 2");
        }
    }
    else
    {
        this.divWait.innerHTML = "Step " + (this.object.readyState + 1) + " / 5<br />Loading, please wait...";    
            alert("cas 3");
    }
}
 
AJAX.prototype.reset = function ()
{
    this.parameters = new Array();
    this.numberParameters = 0;
}
 
AJAX.prototype.addParameter = function (_name, _value)
{
    this.parameters[this.numberParameters++] = new Array(_name, escape(_value));
}
 
AJAX.prototype.loadResponse = function (_event)
{
    if (this.method == "GET")
    {
        realCall = this.call + "?";
        for (var i = 0; i < this.numberParameters; i++)
        {
            realCall += this.parameters[i][0] + "=" + this.parameters[i][1] + "&";     
        }
        realCall = realCall.substr(0, realCall.length - 1);
        this.object.open(this.method, realCall, this.synchronous);
        this.object.send(null);
    }
    else
    {
        this.object.open(this.method, this.call, this.synchronous);
        this.object.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        
        realCall = "";
        for (var i = 0; i < this.numberParameters; i++)
        {
            realCall += this.parameters[i][0] + "=" + this.parameters[i][1] + "&";     
        }
        realCall = realCall.substr(0, realCall.length - 1);
        this.object.send(realCall);            
    }
}

**marts** · 06/04/2008, 23h55

Une solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
    var caller=this;
    this.object.onreadystatechange = function ()
    {   
        if (caller.object.readyState == 4)
        {
            if (caller.object.status == 200)
            {
                caller.divWait.innerHTML = "";
                caller.divResponse.innerHTML = caller.object.responseText;
                alert("cas 1");
            }
            else
            {
                caller.divWait.innerHTML = "Document not found";
                alert("cas 2");
            }
        }
        else
        {
            caller.divWait.innerHTML = "Step " + (caller.object.readyState + 1) + " / 5<br />Loading, please wait...";    
                alert("cas 3");
        }
    }

Conception de classe AJAX

JavaScript

Discussions similaires

Partager

Partager