שימוש מ XMLHttpRequest בפונקציה של JAVASCRIPT

יוס

שעות ארוכות שאני מנסה להבין לחפש ולגגל אך אני לא מצליח
אני מנסה לבצע שאילתת api באמצעות AJAX
אך את התגובה אני רוצה לפרק לפי תיבות חיפוש וכדו' בשאילתה נפרדת של JAVASCRIPT
ואני רוצה את זה בדוקא בנפרד מהשאילתה כי אני לא רוצה שכל טעינה של הפונקציות (שזה בעיקר חיפוש/שינוי) יטען מחדש את השאילתת api
מצורף דוגמה

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<p id="tibleData"></p>

<script>

var tibleData
function tibleDataGet(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            tibleData = this.responseText;
            //document.getElementById("tibleData").innerHTML = tibleData;     
        }
    };
    xhttp.open("GET", "https://ipsales.co.il/-111.json", true);
    xhttp.send();
}
window.tibleDataGet(); 
document.getElementById("tibleData").innerHTML = tibleData; 
</script>
</body>
</html>

תודה

dovid

בד"כ מה שלוקח שעות בJS זה מוקשי אסינכרוניות... יש לך בעיה כי אתה משתמש בtibleData כשהוא עדיין ריק.
המקטע של שורות 16-19, קורות רק כשהתשובה חוזרת, ואילו שורה 25 קורית מייד אחרי שפקודת הajax התבקשה להתבצע.
עליך להעביר את שורה 25 לשורה 18. אלא שאתה לא רוצה לעשות זאת כי:

ואני רוצה את זה בדוקא בנפרד מהשאילתה כי אני לא רוצה שכל טעינה של הפונקציות (שזה בעיקר חיפוש/שינוי) יטען מחדש את השאילתת api

ואת זה לא הבנתי.

נ.ב. הרבה יותר קל כיום להשתמש בfetch, שזה הדרך העכשוית לגשת לווב מהסקריפט, הנה דוגמה רלוונטית:

 fetch("https://ipsales.co.il/-111.json")
         .then(x => x.json())
         .then(x => document.getElementById("tibleData").innerHTML = x[2].name);

יוס

@dovid אמר בשימוש מ XMLHttpRequest בפונקציה של JAVASCRIPT:

ואני רוצה את זה בדוקא בנפרד מהשאילתה כי אני לא רוצה שכל טעינה של הפונקציות (שזה בעיקר חיפוש/שינוי) יטען מחדש את השאילתת api

ואת זה לא הבנתי.

אסביר,
יש לי תיבת חיפוש חופשי (יש לי כמה שדות חיפוש נוספים לערכים שונים) שמפעיל פונקציה שרצה על המערך
ואם זה תואם זה מוסיף את האיבר הזה למערך שאותו אני מוציא בסוף כטבלה
את ה JSON אני רוצה לקבל בפעם הראשונה שהדף נטען (ולא כל פעם שאני רושם בשדה החיפוש כי טעינת ה JSON עלול להכיל המון מידע, ויכול לקחת כמה שניות לעלות)
וכל פעם שמתבצעת קריאה לפונקציית החיפש זה יחפש על המערך השמור מטעינת הדף

אני מצרף דוגמה למבנה החיפוש שהמערך הינו בתוך הקוד אך למעשה אני רוצה שיגיע ב API

<!DOCTYPE html>
<html>
<body>

<p id="tible"></p>

<input type="text" id="free" onkeyup="tibleReport()" placeholder='free search...'>
<input type="text" id="sumAbove" onkeyup="tibleReport()" placeholder='sum above...'>
<input type="text" id="sumBelow" onkeyup="tibleReport()" placeholder='sum below...'>

<script>

function tibleReport() {
    
    //את השורה הזו אני רוצה לקבל ב API פעם אחת בטעינת הדף ולא בכל קריאה לפונקציה
    const person = [{'name': 'aaa', 'id':111, 'sum':100},{'name': 'bbb', 'id':222, 'sum':200},{'name': 'ccc', 'id':333, 'sum':300},{'name': 'ddd', 'id':444, 'sum':400},{'name': 'eee', 'id':333, 'sum':400}];    
    const newList = [];

    txt = '';

    free = document.getElementById("free");
    sumAbove = document.getElementById("sumAbove");
    sumBelow = document.getElementById("sumBelow");
    
    filterFree = free.value.toUpperCase();
    filterSumAbove = sumAbove.value.toUpperCase();
    filterSumBelow = sumBelow.value.toUpperCase();
    
    for (let x in person) {
        
        freeSerch = person[x]['name'] + person[x]['id'];
        if (freeSerch.toUpperCase().indexOf(filterFree) > -1 && (person[x]['sum'] >= filterSumAbove || filterSumAbove < 1) && (person[x]['sum'] < filterSumBelow || filterSumBelow < 1)) {
            newList.push(person[x]);
        }
    }

    for (let x in newList){
        txt += newList[x]['name'] + " ";
    }
    
  document.getElementById("tible").innerHTML = txt;
}

tibleReport(); 

</script>

</body>
</html>

dovid

@יוס הבנתי.
אתה צורך את המידע הזז כמה פעמים בחיי הדף, כנראה בעקבות פעולות של המשתמש בממשק. כלומר זה לא משהו שקורה מייידית וצותר להניח שהפעם הראשונה תתרחש אחרי הטעינה.
במקרה כזו יכולנו לעשות כזה קוד:

var tibleData
function tibleDataGet(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            tibleData = this.responseText;
            tibleReport();     
        }
    };
    xhttp.open("GET", "https://ipsales.co.il/-111.json", true);
    xhttp.send();
}

window.tibleDataGet(); 

function tibleReport(){
    //bla bla
    document.getElementById("tibleData").innerHTML = tibleData; 
}

הקוד הזה מניח הנחות על המציאות אבל הוא עלול להיכשל, אתה יכול להבטיח יותר את תקינותו על ידי בדיקה שנתונים נטענו:

function tibleReport(){
     if(!tibleData) return tibleDataGet();
     //פה כל ההמשך בטוח קורה אחרי הטעינה של הנתונים
     //bla bla 
     document.getElementById("tibleData").innerHTML = tibleData; 
 }

זה הפתרונות הקלאסיים של פעם. היום בזכות המושג פרומייז יש פתרון אלגנטי להשתמש בthen שוב ושוב, זה מבטיח שהנתונים נטענו, ככה:

var tibleData = fetch("https://ipsales.co.il/-111.json").then(x => x.json());

function tibleReport(){
    tibleData.then(function(data){
         //bla bla
         document.getElementById("tibleData").innerHTML = data; 
     }
}

ואם אתה מצליח לשחות בתחביר הasync החיים אלגנטיים עוד יותר:

var tibleData = fetch("https://ipsales.co.il/-111.json").then(x => x.json());

async function tibleReport(){
    var data = await tibleData();
    //bla bla
    document.getElementById("tibleData").innerHTML = data ; 
}

למרות שזה נראה שהבקשה תקרה שוב ושוב, היא תקרה רק פעם אחת בגלל האופן בו אומר פרומייז: גש לערך לאחר סיום ההרצה. שיל לב כמה הקוד האחרון קצר וגם קריא.

יוס

@dovid
ממש תודה בפרט על הסדר שעשית לי להבין את ההבדלים בין האפשריות
ממש פותח את האפיקים להבין

יוס

@dovid
עוד שאלה קטנה
אין אני מאפס וטוען מחדש את ה fetch
בלי לטעון מחדש את הדף

תודה

מוטי אורן

@יוס אמר בשימוש מ XMLHttpRequest בפונקציה של JAVASCRIPT:

@dovid
עוד שאלה קטנה
אין אני מאפס וטוען מחדש את ה fetch
בלי לטעון מחדש את הדף

תודה

מה הכוונה? אתה יכול פשוט לקבל עוד פעם את ה JSON עם await על אותו fetch. הבנתי את השאלה נכון?

יוס

@מוטי-אורן
אכן
עכשיו אני אוחז שזה נורא פשוט

תחומים - פורום חרדי מקצועי

שימוש מ XMLHttpRequest בפונקציה של JAVASCRIPT