AJAX для повторного использования с разными данными? (NO jQuery) [дубликат]

Это функции стрелок

Также известны как функции Fat Arrow. Они представляют собой чистый и понятный способ записи функциональных выражений, например. function() {}.

Функции стрелок могут удалить необходимость function, return и {} при определении функций. [1]

var queue        = ['Dave', 'Sarah', 'Sharon'],
    nextCustomer = () => queue[0];

console.log(nextCustomer()); // 'Dave'

Пример: без параметров

var queue        = ['Dave', 'Sarah', 'Sharon'],
    nextCustomer = () => queue[0];

console.log(nextCustomer()); // 'Dave'

Если в одной и той же функции со стрелками необходимо выполнить несколько операторов, в этом примере вам нужно обернуть queue[0] в скобках кромки {}. В этом случае оператор возврата не может быть опущен.

Пример с 1 параметром

var queue       = ['Dave', 'Sarah', 'Sharon'],
    addCustomer = name => { queue.push(name) }

addCustomer('Toby');

console.log(queue); // ['Dave', 'Sarah', 'Sharon', 'Toby']

Вы можете опустить {} из приведенного выше.

Когда имеется один параметр, скобки () вокруг параметра могут быть опущены.

Пример с несколькими параметрами

var addition = (x, y) => x + y

console.log(addition(1, 5)); // 6

Полезный пример

var fruits = [
    {name: 'Apple', price: 2},
    {name: 'Bananna', price: 3},
    {name: 'Pear', price: 1}
];

Если бы мы хотели получить цену каждого плода в одном массиве, в ES5 мы могли бы сделать:

fruits.map(function(fruit) {
    return fruit.price;
}); // [2, 3, 1]

В ES6 с новыми функциями стрелок мы можем сделать это более кратким:

fruits.map(fruit => fruit.price); // [2, 3, 1]

Здесь можно найти дополнительную информацию о функциях стрелок здесь .

Совместимость браузера

  • IE: не поддерживается, но
  • Edge: 12+ (все версии)
  • Firefox: 22 +
  • Chrome: 45 +
  • Safari: 10 +
  • iOS Safari: 10.2 +
  • Android Browser: 56 +

Дополнительную актуальную информацию можно найти в совместимости с браузером здесь

647
задан T J 18 December 2015 в 11:23
поделиться

22 ответа

HTML:

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","1.php?id=99freebies.blogspot.com",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>

    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>

    </body>
    </html>

PHP:

<?php

$id = $_GET[id];
print "$id";

?>
2
ответ дан 99freebies.blogspot.com 18 August 2018 в 19:09
поделиться
  • 1
    Однострочные ifs не нужны фигурные скобки, Noone использует IE6. Вероятно, это было скопировано, использовать onload вместо onreadystatechange, ловить ошибки для возможных рекурсивных вызовов, xmlhttp - это ужасное имя переменной, просто назовите его x. – super 21 December 2015 в 11:00

Вы можете использовать следующую функцию:

function callAjax(url, callback){
    var xmlhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

Вы можете попробовать похожие решения онлайн по этим ссылкам:

89
ответ дан AbdelHady 18 August 2018 в 19:09
поделиться
  • 1
    Также было бы неплохо добавить некоторую входную переменную для запроса (будет использоваться в xmlhttp.send (request);) – Pavel Perna 18 October 2016 в 10:43
  • 2
    @PavelPerna, так как здесь приведен пример GET, поэтому вы можете просто добавить их в запрос, но чтобы быть более общим, я с вами, я действительно думал об обновлении ответа, чтобы принять параметры запроса в качестве параметра здесь функция & amp; также передать метод (GET или POST), но то, что остановило меня, заключается в том, что я хочу, чтобы ответ был таким простым, насколько это было возможно для людей, чтобы попробовать как можно быстрее. На самом деле, я ненавидел некоторые другие ответы за то, что они долгое время, потому что они стараются быть идеальными :) – AbdelHady 19 October 2016 в 14:11

Я искал прочь, чтобы включить обещания с ajax и исключить jQuery. В статье HTML5 Rocks есть статья, в которой говорится о обещаниях ES6 (можно полиполнять с библиотекой обещаний, например Q ), а затем использовать фрагмент кода, который я скопировал из статьи.

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

Примечание. Я также написал статью об этом .

15
ответ дан Aligned 18 August 2018 в 19:09
поделиться
  • 1
    Это было очень полезно, так как я делаю рекурсивный длинный механизм опроса! – super 21 December 2015 в 10:52

Это может помочь:

function doAjax(url, callback) {
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
7
ответ дан Ashish Kumar 18 August 2018 в 19:09
поделиться

Вы можете получить правильный объект в соответствии с браузером с помощью

function getXmlDoc() {
  var xmlDoc;

  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlDoc = new XMLHttpRequest();
  }
  else {
    // code for IE6, IE5
    xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlDoc;
}

. С помощью правильного объекта GET может быть абстрагирован на:

function myGet(url, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('GET', url, true);

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send();
}

И POST к:

function myPost(url, data, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('POST', url, true);
  xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send(data);
}
26
ответ дан brunops 18 August 2018 в 19:09
поделиться

Использовать XMLHttpRequest .

Простой запрос GET

httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'http://www.example.org/some.file')
httpRequest.send()

Простой запрос POST

httpRequest = new XMLHttpRequest()
httpRequest.open('POST', 'http://www.example.org/some/endpoint')
httpRequest.send('some data')

Мы можем указать, что запрос должен быть асинхронным (true), по умолчанию или синхронным (false) с необязательным третьим аргументом.

// Make a synchronous GET request
httpRequest.open('GET', 'http://www.example.org/some.file', false)

Мы можем установить заголовки перед вызовом httpRequest.send()

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Мы можем обработать ответ, установив httpRequest.onreadystatechange в функцию перед вызовом httpRequest.send()

httpRequest.onreadystatechange = function(){
  // Process the server response here.
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      alert(httpRequest.responseText);
    } else {
      alert('There was a problem with the request.');
    }
  }
}
22
ответ дан HarlemSquirrel 18 August 2018 в 19:09
поделиться

Очень хорошее решение с чистым javascript здесь

/*create an XMLHttpRequest object*/

let GethttpRequest=function(){  
  let httpRequest=false;
  if(window.XMLHttpRequest){
    httpRequest   =new XMLHttpRequest();
    if(httpRequest.overrideMimeType){
    httpRequest.overrideMimeType('text/xml');
    }
  }else if(window.ActiveXObject){
    try{httpRequest   =new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
      try{
        httpRequest   =new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
    }
  }
  if(!httpRequest){return 0;}
  return httpRequest;
}

  /*Defining a function to make the request every time when it is needed*/

  function MakeRequest(){

    let uriPost       ="myURL";
    let xhrPost       =GethttpRequest();
    let fdPost        =new FormData();
    let date          =new Date();

    /*data to be sent on server*/
    let data          = { 
                        "name"      :"name",
                        "lName"     :"lName",
                        "phone"     :"phone",
                        "key"       :"key",
                        "password"  :"date"
                      };

    let JSONdata =JSON.stringify(data);             
    fdPost.append("data",JSONdata);
    xhrPost.open("POST" ,uriPost, true);
    xhrPost.timeout = 9000;/*the time you need to quit the request if it is not completed*/
    xhrPost.onloadstart = function (){
      /*do something*/
    };
    xhrPost.onload      = function (){
      /*do something*/
    };
    xhrPost.onloadend   = function (){
      /*do something*/
    }
    xhrPost.onprogress  =function(){
      /*do something*/
    }

    xhrPost.onreadystatechange =function(){

      if(xhrPost.readyState < 4){

      }else if(xhrPost.readyState === 4){

        if(xhrPost.status === 200){

          /*request succesfull*/

        }else if(xhrPost.status !==200){

          /*request failled*/

        }

      }


   }
  xhrPost.ontimeout = function (e){
    /*you can stop the request*/
  }
  xhrPost.onerror = function (){
    /*you can try again the request*/
  };
  xhrPost.onabort = function (){
    /*you can try again the request*/
  };
  xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary");
  xhrPost.setRequestHeader("Content-disposition", "form-data");
  xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest");
  xhrPost.send(fdPost);
}

/*PHP side
<?php
  //check if the variable $_POST["data"] exists isset() && !empty()
  $data        =$_POST["data"];
  $decodedData =json_decode($_POST["data"]);
  //show a single item from the form
  echo $decodedData->name;

?>
*/

/*Usage*/
MakeRequest();
0
ответ дан Ir Calif 18 August 2018 в 19:09
поделиться
var load_process = false;
function ajaxCall(param, response) {

 if (load_process == true) {
     return;
 }
 else
 { 
  if (param.async == undefined) {
     param.async = true;
 }
 if (param.async == false) {
         load_process = true;
     }
 var xhr;

 xhr = new XMLHttpRequest();

 if (param.type != "GET") {
     xhr.open(param.type, param.url, true);

     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
     }
     else if (param.contentType != undefined || param.contentType == true) {
         xhr.setRequestHeader('Content-Type', param.contentType);
     }
     else {
         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     }


 }
 else {
     xhr.open(param.type, param.url + "?" + obj_param(param.data));
 }

 xhr.onprogress = function (loadTime) {
     if (param.progress != undefined) {
         param.progress({ loaded: loadTime.loaded }, "success");
     }
 }
 xhr.ontimeout = function () {
     this.abort();
     param.success("timeout", "timeout");
     load_process = false;
 };

 xhr.onerror = function () {
     param.error(xhr.responseText, "error");
     load_process = false;
 };

 xhr.onload = function () {
    if (xhr.status === 200) {
         if (param.dataType != undefined && param.dataType == "json") {

             param.success(JSON.parse(xhr.responseText), "success");
         }
         else {
             param.success(JSON.stringify(xhr.responseText), "success");
         }
     }
     else if (xhr.status !== 200) {
         param.error(xhr.responseText, "error");

     }
     load_process = false;
 };
 if (param.data != null || param.data != undefined) {
     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
             xhr.send(param.data);

     }
     else {
             xhr.send(obj_param(param.data));

     }
 }
 else {
         xhr.send();

 }
 if (param.timeout != undefined) {
     xhr.timeout = param.timeout;
 }
 else
{
 xhr.timeout = 20000;
}
 this.abort = function (response) {

     if (XMLHttpRequest != null) {
         xhr.abort();
         load_process = false;
         if (response != undefined) {
             response({ status: "success" });
         }
     }

 }
 }
 }

function obj_param(obj) {
var parts = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
}
return parts.join('&');
}

мой вызов ajax

  var my_ajax_call=ajaxCall({
    url: url,
    type: method,
    data: {data:value},
    dataType: 'json',
    async:false,//synchronous request. Default value is true 
    timeout:10000,//default timeout 20000
    progress:function(loadTime,status)
    {
    console.log(loadTime);
     },
    success: function (result, status) {
      console.log(result);
    },
      error :function(result,status)
    {
    console.log(result);
     }
      });

для отмены предыдущих запросов

      my_ajax_call.abort(function(result){
       console.log(result);
       });
3
ответ дан karthikeyan ganesan 18 August 2018 в 19:09
поделиться

Если вы не хотите включать JQuery, я бы попробовал несколько облегченных библиотек AJAX.

Мой любимый reqwest. Это всего лишь 3.4kb и очень хорошо построено: https://github.com/ded/Reqwest

Вот пример запроса GET с reqwest:

reqwest({
    url: url,
    method: 'GET',
    type: 'json',
    success: onSuccess
});

Теперь, если вы хотите что-то еще более легкое, я бы попробовал microAjax всего на 0,4kb: https://code.google.com/p/microajax/

Это все код прямо здесь:

function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

И вот пример вызова:

microAjax(url, onSuccess);
13
ответ дан Lonnie Best 18 August 2018 в 19:09
поделиться
  • 1
    Я думаю, что есть проблема с microAjax, когда вы называете это дважды (из-за многочисленных «это», я думаю, должно быть столкновение). Я не знаю, является ли вызов двух «новых микроайакс» хорошим обходным путем, не так ли? – Jill-Jênn Vie 24 May 2015 в 13:47

Используя следующий фрагмент, вы можете делать похожие вещи довольно легко, например:

ajax.get('/test.php', {foo: 'bar'}, function() {});

Вот фрагмент:

var ajax = {};
ajax.x = function () {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    }
    var versions = [
        "MSXML2.XmlHttp.6.0",
        "MSXML2.XmlHttp.5.0",
        "MSXML2.XmlHttp.4.0",
        "MSXML2.XmlHttp.3.0",
        "MSXML2.XmlHttp.2.0",
        "Microsoft.XmlHttp"
    ];

    var xhr;
    for (var i = 0; i < versions.length; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        } catch (e) {
        }
    }
    return xhr;
};

ajax.send = function (url, callback, method, data, async) {
    if (async === undefined) {
        async = true;
    }
    var x = ajax.x();
    x.open(method, url, async);
    x.onreadystatechange = function () {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.get = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};

ajax.post = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url, callback, 'POST', query.join('&'), async)
};
190
ответ дан Mike 18 August 2018 в 19:09
поделиться
  • 1
    Это действительно отличный прыжок, но я думаю, что вам не хватает чего-то, что есть в ответе @ 3nigma. То есть, я не уверен, сколько имеет смысл делать определенные запросы (все получить и некоторые сообщения), не возвращая ответ сервера. Я добавил еще одну строку в конце метода отправки - return x.responseText; - и затем возвращает каждый из вызовов ajax.send. – Sam 13 August 2014 в 11:37
  • 2
    @Sam вы [обычно] не можете вернуться как его асинхронный запрос. Вы должны обработать ответ в обратном вызове. – Petah 13 August 2014 в 12:18
  • 3
    @Sam есть пример: ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); }); – Petah 13 August 2014 в 22:22
  • 4
  • 5
    Остановить поддержку IE 6 никто никогда не будет использовать. – super 21 December 2015 в 09:52

Из youMightNotNeedJquery.com + JSON.stringify

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(JSON.stringify(data));
5
ответ дан Mikel 18 August 2018 в 19:09
поделиться

Использование @Petah выше, как огромный справочный ресурс. Я написал собственный AJAX-модуль здесь AJ для краткости: https://github.com/NightfallAlicorn/AJ Не все проверено, но оно работает для меня с получением и отправкой для JSON. Вы можете копировать и использовать источник по своему усмотрению. Я еще не видел заметного принятого ответа, поэтому я предполагаю, что это нормально, чтобы публиковать сообщения.

0
ответ дан Nova 18 August 2018 в 19:09
поделиться

Старый, но я попробую, может быть, кто-то найдет эту информацию полезной.

Это минимальный объем кода, который вам нужен для выполнения запроса GET и выборка некоторых форматированных данных JSON. Это применимо только к современным браузерам, таким как последние версии Chrome, FF, Safari, Opera и Microsoft Edge.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json'); // by default async 
xhr.responseType = 'json'; // in which format you expect the response to be


xhr.onload = function() {
  if(this.status == 200) {// onload called even on 404 etc so check the status
   console.log(this.response); // No need for JSON.parse()
  }
};

xhr.onerror = function() {
  // error 
};


xhr.send();

Также ознакомьтесь с новым API Fetch , который является обещанием, основанной на замене для API XMLHttpRequest .

11
ответ дан Ogalb 18 August 2018 в 19:09
поделиться

Ну, это просто 4-х шаговый простой процесс,

Надеюсь, он поможет

Step 1. Хранить ссылку на объект XMLHttpRequest

var xmlHttp = createXmlHttpRequestObject();

Step 2. Получить объект XMLHttpRequest

function createXmlHttpRequestObject() {
    // will store the reference to the XMLHttpRequest object
    var xmlHttp;
    // if running Internet Explorer
    if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttp = false;
        }
    }
    // if running Mozilla or other browsers
    else {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    // return the created object or display an error message
    if (!xmlHttp)
        alert("Error creating the XMLHttpRequest object.");
    else
        return xmlHttp;
}

Step 3. Сделать асинхронный HTTP-запрос с использованием объекта XMLHttpRequest

function process() {
    // proceed only if the xmlHttp object isn't busy
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
        // retrieve the name typed by the user on the form
        item = encodeURIComponent(document.getElementById("input_item").value);
        // execute the your_file.php page from the server
        xmlHttp.open("GET", "your_file.php?item=" + item, true);
        // define the method to handle server responses
        xmlHttp.onreadystatechange = handleServerResponse;
        // make the server request
        xmlHttp.send(null);
    }
}

Step 4. Выполнено автоматически, когда сообщение получено с сервера

function handleServerResponse() {

    // move forward only if the transaction has completed
    if (xmlHttp.readyState == 4) {
        // status of 200 indicates the transaction completed successfully
        if (xmlHttp.status == 200) {
            // extract the XML retrieved from the server
            xmlResponse = xmlHttp.responseText;
            document.getElementById("put_response").innerHTML = xmlResponse;
            // restart sequence
        }
        // a HTTP status different than 200 signals an error
        else {
            alert("There was a problem accessing the server: " + xmlHttp.statusText);
        }
    }
}
4
ответ дан Prateek Joshi 18 August 2018 в 19:09
поделиться
 var xhReq = new XMLHttpRequest();
 xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false);
 xhReq.send(null);
 var serverResponse = xhReq.responseText;
 alert(serverResponse); // Shows "15"

http://ajaxpatterns.org/XMLHttpRequest_Call

32
ответ дан Rafay 18 August 2018 в 19:09
поделиться
  • 1
    Будет ли это работать в кросс-браузере? – Benubird 26 April 2013 в 17:55
  • 2
    Не выполняйте синхронные вызовы. Используйте xhReq.onload и используйте обратные вызовы. – Kenan Sulayman 5 May 2013 в 21:52
  • 3
    @FellowStranger oReq.onload = function () {/*this.responseText*/}; – Kenan Sulayman 31 October 2013 в 16:14
  • 4
    @kenansulayman Что случилось с синхронным звонком? Иногда он подходит лучше всего. – Andrii Nemchenko 2 February 2014 в 19:00
  • 5
    @Rafee вышел из веб-сцены в течение года, просто кусок совета, хотя REFRAIN FORM IE :) – Rafay 28 April 2014 в 21:20

Вот JSFiffle без JQuery

http://jsfiddle.net/rimian/jurwre07/

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    var url = 'http://echo.jsontest.com/key/value/one/two';

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            if (xmlhttp.status == 200) {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            } else if (xmlhttp.status == 400) {
                console.log('There was an error 400');
            } else {
                console.log('something else other than 200 was returned');
            }
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
};

loadXMLDoc();
1
ответ дан Rimian 18 August 2018 в 19:09
поделиться

Как насчет этой версии в обычном ES6 / ES2015?

function get(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
    req.onerror = (e) => reject(Error(`Network Error: ${e}`));
    req.send();
  });
}

Функция возвращает обещание . Вот пример того, как использовать функцию и обрабатывать обещание , которое он возвращает:

get('foo.txt')
.then((data) => {
  // Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
  // Do stuff on error...
});

Если вам нужно загрузить json-файл, вы можете использовать JSON.parse() для преобразования загруженных данных в объект JS.

Вы можете также интегрировать req.responseType='json' в функцию, но, к сожалению, нет поддержки IE для это , поэтому я бы придерживался JSON.parse().

30
ответ дан Rotareti 18 August 2018 в 19:09
поделиться
  • 1
    Используя XMLHttpRequest, вы делаете асинхронную попытку загрузить файл. Это означает, что выполнение вашего кода будет продолжаться, а ваш файл загрузится в фоновом режиме. Чтобы использовать содержимое файла в вашем скрипте, вам нужен механизм, который сообщает вашему сценарию, когда файл закончил загрузку или потерю загрузки. Вот где обещает пригодится. Есть и другие способы решения этой проблемы, но я думаю, что обещания наиболее удобны. – Rotareti 29 August 2016 в 11:08
  • 2
    @Rotareti Поддерживают ли мобильные браузеры такой подход? – bodruk 24 January 2017 в 17:19
  • 3
    Поддерживаются только более новые версии браузера. Обычная практика заключается в том, чтобы написать свой код в последних версиях ES6 / 7 / .. и использовать Babel или аналогично, чтобы перевести его обратно на ES5 для лучшей поддержки браузера. – Rotareti 24 January 2017 в 18:34
  • 4
    @Rotareti Можете ли вы также объяснить, почему это было бы более удобно, чем «простой» обратный вызов? Неужели это удобство стоит дополнительных усилий, чтобы перевести его для поддержки старого браузера? – Lennart Kloppenburg 24 April 2017 в 12:13
  • 5
    @LennartKloppenburg Я думаю, что этот ответ объясняет это хорошо: stackoverflow.com/a/14244950/1612318 «Это удобство стоит дополнительных усилий, чтобы перевести его для поддержки старого браузера?» Обещания - это лишь одна из функций many , которые поставляются с ES6 / 7. Если вы используете транспилер, вы можете написать обновленную версию JS. Это стоит того! – Rotareti 24 April 2017 в 15:25

в обычном JavaScript в браузере:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE ) {
    if(xhr.status == 200){
      console.log(xhr.responseText);
    } else if(xhr.status == 400) {
      console.log('There was an error 400');
    } else {
      console.log('something else other than 200 was returned');
    }
  }
}

xhr.open("GET", "mock_data.json", true);

xhr.send();

Или если вы хотите использовать Browserify для объединения ваших модулей с помощью node.js , Вы можете использовать суперагент :

var request = require('superagent');
var url = '/mock_data.json';

 request
   .get(url)
   .end(function(err, res){
     if (res.ok) {
       console.log('yay got ' + JSON.stringify(res.body));
     } else {
       console.log('Oh no! error ' + res.text);
     }
 });
0
ответ дан steven iseki 18 August 2018 в 19:09
поделиться

Небольшая комбинация из нескольких приведенных ниже примеров и создала эту простую деталь:

function ajax(url, method, data, async)
{
    method = typeof method !== 'undefined' ? method : 'GET';
    async = typeof async !== 'undefined' ? async : false;

    if (window.XMLHttpRequest)
    {
        var xhReq = new XMLHttpRequest();
    }
    else
    {
        var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
    }


    if (method == 'POST')
    {
        xhReq.open(method, url, async);
        xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhReq.send(data);
    }
    else
    {
        if(typeof data !== 'undefined' && data !== null)
        {
            url = url+'?'+data;
        }
        xhReq.open(method, url, async);
        xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhReq.send(null);
    }
    //var serverResponse = xhReq.responseText;
    //alert(serverResponse);
}

// Example usage below (using a string query):

ajax('http://www.google.com');
ajax('http://www.google.com', 'POST', 'q=test');

ИЛИ если ваши параметры являются объектами (объектами) - дополнительная дополнительная настройка кода:

var parameters = {
    q: 'test'
}

var query = [];
for (var key in parameters)
{
    query.push(encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]));
}

ajax('http://www.google.com', 'POST', query.join('&'));

Оба должны быть полностью совместимы с браузером и версией.

13
ответ дан tfont 18 August 2018 в 19:09
поделиться
  • 1
    Стоит ли использовать hasOwnProperty внутри цикла for здесь? – kibibu 13 February 2015 в 01:05
<html>
  <script>
    var xmlDoc = null ;

  function load() {
    if (typeof window.ActiveXObject != 'undefined' ) {
      xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
      xmlDoc.onreadystatechange = process ;
    }
    else {
      xmlDoc = new XMLHttpRequest();
      xmlDoc.onload = process ;
    }
    xmlDoc.open( "GET", "background.html", true );
    xmlDoc.send( null );
  }

  function process() {
    if ( xmlDoc.readyState != 4 ) return ;
    document.getElementById("output").value = xmlDoc.responseText ;
  }

  function empty() {
    document.getElementById("output").value = '<empty>' ;
  }
</script>

<body>
  <textarea id="output" cols='70' rows='40'><empty></textarea>
  <br></br>
  <button onclick="load()">Load</button> &nbsp;
  <button onclick="empty()">Clear</button>
</body>
</html>
4
ответ дан Vosobe Kapsimanis 18 August 2018 в 19:09
поделиться

Я знаю, что это довольно старый вопрос, но теперь есть более удобный API, доступный изначально в новых браузерах . Метод fetch() позволяет создавать веб-запросы. Например, для запроса некоторого json из /get-data:

var opts = {
  method: 'GET',
  body: 'json',
  headers: {}
};
fetch('/get-data', opts).then(function (response) {
  return response.json();
})
.then(function (body) {
  //doSomething with body;
});

Подробнее см. здесь .

83
ответ дан Will Munn 18 August 2018 в 19:09
поделиться
  • 1
    На самом деле было бы неверно утверждать, что API-интерфейс Fetch работает в «более новых браузерах», поскольку IE и Edge не поддерживают его. (Edge 14 требует, чтобы пользователь специально включил эту функцию) caniuse.com/#feat=fetch – saluce 12 April 2016 в 16:08
  • 2
    Здесь должно быть упоминание о полифоре GitHub. github.com/github/fetch – TylerY86 29 September 2016 в 02:02
  • 3
    Просто добавьте <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script> и используйте fetch как чемпион. – TylerY86 29 September 2016 в 02:05
  • 4
    @saluce Теперь он включен по умолчанию в Edge 14 (и IE больше не является «новым» браузером :-) – Supersharp 1 October 2016 в 16:15
  • 5
    вы знаете, что ваш браузер плохой (IE), когда вам нужно переименовать его, чтобы заставить людей снова начать использовать его (Edge) – quemeful 18 November 2016 в 22:46

С «ванильным» JavaScript:

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

С помощью jQuery:

$.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
});
521
ответ дан zb226 18 August 2018 в 19:09
поделиться
  • 1
    Пожалуйста, прекратите поддержку IE5 / IE6 – Archibald 14 August 2013 в 14:23
  • 2
    @DrewNoakes: Это определенно более читаемо, но, к сожалению, когда я попробовал его в браузере Opera, он не был поддержан, поэтому я думаю, что его поддержка менее распространена – BornToCode 18 May 2014 в 22:09
  • 3
    @Archibald, вы не используете IE5 в качестве основного браузера? – Jake Sylvestre 11 April 2016 в 22:22
  • 4
    @JakeSylvestre Netscape навсегда – Archibald 13 April 2016 в 06:37
  • 5
    Я фактически сделал свой собственный браузер, поэтому он не поддерживает новые функции. Он использует регулярное выражение для анализа всего HTML-кода – Jake Sylvestre 13 April 2016 в 12:08
Другие вопросы по тегам:

Похожие вопросы: