版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37431724/article/details/80152758
- XHR GET Requests
function expandUrl() {
const urlToExpand = url +
'?key=' + apiKey +
'&shortUrl=' + $inputField.val();
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
$responseField.append('<p>Your expanded url is: </p><p>' + xhr.response.longUrl + '</p>');
}
};
xhr.open('GET', urlToExpand);
xhr.send();
}
- XHR POST Requests
function shortenUrl(){
const urlWithKey = url + '?key=' + apiKey;
const urlToShorten = $inputField.val();
const data = JSON.stringify({longUrl: urlToShorten});
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
console.log(xhr.response);
$responseField.append('<p>Your shortened url is: </p><p>' + xhr.response.id + '</p>');
}
};
xhr.open('POST', urlWithKey);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(data);
}
- $.ajax GET Requests
function expandUrl() {
const urlToExpand = url +
'?key=' + apiKey +
'&shortUrl=' + $inputField.val();
$.ajax({
url: urlToExpand,
type: 'GET',
dataType: 'json',
success(response) {
$responseField.append('<p>Your expanded url is: </p><p>' + response.longUrl + '</p>');
}, error(jqXHR, status, errorThrown) {
console.log(jqXHR);
}
});
}
- $.ajax POST Requests
function shortenUrl(){
const urlWithKey = url + '?key=' + apiKey;
const urlToShorten = $inputField.val();
$.ajax({
url: urlWithKey,
type: 'POST',
data: JSON.stringify({longUrl: urlToShorten}),
dataType: 'json',
contentType: 'application/json',
success(response) {
$responseField.append('<p>Your shortened url is: </p><p>' + response.id + '</p>');
},
error(jqXHR, status, errorThrown) {
console.log(jqXHR);
}
});
}
- AJAX requests with $.get()
function expandUrl() {
const urlToExpand = url +
'?key=' + apiKey +
'&shortUrl=' + $inputField.val();
$.get(urlToExpand,response=>{
$responseField.append('<p>Your expanded url is: </p><p>' + response.longUrl + '</p>');
},'json');
};
- AJAX requests with $.getJSON()
function expandUrl() {
const urlToExpand = url +
'?key=' + apiKey +
'&shortUrl=' + $inputField.val();
$.getJSON(urlToExpand,response=>{
$responseField.append('<p>Your expanded url is: </p><p>' + response.longUrl + '</p>');
});
};
- fetch() GET Request
function expandUrl() {
const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;
fetch(urlToExpand).then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Request failed!');
}, networkError => console.log(networkError.message)).then(jsonResponse => {
$responseField.append('<p> Your expanded URL is </p><p> ' + jsonResponse.longUrl + '</p>');
return jsonResponse;
});
};
- fetch() POST Request
function shortenUrl() {
const urlWithKey = url + '?key=' + apiKey;
const urlToShorten = $inputField.val();
fetch(urlWithKey,{
method:'POST',
headers: {
"Content-type": "application/json",
},
body:JSON.stringify({longUrl: urlToShorten}),
}).then(response=>{
if(response.ok){
return response.json();
}
throw new Error('Request failed!');
},networkError=>
console.log(networkError.message)).then(jsonResponse=>{
$responseField.append('<p> Your shortened URL is </p><p>' + jsonResponse.id + '</p>');
return jsonResponse;
});
};
- async GET Request
async function expandUrl() {
const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;
try{
let response = await fetch(urlToExpand);
if(response.ok){
let jsonResponse = await response.json();
$responseField.append('<p> Your expanded URL is </p><p>' + jsonResponse.longUrl+ '</p>');
return jsonResponse;
}
throw new Error('Request failed');
}
catch(error){
console.log(error);
}
};
- async POST Request
function shortenUrl(){
const urlWithKey = url + '?key=' + apiKey;
const urlToShorten = $inputField.val();
$.post({
url: urlWithKey,
data: JSON.stringify({longUrl: urlToShorten}),
dataType: 'json',
contentType: 'application/json',
success(response) {
$responseField.append('<p>Your shortened url is: </p><p>' + response.id + '</p>');
},
error(jqXHR, status, errorThrown) {
console.log(jqXHR);
}
});
}