將ajax jquery請求更改為XMLHttpRequest

Question

我有jquery這個Ajax請求：

$(document).ready(function () {
    var pageName;

    $('li a').on('click', function (){
        pageName = $(this).attr('data-url');

        $.ajax({
            type: 'GET',
            url: 'http://mywebsite.com/' + pageName + '/?json=1',
            contentType: 'application/json',
            dataType: 'jsonp',
            success: function(data) {
                var page = data.content;
                $('.mypage').html(page);
            }
        })
    });
});

而且我想更改為XMLHttpRequest，所以我這樣做了：

function showPage () {

    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4) {
            document.getElementById('.mypage').innerHTML = httpRequest.responseText;
        }
    };

    var attr = document.getElementByTagName(this);
    var pageName = attr.getAttribute('data-url');
    var url = 'http://mywebsite.com/' + pageName + '/?json=1',

    httpRequest.open('GET', url);
    httpRequest.send();
}

它根本不起作用，有人知道我做錯了嗎？

Answer 1

這行是錯誤的：

document.getElementById('.mypage').innerHTML = httpRequest.responseText;

以開頭的選擇器. 是類選擇器，而不是ID。 它應該是：

document.getElementsByClassName('mypage')[0].innerHTML = httpRequest.responseText;

我假設您在此類中只有一個元素。 如果有多個，則需要將其更改為設置它們的循環。

但是，您不能將XMLHttpRequest與JSONP dataType一起使用。 看到

使用JsonP的JavaScript XMLHttpRequest

有關如何使用原始Javascript實現JSONP的信息。