编写复杂的 XMLHTTPRequest

Question

我有一个如下所示的 ajax 请求：

$.ajax({
    url: 'https://api.imgur.com/3/image',
    type: 'post',
    headers: {
        Authorization: 'Client-ID XXXXXX'
    },
    data: {
        image: img,
        title: 'test'
    },
    dataType: 'json',
    success: function(response) {
        if(response.success) {
            url = response.data.link;
            return url;
        }    
    }
});

但是，这取决于 jQuery。我想知道如何编写一个纯 javascript 实现。

到目前为止，我有以下代码，但我不确定下一步该做什么......

xmlhttp.open("POST","https://api.imgur.com/3/image",true);
xmlhttp.setRequestHeader("Content-type","application/json");

如何将数据和回调集成到其中？

谢谢

Answer 1

数据进入发送。通过监听 onreadystatechange 事件处理回调。t

xmlhttp.onreadystatechange = 函数（）{ // 就绪状态 // 0: 请求未初始化 // 1: 服务器连接建立 // 2: 收到请求 // 3：处理请求 // 4: 请求完成并准备好响应 如果（xmlhttp.readyState === 4）{ 如果（xmlhttp.status ===200）{ // 成功 } 否则如果（xmlhttp.status === 404）{ // 未找到等 } } }; // 发送数据 xmlhttp.send(数据);

Answer 2

使用xmlhttp.send(data) 发出请求，使用xmlhttp.readystatechange 处理加载。像这样的：

xmlhttp.onreadystatechange = function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
  alert("loaded");
 }
}

xmlhttp.send({
    image: img,
    title: 'test'
}); // data here

Answer 3

这是从您的 jQuery 代码到纯 JavaScript 的完整转换。

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var response = JSON.parse(xmlhttp.responseText);
        if(response.success) {
            var url = response.data.link;
            // do something with url
        } 
    }
};

xmlhttp.setRequestHeader("Authorization","Client-ID XXXXXX");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.open("POST","https://api.imgur.com/3/image",true);
xmlhttp.send('img=' + encodeURIComponent(img) + '&title=' + encodeURIComponent('test'));

注意事项：

• 您没有发送 JSON，所以不要设置 JSON 的内容类型。 Content-type 标头是指您发送的数据，而不是您收到的数据。因为您发送的是 URL/表单编码的键值对，所以您应该将 Content-type 设置为 application/x-www-form-urlencoded。

• 您的 jQuery 发送一个授权请求标头，您需要使用 setRequestHeader() 将其包含在内。

• 将 jQuery 数据类型设置为 json 意味着 jQuery 将自动解析 JSON。纯 JavaScript 不会这样做，因此您需要使用 JSON.parse() 手动解析。

• 要发送 POST 数据，您必须将字符串传递给 send()。它不接受像 jQuery 那样的普通对象，您需要自己进行格式和编码记住在值周围使用encodeURIComponent()，以防止特殊字符破坏 URL 编码格式。如果你想在一个对象中定义你的 POST 数据，那么你可以使用this answer 中的函数，它将一个普通的对象转换为 URL 编码的键/值对。

• 您在 jQuery 成功处理程序中使用了 return url，这不会做任何事情。 ajax 是异步的，因此您无法从成功处理程序返回，因为在收到响应之前，启动请求的代码早就完成了。

• 在上面的例子中我直接调用XMLHttpRequest()来获取对象。如果你想跨浏览器，你应该像this question一样创建它。原因是 Internet Explorer 使用了 ActiveX 对象（尽管用法与 XMLHttpRequest 相同）。

Answer 4

假设您有充分的理由这样做，例如您无法控制添加对 jquery 在您的应用程序中，本教程可能会有所帮助吗？

http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

这是教程的摘录：

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;