如何在没有jQuery的情况下进行AJAX调用？

如何使用JavaScript进行AJAX调用，而不使用jQuery？

Answer 1

用“香草”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"); } }); 

Answer 2

使用下面的代码片段，你可以很容易地做类似的事情，像这样：

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

Answer 3

您可以使用以下function：

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

您可以在这些链接上在线尝试类似的解决scheme

• https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first
• https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

Answer 4

我知道这是一个相当古老的问题，但现在有更好的API在本地更新的浏览器 。 fetch()方法允许您发出Web请求。 例如，要从/get-data请求一些json：

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

在这里看到更多的细节。

Answer 5

  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

Answer 6

你可以根据浏览器得到正确的对象

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

并发布到：

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

Answer 7

这个版本在纯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() 。

Answer 8

我正在寻找包括承诺与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(); }); } 

注：我也写了一篇关于这个的文章 。

Answer 9

从下面的几个例子的一个小组合，并创build了这个简单的一块：

 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('&')); 

两者应该完全兼容浏览器+版本。

Answer 10

如果你不想包含JQuery，我会尝试一些轻量级的AJAX库。

我最喜欢的是reqwest。 它只有3.4kb，非常好build： https : //github.com/ded/Reqwest

这里是一个GET请求示例：

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

现在，如果你想要更轻量级的东西，我只能在0.4kb的地方尝试microAjax： 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); 

Answer 11

老，但我会尝试，也许有人会觉得这个信息有用。

这是执行GET请求并获取一些JSON格式数据所需的最less量代码。 这仅适用于最新版本的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(); 

另外检查新的Fetch API ，这是一个基于承诺的XMLHttpRequest API替代品。

Answer 12

这可能有助于：

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

Answer 13

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

Answer 14

那么这只是一个简单的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.使用XMLHttpRequest对象进行asynchronousHTTP请求

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

Answer 15

从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)); 

Answer 16

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"; ?> 

Answer 17

这里是一个没有JQuery的JSFiffle

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

Answer 18

在浏览器中使用普通的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); } }); 

Answer 19

使用上面的@Petah答案作为一个巨大的帮助资源。 我已经写了我自己的AJAX模块在这里简称为AJ： https ： //github.com/NightfallAlicorn/AJ不是所有的东西都testing过了，但它适用于JSON的获取和发布。 你可以随心所欲地复制和使用源代码。 我还没有看到一个明显的接受答案，所以我认为这是可以发布。

Answer 20

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

我的阿贾克斯电话

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