当前位置：文江博客话题详情

没有框架的javascript ajax请求

发布于 2024-11-05 03:40:03 字数 62 浏览 0 评论 0原文

有谁知道如何在不使用 jQuery 等 javascript 框架的情况下制作跨浏览器的 ajax 请求功能？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无所的.畏惧 2024-11-12 03:40:03

XMLHttpRequest 对象实际上使用起来并不那么复杂。为了广泛兼容，您必须玩一些游戏来创建对象，但之后的简单操作就相当简单了。

Microsoft 在 MSDN 页面上提供了 的示例XMLHttpRequest，包括一个以跨浏览器方式创建对象的函数，支持早期版本的IE。这是他们的例子：

function getXMLHttpRequest() 
{
    if (window.XMLHttpRequest) {
        return new window.XMLHttpRequest;
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            return null;
        }
    }
}

function handler()
{
    if (oReq.readyState == 4 /* complete */) {
        if (oReq.status == 200) {
            alert(oReq.responseText);
        }
    }
}

var oReq = getXMLHttpRequest();

if (oReq != null) {
    oReq.open("GET", "http://localhost/test.xml", true);
    oReq.onreadystatechange = handler;
    oReq.send();
}
else {
    window.alert("AJAX (XMLHTTP) not supported.");
}

我并不是说上面的例子是最佳实践（微软的 MSDN 例子似乎主要是由非常非常缺乏经验的工程师编写的），但它给了你一个起点。例如，上面要求响应状态为 200 才算成功，当然 HTTP 规范明确规定 200 <= n <= 299 范围内的任何内容都是“成功”。

The XMLHttpRequest object isn't actually all that complicated to use. To be broadly compatible, you have to play a bit of a game to create the object, but after that it's fairly straightforward for simple operations.

Microsoft has examples on the MSDN page for XMLHttpRequest, including a function for creating the object in a cross-browser way that supports early versions of IE. Here's their example:

function getXMLHttpRequest() 
{
    if (window.XMLHttpRequest) {
        return new window.XMLHttpRequest;
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            return null;
        }
    }
}

function handler()
{
    if (oReq.readyState == 4 /* complete */) {
        if (oReq.status == 200) {
            alert(oReq.responseText);
        }
    }
}

var oReq = getXMLHttpRequest();

if (oReq != null) {
    oReq.open("GET", "http://localhost/test.xml", true);
    oReq.onreadystatechange = handler;
    oReq.send();
}
else {
    window.alert("AJAX (XMLHTTP) not supported.");
}

I'm not suggesting the above exemplifies best practices (Microsoft seems to have their MSDN examples largely written by very, very inexperienced engineers), but it gives you a starting point. For instance, the above requires that the response status be 200 for success, where of course the HTTP specification is clear that anything the 200 <= n <= 299 range is "success".

回复收藏 0 原文

陪我终i 2024-11-12 03:40:03

我经常使用这种方法在现代浏览器中仅发送和接收 json （没有旧的 ie 浏览器）

function aj(method, url, data, cb){

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = readystatechange;
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(data && JSON.stringify(data));

    function readystatechange(){
        if(this.readyState === this.DONE) {

            switch(this.status){
                case 200:
                if(this.getResponseHeader('Content-Type').split(';')[0] !== 'application/json'){
                    return cb("unexpected Content-Type: '" + this.getResponseHeader('Content-Type') + "'", null);
                }
                return cb(null, JSON.parse(this.response));

                case 401:
                location.href = '/authentication/login';
                return;

                default:
                return cb("unexpected status: " + this.status + "", null);
            }
        }
    }//readystatechange
}

i often use this method for sending and receiving only json in modern browsers (no old-ie's)

function aj(method, url, data, cb){

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = readystatechange;
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(data && JSON.stringify(data));

    function readystatechange(){
        if(this.readyState === this.DONE) {

            switch(this.status){
                case 200:
                if(this.getResponseHeader('Content-Type').split(';')[0] !== 'application/json'){
                    return cb("unexpected Content-Type: '" + this.getResponseHeader('Content-Type') + "'", null);
                }
                return cb(null, JSON.parse(this.response));

                case 401:
                location.href = '/authentication/login';
                return;

                default:
                return cb("unexpected status: " + this.status + "", null);
            }
        }
    }//readystatechange
}

回复收藏 0 原文

~没有更多了~