Как оптимизировать AJAX требует скорости - PullRequest
0 голосов
/ 28 апреля 2020

У меня есть простое / базовое c понимание вызовов JQuery / AJAX / API, и мне удалось собрать воедино следующий код для приложения для проверки / авторизации пользователя, а затем получить информацию, связанную с этим пользователем, из Wordpress API , У меня есть пара проблем, с которыми я сталкиваюсь с точки зрения пользовательского опыта:

  1. Запуск кода каждый раз, когда пользователь обращается к странице из приложения Ioni c. Я пытался выяснить, как кэшировать результаты, но я не совсем уверен, что понимаю, как или если это возможно с таким типом настройки

  2. Глядя на сценарии, я чувствую, что должен быть способ оптимизировать это для более быстрой обработки и рендеринга данных ... Я просто не уверен, как это сделать.

Любая помощь / обучение и помощь очень ценится.

Вот сценарии:

$(document).ready(function(){
  
        var jwt = getCookie('jwt');     
        
        $.ajax({
    url: "https://mydomain.xyz/wp-json/jwt-auth/v1/token/validate",
    type : "POST",
    contentType : 'application/json',
    headers:{
      'Authorization': "Bearer" + jwt
   },
    
    success : function(result){
 
showHomePage();

        
  
    },
   error: function(xhr, resp, text){
   showLoginPage();
 
}
});
        


});
 // show login page
function showLoginPage(){

 // trigger when login form is submitted
$(document).on('submit', '#login_form', function(){
 
    // get form data
    var login_form=$(this);
    var form_data=JSON.stringify(login_form.serializeObject());
 
   // submit form data to api
$.ajax({
    url: "https:///mydomain.xyz/wp-json/jwt-auth/v1/token",
    type : "POST",
    contentType : 'application/json',
    data : form_data,
    
    success : function(result){
 
       // store jwt to cookie
        setCookie("jwt", result.token, 1);
        

     
 
        // show home page & tell the user it was a successful login
        
        $('#response').html("<div class='alert alert-success'>Successful login.</div>");
        showHomePage();
       


        
  
    },
   error: function(xhr, resp, text){
    // on error, tell the user login has failed & empty the input boxes
    $('#response').html("<div class='alert alert-danger'>Authentication Failed. Username or password is incorrect. </div>");
    login_form.find('input').val('');
}
});
 
    return false;
});
 
// trigger to show home page will be here

    // remove jwt
    setCookie("jwt", "", 1);
 
    // login page html
    var html = `
        <h2>Member Log In</h2>
        <form id='login_form'>
            <div class='form-group'>
                
                <input type='text' class='form-control' id='username' name='username' placeholder='Username'>
            </div>
 
            <div class='form-group'>
                
                <input type='password' class='form-control' id='password' name='password' placeholder='Password'>
            </div>
 
            <button type='submit' class='btn btn-primary'>Login</button>
        </form>
        `;
 
    $('#content').html(html);
    clearResponse();
    showLoggedOutMenu();
}
 
// function to set cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
 // function to make form values to json format
$.fn.serializeObject = function(){
 
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
function showHomePage(){

var html = ` <div class="box"><div class="trainingfeed"> </div></div>
 <div id="getout"><button id="logout" class="float-left submit-button" >Home</button></div>`;
$('#iframe2').html(html);

var jwt = getCookie('jwt'); 
 
$.ajax({
  url: 'https://mydomain.xyz/wp-json/wp/v2/pages/2240' /* REPLACE THIS URL */,
  dataType: 'json',
method: 'get',
  cache: true,
  beforeSend: function (xhr) {
    xhr.setRequestHeader('Authorization',"Bearer"+ jwt);
},
  success: function (data) { 
    $(data).each(function(index, value) {
      var jcon = value.content.rendered;
 
      
      
      
      $('.trainingfeed').append('<div class="traininglog">' + jcon + '</div>');
    });
  },
   error: function(xhr, resp, text){
  
 
}
  
  
  
});


}

 
// get or read cookie
function getCookie(cname){
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' '){
            c = c.substring(1);
        }
 
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...