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

使用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 2

数据进入发送。通过监听onreadystatechange even.t

来处理回调

xmlhttp.onreadystatechange = function(){

   // Ready states
   // 0: request not initialized 
   // 1: server connection established
   // 2: request received 
   // 3: processing request 
   // 4: request finished and response is ready

   if (xmlhttp.readyState === 4) {

         if(xmlhttp.status ===200){
            // Success
         }
         else if(xmlhttp.status === 404){
            // Not found etc.
         }
   }
};

// Send Data

xmlhttp.send(data);

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标头是指您发送的数据，而不是您收到的数据。由于您要发送网址/表单编码的键值对，因此应将内容类型设置为application/x-www-form-urlencoded。
您的jQuery会发送一个授权请求标头，您需要使用setRequestHeader()包含该标头。
将jQuery dataType设置为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;

编写复杂的XMLHTTPRequest

4 个答案: