如何手动创建ajax请求？ [关闭]答案

【问题标题】：How create ajax request manually? [closed]如何手动创建ajax请求？ [关闭]
【发布时间】：2012-05-08 10:32:23
【问题描述】：

我需要发送请求到操作/Home/Start

在元素 id 'js_script' 中设置响应。

我找不到怎么做。

【问题讨论】：

为什么说手动？从asp还是从javascript？你也可以使用像 jQuery 这样的库吗？
当我在 JavaScript 中遇到问题时，我不会通过在线查找来“找到”解决方法，而是找出解决方法。可悲的是，绝大多数 JS 程序员都懒得这样做，而是使用 jQuery。
@Kolink 使用 jQuery 进行 AJAX 并不懒惰 - 它消除了浏览器的不兼容性并添加了非常有用的功能，例如“延迟对象”。
@Kolink - 我理解你的立场，这当然是学习新技能的最佳方式，但我们中的许多人都有截止日期。
@简单：请把孩子气留在家里，Stack Overflow上没有它的容身之地。我已经删除了您添加到问题中的抱怨。人们无法帮助您解决问题的原因是问题不清楚。提出一个明确的问题 - 努力工作 - 你会在这里找到一群非常乐于助人的人。

标签： javascript ajax asp.net-mvc

【解决方案1】：

我不得不猜测您的意思，但基本上，您使用 XMLHttpRequest object 来执行 ajax 请求。这是微软的一项创新，其他浏览器已经采用，现在正处于标准化过程中。在现代浏览器中看起来像这样：

function sendRequest() {
    var request = new XMLHttpRequest();
    request.open('GET', '/Home/Start', false);
    request.onreadystatechange = handleStateChange;
    request.send(null);

    function handleStateChange() {
        if (request.readyState === 4) {
            // The request is complete; did it work?
            if (this.status >= 200 && this.status < 300) {
                // Yes, you can use the data on request.responseText
                // or (for requests with XML replies) request.responseXML

                // In our case, let's say we want to put all of the text
                // into the element with the `id` "js_script":
                var elm = document.getElementById("js_script");
                elm.innerHTML = request.responseText;
            }
        }
    }
}

这显然是相当简化的。在旧浏览器上，您必须围绕创建对象进行一些检查（例如，new XMLHttpRequest 不适用于 IE7，但有一些方法可以在 IE7 上实现。）

在旧浏览器上创建对象的复杂性是我推荐使用任何像样的 JavaScript 库（如 jQuery、Prototype、YUI、Closure 或 any of several others）的众多原因之一。它们为您消除浏览器差异，添加许多实用功能，让您专注于完成特定任务，而不是担心（比如说）HTTP 状态代码。这并不是说没有图书馆就没有时间和地点——当然有——只是通常情况下，一个人在别人的工作上比完全靠自己工作更有效率。

【讨论】：

【解决方案2】：

如果您想要的只是一个基本请求，那么您无需任何库即可轻松完成，这里提供的函数http://www.quirksmode.org/js/xmlhttp.html

function sendRequest(url,callback,postData) {
    var req = createXMLHTTPObject();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
//          alert('HTTP error ' + req.status);
            return;
        }
        callback(req);
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

var XMLHttpFactories = [
    function () {return new XMLHttpRequest()},
    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
    var xmlhttp = false;
    for (var i=0;i<XMLHttpFactories.length;i++) {
        try {
            xmlhttp = XMLHttpFactories[i]();
        }
        catch (e) {
            continue;
        }
        break;
    }
    return xmlhttp;
}

【讨论】：