Question

当我点击测试按钮时，我没有得到任何结果，也没有任何错误。正如你可以看到我在javascript方面非常初学者。你会推荐什么解决方案，所以我可以写这个＆＃34; class＆＃34;为了工作？我希望它更像jQuery ajax调用$ .ajax（{}）; ......

var Ajax = function(){

        this.method = null;
        this.url = null;
        this.headerType = null;
        this.data = null;

        function request (callback) {
            var xml = new XMLHttpRequest();

            xml.open(this.method, this.url, true);
            xml.setRequestHeader(this.headerType || "Content-type", "application/x-www-form-urlencoded");

            xml.onreadystatechange = function() {
                if(xml.readyState == 4) {
                    if(xml.status == 200) {
                        callback(xml.responseText);
                    }
                }
            }
            xml.send(this.data || null);
        }
    }

document.getElementById('test').addEventListener('click', function() {
        Ajax({
            method : 'GET',
            url : 'test.php',
            request : function(response) {
                document.getElementById('testResult').innerHTML =  response;
            }
        });
    });

谢谢

编辑：这是html代码

<button id="test">Get data</button>
<div id="testResult"></div>

Answer 1

这样的事情会让你朝着正确的方向前进;我没有测试过这个，但它应该有用......祝你好运！

var Ajax = function(options){
    var method = options.method || null,
        url = options.url || null,
        headerType = options.headerType || null,
        data = options.data || '',
        request = options.request || null; // callback function

    var _request = function(callback) {
        var xml = new XMLHttpRequest();

        xml.open(method, url, true);
        xml.setRequestHeader(headerType || "Content-type", "application/x-www-form-urlencoded");

        xml.onreadystatechange = function() {
            if(xml.readyState == 4) {
                if(xml.status == 200) {
                    callback(xml.responseText);
                }
            }
        }
        xml.send(data || null);
    }

    _request(request);
}

Answer 2

您需要了解您对Ajax()的呼吁。通过将{}与属性一起使用，您将对象文字作为参数传递给函数。因此，您需要函数内部的一些代码来捕获参数并设置属性。

捕获参数和选项后，需要调用request()函数，并将其传递回调选项。

您在函数中使用this是不正确的，因为您没有使用任何上下文调用该函数，因此它将引用window对象，随后将使您的变量成为全局变量（和做window.method = null一样。

    var Ajax = function(customOptions){

        var options = {
            method : null,
            url : null,
            headerType : null,
            data : null,
            request : function(){ }
        };

        // override the defaults
        options = merge_options(options, customOptions); // see note below

        // call the request() function
        request(options.request);

        // modified below to use options.x not this.x
        function request (callback) {
            var xml = new XMLHttpRequest();

            xml.open(options.method, options.url, true);
            xml.setRequestHeader(options.headerType || "Content-type", "application/x-www-form-urlencoded");

            xml.onreadystatechange = function() {
                if(xml.readyState == 4) {
                    if(xml.status == 200) {
                        options.callback(xml.responseText);
                    }
                }
            }
            xml.send(options.data || null);
        }
    }

注意：在上文中，merge_options()不是内置函数，您可以在this answer中找到它的来源，如果您想使用它，则必须包含它。

Answer 3

好吧，或者让它成为一个为参数提供confuguration对象的函数：

function Ajax(config) { 
    if(config==null)
      ERROR!
    if(config.method == null)
      config.method = "GET";
    ... check the values and use default or throw errors
    function request (callback) {
        var xml = new XMLHttpRequest();

        xml.open(config.method, config.url, true);
        .... and so on
    }

}

或者让它真正成为OOP（保持'class'相同并使用它如下）：

var ajax = new Ajax();
ajax.method = "GET"
...
ajax.send();

//Only change to the class
function Ajax() {
   ... keep the former script
   this.send = function() {
       request();  //That is the function you defined, remember?
   }

为什么this.send？因为在伪类中使用var和function定义的任何内容都无法从外部访问。

javascript类的一般概念是：

function Class(construct_argument1) {
    //refference to this for private and anonymous functions
    var _this = this;    //The underscore means nothing. It could be as well 'that' or anything you like
    var private_variable;
    function privateMethod() {
        private_variable = _this.public_variable;
    }
    this.publicMethod = function() {
        alert("Private variable value: "+private_variable);
    }
    this.public_variable = null;
 }
 //For classes with many instances, it's good to define methods in prototype
 //These methods, however, have no private access
 Class.prototype.methodThatDoesntEatAllRam = function() {};

Answer 4

您是否在标签上尝试了onclick功能？

<button id="test" onclick="javascript:alert('hello world')">

你可以调用任何javascript函数。

Javascript覆盖对象属性

4 个答案: