Javascript的“命名空间”和jQuery AJAX [英] Javascript 'Namespaces' and jQuery AJAX

问题描述

我在这里使用规定的建议（ HTTP：// WWW。 odeto code.com /用品/ 473.aspx ）写一个JavaScript的AJAX网络聊天系统使用模拟命名空间和原型。

在我的原型方法之一，我打电话给在 $。阿贾克斯方法的jQuery 。那么，什么我想要做的就是返回的JSON数据传递到里面我的JavaScript网上聊天命名空间的方法。

这个问题似乎是因为我创建我的JavaScript网上聊天的实例，我不能直接调用它里面的方法，因为我需要通过实例来解决这个问题。

在code以下的关键部分是

 成功：功能（数据，textStatus）{
                this.GetUpdate_Success（数据）
            }，
 

我在想，因为我们是$。阿贾克斯（）方法中，即这不再是指我们WebchatV3对象。

完整的JavaScript code如下所示：

  ///＆lt;参考路径=/ JavaScript的/ jQuery的-1.3.2-vsdoc2.js/＆GT;

//模拟命名空间
变种AvonAndSomerset = {}

//聊天室运行时数据
AvonAndSomerset.WebchatV3 =函数（会员id，通code）{
    this.Members =新的Array（）; //成员的聊天室
    this.Questions =新的Array（）; //该问题在聊天室排队

//有关当前用户的详细信息
this.currentMember =新AvonAndSomerset.WebchatV3.Member（会员id，通code，NULL，NULL，NULL，NULL，NULL）;

    //设置了AJAX的默认值
    $ .ajaxSetup（{类型：POST，则contentType：应用/ JSON的;字符集= UTF-8，数据类型：JSON}）;
}

AvonAndSomerset.WebchatV3.prototype =
{
    //从服务器获取最新成员之一，Quetsion，成绩单和房数据
    GetUpdate：函数（启动）{

        $阿贾克斯（网址：{url：JSON.aspx / Members_GetChanges
            数据：{会员id：+ this.currentMember.memberId +，通code：\+ this.currentMember.pass code +\，ReturnAll：+启动+}，
            成功：功能（数据，textStatus）{
                this.GetUpdate_Success（数据）
            }，
            错误：函数（结果）{
                警报（'Members_GetChanges（）失败：+ result.responseText）;
            }
        }）;
    }，
    //回调 - 对GetUpdate成功（）
    GetUpdate_Success：功能（数据）{
        警报（Ajax调用成功！）;
    }，
    //是否会员id当地数组中存在吗？
    Members_DoesExist：函数（会员id）{
        警报（'搜索'+会员id）;

        警报（this.Members.length）;
    }
 

解决方案

解决这个问题的最简单的方法是创建一个变量，它引用这在规定的适当范围。 这和范围不同的工作在JavaScript中那么大多数语言，在这种情况下，它指的是物体传递到函数。

  //获取最新成员之一，Quetsion，成绩单和室从服务器上的数据
GetUpdate：函数（启动）{
    //这里
    无功自我=这一点;
    $阿贾克斯（网址：{url：JSON.aspx / Members_GetChanges
        数据：{会员id：+ this.currentMember.memberId +，通code：\+ this.currentMember.pass code +\，ReturnAll：+启动+}，
        成功：功能（数据，textStatus）{
            self.GetUpdate_Success（数据）
        }，
        错误：函数（结果）{
            警报（'Members_GetChanges（）失败：+ result.responseText）;
        }
    }）;
}，
 

I'm using the recommendations laid down here (http://www.odetocode.com/articles/473.aspx) to write a JavaScript AJAX webchat system using simulated Namespacing and prototyping.

In one of my prototype methods I'm calling the $.ajax method in jQuery. What I then want to do is pass the returned JSON data into a method inside my JavaScript webchat namespace.

The problem seems to be because I've created an instance of my JavaScript webchat, I can't directly call a method inside it because I need to address it through the instance.

The key part in the code below is

            success: function(data, textStatus) {
                this.GetUpdate_Success(data)
            },

I'm thinking because we're inside the $.ajax() method, that this no longer refers to our WebchatV3 object.

The full JavaScript code is shown below:

/// <reference path="/JavaScript/jquery-1.3.2-vsdoc2.js" />

// Simulated 'namespace'
var AvonAndSomerset = {}

// Chatroom run time data
AvonAndSomerset.WebchatV3 = function(memberId, passcode) {
    this.Members = new Array(); // Members in the chatroom
    this.Questions = new Array(); // The questions queue in the chatroom

// Details about the current user
this.currentMember = new AvonAndSomerset.WebchatV3.Member(memberId, passcode, null, null, null, null, null);

    // Set-up AJAX defaults
    $.ajaxSetup({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json" });
}

AvonAndSomerset.WebchatV3.prototype =
{
    // Get latest Member,Quetsion,Transcript and Room data from server
    GetUpdate: function(StartUp) {

        $.ajax({ url: "JSON.aspx/Members_GetChanges",
            data: "{ MemberID: " + this.currentMember.memberId + ", Passcode: \"" + this.currentMember.passcode + "\", ReturnAll: " + StartUp + " }",
            success: function(data, textStatus) {
                this.GetUpdate_Success(data)
            },
            error: function(result) {
                alert('Members_GetChanges() failed: ' + result.responseText);
            }
        });
    },
    // Callback - on success of GetUpdate()
    GetUpdate_Success: function(data) {
        alert('The AJAX call was successful!');
    },
    // Does the MemberID exist in the local array?
    Members_DoesExist: function(MemberID) {
        alert('Searching for ' + MemberID);

        alert(this.Members.length);
    }

解决方案

The easiest way to fix this is to create a variable that references this at the proper scope required. this and scope work differently in javascript then most languages, in this case it is referring to the object being passed into the function.

// Get latest Member,Quetsion,Transcript and Room data from server
GetUpdate: function(StartUp) {
    //here
    var self = this;
    $.ajax({ url: "JSON.aspx/Members_GetChanges",
        data: "{ MemberID: " + this.currentMember.memberId + ", Passcode: \"" + this.currentMember.passcode + "\", ReturnAll: " + StartUp + " }",
        success: function(data, textStatus) {
            self.GetUpdate_Success(data)
        },
        error: function(result) {
            alert('Members_GetChanges() failed: ' + result.responseText);
        }
    });
},

这篇关于Javascript的“命名空间”和jQuery AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！