如何使用JavaScript进行AJAX调用,而不使用jQuery?
当前回答
如果您不想包含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);
其他回答
这只是一个简单的4步过程,
我希望这对你们有帮助
步骤1。存储对XMLHttpRequest对象的引用
var xmlHttp = createXmlHttpRequestObject();
步骤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;
}
步骤3。使用XMLHttpRequest对象进行异步HTTP请求
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);
}
}
步骤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);
}
}
}
老了,但我会尝试,也许有人会发现这个信息有用。
这是执行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();
还可以查看新的Fetch API,它是XMLHttpRequest API的基于承诺的替代品。
使用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来处理响应。在调用httpRequest.send()之前,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.');
}
}
}
这个版本在普通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()。
您可以使用以下函数:
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();
}
你可以在这些链接上尝试类似的解决方案:
https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback