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

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

848007 次浏览
小开 
xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {alert(this.responseText);}};xhttp.open("GET", "ajax_info.txt", true);xhttp.send();
小开

使用“vanilla”（普通）JavaScript：

function loadXMLDoc() {var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4if (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();}

使用jQuery：

$.ajax({url: "test.html",context: document.body,success: function() {$(this).addClass("done");}});
小开 
<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>
小开

超文本标记语言：

<!DOCTYPE html><html><head><script>function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=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";
?>
小开

使用以下代码片段，您可以非常轻松地执行类似的操作，如下所示：

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

您可以使用以下功能：

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

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

小开

您可以根据浏览器获得正确的对象

function getXmlDoc() {var xmlDoc;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, SafarixmlDoc = new XMLHttpRequest();}else {// code for IE6, IE5xmlDoc = 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);}
小开

这可能有助于：

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

下面几个例子的一个小组合，创建了这个简单的作品：

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

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

小开

我正在寻找一种方法来包含ajax的Promise并排除jQuery。有一篇关于HTML5岩石的文章讨论了ES6 Promise。（您可以使用像Q这样的Promise库进行多边形填充）您可以使用我从文章中复制的代码片段。

function get(url) {// Return a new promise.return new Promise(function(resolve, reject) {// Do the usual XHR stuffvar req = new XMLHttpRequest();req.open('GET', url);
req.onload = function() {// This is called even on 404 etc// so check the statusif (req.status == 200) {// Resolve the promise with the response textresolve(req.response);}else {// Otherwise reject with the status text// which will hopefully be a meaningful errorreject(Error(req.statusText));}};
// Handle network errorsreq.onerror = function() {reject(Error("Network Error"));};
// Make the requestreq.send();});}

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

小开

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

我最喜欢的是reqWest。它只有3.4kb并且构建得非常好：https://github.com/ded/Reqwest

这是一个带有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);
小开

在浏览器中的纯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();

或者，如果你想使用浏览器来捆绑你的模块使用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);}});
小开

这是一个没有JQuery的JSFiffle

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

这只是一个简单的4步，

希望能帮上忙

Step 1.存储对XMLHttpRequest对象的引用

var xmlHttp = createXmlHttpRequestObject();

Step 2.检索XMLHttpRequest对象

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

Step 3.使用XMLHttpRequest对象发出异步HTTP请求

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

Step 4.当收到来自服务器的消息时自动执行

function handleServerResponse() {
// move forward only if the transaction has completedif (xmlHttp.readyState == 4) {// status of 200 indicates the transaction completed successfullyif (xmlHttp.status == 200) {// extract the XML retrieved from the serverxmlResponse = xmlHttp.responseText;document.getElementById("put_response").innerHTML = xmlResponse;// restart sequence}// a HTTP status different than 200 signals an errorelse {alert("There was a problem accessing the server: " + xmlHttp.statusText);}}}
小开

现在在现代浏览器中有一个更好的获取API本地可用。fetch()方法允许您发出Web请求。例如，要从/get-data请求一些JSON：

let options = {method: 'GET',headers: {}};
fetch('/get-data', options).then(response => response.json()).then(body => {// Do something with body});

查看MDN Web文档：使用Fetch API了解更多详情。

小开

旧的，但我会尝试，也许有人会发现这个信息有用。

这是执行GET请求并获取一些JSON格式数据所需的最小代码量。这仅适用于最新版本的Chrome、FF、Safari、Opera和Microsoft Edge等现代浏览器。

const xhr = new XMLHttpRequest();xhr.open('GET', 'https://example.com/data.json'); // by default asyncxhr.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 statusconsole.log(this.response); // No need for JSON.parse()}};
xhr.onerror = function() {// error};

xhr.send();

还可以查看新的获取API，它是XMLHttpRequest API的基于Promise的替代品。

小开

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

小开 
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 truetimeout:10000,//default timeout 20000progress: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);});
小开

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

使用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 requesthttpRequest.open('GET', 'http://www.example.org/some.file', false)

我们可以在调用httpRequest.send()之前设置标题

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

我们可以通过在调用httpRequest.send()之前将httpRequest.onreadystatechange设置为函数来处理响应

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.');}}}
小开

一个非常好的纯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 formecho $decodedData->name;
?>*/
/*Usage*/MakeRequest();
小开

XMLHttpRequest（）请求方式

您可以使用XMLHttpRequest()构造函数创建一个新的XMLHttpRequest（XHR）对象，它允许您使用标准HTTP请求方法（例如GET和POST）与服务器交互：

const data = JSON.stringify({example_1: 123,example_2: 'Hello, world!',});
const request = new XMLHttpRequest();
request.addEventListener('load', function () {if (this.readyState === 4 && this.status === 200) {console.log(this.responseText);}});
request.open('POST', 'example.php', true);request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');request.send(data);

获取

您还可以使用fetch()方法来获取Promise，它解析为Response对象，表示对您请求的响应：

const data = JSON.stringify({example_1: 123,example_2: 'Hello, world!',});
fetch('example.php', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',},body: data,}).then(response => {if (response.ok) {response.text().then(response => {console.log(response);});}});

navigator.send信标（）

另一方面，如果您只是尝试POST数据并且不需要来自服务器的响应，则最短的解决方案是使用navigator.sendBeacon()：

const data = JSON.stringify({example_1: 123,example_2: 'Hello, world!',});
navigator.sendBeacon('example.php', data);
小开

尝试使用Fetch Api（获取API）

fetch('http://example.com/movies.json').then(response => response.json()).then(data => console.log(data));

它非常清晰，100%香草味。

小开

无需jQuery快速获取代码

async  function product_serach(word) {var response = await fetch('<?php echo base_url(); ?>home/product_search?search='+word);var json = await response.json();for (let [key, value] of Object.entries(json)){console.log(json)}}

提交答案