Як зрабіць выклік AJAX без jQuery?

Як зрабіць выклік AJAX з выкарыстаннем JavaScript, не выкарыстоўваючы jQuery?

676
19 дек. зададзены discky 19 снеж. 2011-12-19 23:27 '11 а 23:27 2011-12-19 23:27
@ 22 адказаў

З "vanilla" 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"); } }); 
541
19 дек. адказ дадзены dov.amir 19 снеж. 2011-12-19 23:30 '11 а 23:30 2011-12-19 23:30

Выкарыстоўваючы наступны фрагмент, вы можаце рабіць падобныя рэчы даволі лёгка, напрыклад:

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

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

 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) }; 
200
06 авг. адказ дадзены Petah 06 жнів. 2013-08-06 14:16 '13 у 14:16 2013/08/06 14:16

Вы можаце выкарыстоўваць наступную функцыю:

 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(); } 

Вы можаце паспрабаваць падобныя рашэнні ў Інтэрнэце па гэтых спасылках:

98
20 авг. адказ дадзены AbdelHady 20 жнів. 2013-08-20 01:52 '13 у 01:52 2013/08/20 01:52

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

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

Падрабязней гл. Тут .

90
13 авг. адказ дадзены Will Munn 13 жнів. 2015-08-13 01:01 '15 у 1:01 2015/08/13 01:01

Як наконт гэтай версіі ў простай 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(); }); } 

Функцыя вяртае promise . Вось прыклад таго, як выкарыстоўваць функцыю і апрацоўваць абяцанне, якое яна вяртае:

 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() .

34
22 авг. адказ дадзены Rotareti 22 жнів. 2016-08-22 16:59 '16 у 16:59 2016/08/22 16:59
  var xhReq = new XMLHttpRequest(); xhReq.open("GET", "sumGet.phtml?figure1=5 false); xhReq.send(null); var serverResponse = xhReq.responseText; alert(serverResponse); // Shows "15" 

http://ajaxpatterns.org/XMLHttpRequest_Call

33
19 дек. адказ дадзены Rafay 19 снеж. 2011-12-19 23:30 '11 а 23:30 2011-12-19 23:30

Вы можаце атрымаць правільны аб'ект у адпаведнасці з браўзэрам з дапамогай

 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); } 
27
25 сент. адказ дадзены brunops 25 сент. 2013-09-25 05:26 '13 у 05:26 2013/09/25 05:26

Выкарыстоўвайце 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.'); } } } 
27
28 дек. адказ дадзены HarlemSquirrel 28 снеж. 2017-12-28 23:24 '17 у 23:24 2017/12/28 23:24

Я шукаў, каб уключыць promises з ajax і выключыць jQuery. Там ёсць артыкул аб HTML5 Rocks , у якой гаворыцца аб ES6 promises (можа polyfill з бібліятэкай абяцанняў накшталт 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
07 окт. адказ дадзены Aligned 07 каст. 2014-10-07 19:10 '14 у 19:10 2014/10/07 19:10

Невялікая камбінацыя з некалькіх прыведзеных ніжэй прыкладаў і стварыла гэтую простую частка:

 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('> 

Абодва павінны быць цалкам сумяшчальныя з браўзэрам і версіяй.

15
24 февр. адказ дадзены tfont 24 февр. 2014-02-24 23:03 '14 а 23:03 2014/02/24 23:03

Калі вы не хочаце ўключаць JQuery, я б паспрабаваў некалькі палегчаных бібліятэк AJAX.

Мой любімы reqwest. Гэта ўсяго 3,4 кілабайта і вельмі добра пабудавана: 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); 
14
04 февр. адказ дадзены Ryan 04 февр. 2015-02-04 00:06 '15 у 0:06 2015/02/04 00:06

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

Гэта мінімальны аб'ём кода, які неабходна выканаць з запытам 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(); be 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 .

12
27 сент. адказ дадзены Ogalb 27 сент. 2015-09-27 09:20 '15 у 09:20 2015/09/27 09:20

Гэта можа дапамагчы:

 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
29 нояб. адказ дадзены Ashish Kumar 29 лістапада. 2013-11-29 21:49 '13 у 21:49 2013/11/29 21:49

Ад 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
24 июля '17 в 18:54 2017-07-24 18:54 адказ дадзены Mikel 24 ліпеня '17 а 18:54 2017/07/24 18:54
 <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>  <button onclick="empty()">Clear</button> </body> </html> 
4
19 дек. адказ дадзены Vosobe Kapsimanis 19 снеж. 2011-12-19 23:31 '11 у 23:31 2011-12-19 23:31

Ну, гэта ўсяго толькі 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; } message 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); } } busy 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); } } the form 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
21 июня '15 в 13:29 2015-06-21 13:29 адказ дадзены Prateek Joshi 21 чэрвеня '15 у 13:29 2015/06/21 13:29
 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
08 дек. адказ дадзены karthikeyan ganesan 08 снеж. 2016-12-08 23:20 '16 а 23:20 2016/12/08 23:20

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
06 авг. адказ дадзены 99freebies.blogspot.com 06 жнів. 2013-08-06 14:11 '13 у 14:11 2013/08/06 14:11

Тут 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
18 мая '15 в 4:18 2015-05-18 04:18 адказ дадзены Rimian 18 мая '15 у 4:18 2015/05/18 04:18

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

0
11 июля '16 в 5:38 2016-07-11 05:38 адказ дадзены Nova 11 ліпеня '16 ў 05:38 2016/07/11 05:38

у звычайным 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. Вы можаце выкарыстоўваць superagent :

 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
27 апр. адказ дадзены steven iseki 27 крас. 2015-04-27 08:18 '15 у 08:18 2015/04/27 08:18

Дакладнае добрае рашэнне з чыстым javascript тут

  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; }  function MakeRequest(){ let uriPost ="myURL"; let xhrPost =GethttpRequest(); let fdPost =new FormData(); let date =new Date();  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; xhrPost.onloadstart = function (){  }; xhrPost.onload = function (){  }; xhrPost.onloadend = function (){  } xhrPost.onprogress =function(){  } xhrPost.onreadystatechange =function(){ if(xhrPost.readyState < 4){ }else if(xhrPost.readyState === 4){ if(xhrPost.status === 200){  }else if(xhrPost.status !==200){  } } } xhrPost.ontimeout = function (e){  } xhrPost.onerror = function (){  }; xhrPost.onabort = function (){  }; xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary"); xhrPost.setRequestHeader("Content-disposition", "form-data"); xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest"); xhrPost.send(fdPost); }   MakeRequest(); time when it is needed  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; }  function MakeRequest(){ let uriPost ="myURL"; let xhrPost =GethttpRequest(); let fdPost =new FormData(); let date =new Date();  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; xhrPost.onloadstart = function (){  }; xhrPost.onload = function (){  }; xhrPost.onloadend = function (){  } xhrPost.onprogress =function(){  } xhrPost.onreadystatechange =function(){ if(xhrPost.readyState < 4){ }else if(xhrPost.readyState === 4){ if(xhrPost.status === 200){  }else if(xhrPost.status !==200){  } } } xhrPost.ontimeout = function (e){  } xhrPost.onerror = function (){  }; xhrPost.onabort = function (){  }; xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary"); xhrPost.setRequestHeader("Content-disposition", "form-data"); xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest"); xhrPost.send(fdPost); }   MakeRequest(); if it is not completed  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; }  function MakeRequest(){ let uriPost ="myURL"; let xhrPost =GethttpRequest(); let fdPost =new FormData(); let date =new Date();  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; xhrPost.onloadstart = function (){  }; xhrPost.onload = function (){  }; xhrPost.onloadend = function (){  } xhrPost.onprogress =function(){  } xhrPost.onreadystatechange =function(){ if(xhrPost.readyState < 4){ }else if(xhrPost.readyState === 4){ if(xhrPost.status === 200){  }else if(xhrPost.status !==200){  } } } xhrPost.ontimeout = function (e){  } xhrPost.onerror = function (){  }; xhrPost.onabort = function (){  }; xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary"); xhrPost.setRequestHeader("Content-disposition", "form-data"); xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest"); xhrPost.send(fdPost); }   MakeRequest(); 
-1
07 авг. адказ дадзены Ir Calif 07 жнів. 2018-08-07 13:38 '18 у 13:38 2018/08/07 13:38

Іншыя пытанні па пазнаках або Задайце пытанне