Javascript: Request

版权声明：本文为博主原创文章，未经博主允许不得转载。 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);
    }
  });
}