Passing a function to a variable

I'm trying to pass a function to variable (req):

var req;
$('#complete-field').bind('keyup', function() { 
var url =  prefixUrl + escape($('#complete-field').val());
req = function() {
  if (window.XMLHttpRequest) {
    if (navigator.userAgent.in开发者_运维问答dexOf('MSIE') != -1) {
        isIE = true;
    }
    return new XMLHttpRequest();

    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
};

req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null); 
});

But i always get the following error:

req.open is not a function req.open("GET", url, true);

Any Idea how to solve this pls. Many thanks

You should name your function and call it ..

var req;
$('#complete-field').bind('keyup', function() { 
var url =  prefixUrl + escape($('#complete-field').val());

function ajaxObject() {
  if (window.XMLHttpRequest) {
    if (navigator.userAgent.indexOf('MSIE') != -1) {
        isIE = true;
    }
    return new XMLHttpRequest();

    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
};

req = ajaxObject();
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null); 
});

Your code would store the entire function to the req variable.. not its returned value (it was never called in the first place..)

Your req variable refers to a function. This means you can invoke it using parentheses, as in

req()

The result will be an XmlHttpRequest, which you can then call open and other functions on.

Also, be aware that it looks like you're trying to reinvent the wheel here, jquery already supports cross-browser XHR through $.ajax and similar APIs.

You need to write req() instead of just req., because so you execute req which will return you object you need:

var request = req();
request.open("GET", url, true);
request.onreadystatechange = callback;
request.send(null); 

You want to execute the function and save the result to the variable:

req = (function() {
  if (window.XMLHttpRequest) {
    if (navigator.userAgent.indexOf('MSIE') != -1) {
      isIE = true;
    }
    return new XMLHttpRequest();

  } else if (window.ActiveXObject) {
      isIE = true;
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
})();

At the point you call req.open() the variable req contains a function, not an XMLHTTP object. The function has not yet been executed.

To execute the function as it's declared, add () to the end.

req = function() {
    ...
}();

You are putting the reference to the function in the variable all right. Using this:

var req;
req = function() {
  ...
}

is basically the same as:

function req() {
  ...
}

(The scope will of course differ in this case, as you declared the variable outside the event hander.)

The problem is with how you use the function. The function and it's return value are not the same, you have to call the function to get the return value:

var xhr = req();

Now you can use the return value:

xhr.open("GET", url, true);
xhr.onreadystatechange = callback;
xhr.send(null);

I use this for native AJAX:

(window.ActiveXObject) ? httpRequest = new ActiveXObject("Microsoft.XMLHTTP") : httpRequest = new XMLHttpRequest();  


httpRequest.open('POST', 'btAppendX.php', true);    
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
httpRequest.onreadystatechange =  function () { (httpRequest.readyState == 4 && httpRequest.status == 200) ? responseData(httpRequest) : window.status = httpRequest.statusText;}                                     
httpRequest.send(zAllInOne);

compressed ...