jquery $.ajax() error és success
Minden jQuery használhatja AJAX módszereket, az ajax() metódust.
Alkalmazni vagy tesztelni, bérelt tárhelyünkön (SZERVEREN) lehetséges.
Vagy, saját számítógépünkön is tesztelhetjük, ha telepítettük az APACHE szervert.
Ezek a módszerek többnyire kérelmek, melyekben más módszerek nem alkalmazhatók.
UTF-8 BOM és UTF-8 kódolású fájlt, olvasható formátumban lekérdezhetjük.
Ha más kódolású, például ANSI vagy Karakterkodolás, akkor az ékezetes karaktereket, ASCII kóddal kel megírni, hogy olvasható formátumban lekérdezhessük.
URL címet, globális vagy közvetlen útvonallal is, meghatározhatjuk.
var urlcim ="../mappanev/valami.html"; // Itt határozzuk meg, a lekérdezendő URL címét. (Elérési útvonalát.) $("#button01").click(function(){ $.ajax({url: urlcim, error: function(xhr) { alert("Hiba történt!\n xhr.status: " + xhr.status + "\n xhr.statusText: " + xhr.statusText); } } ); $.ajax({url: urlcim, success: function(result) { $("#div2").html(result); // Kiíratjuk lekérdezett tartalmat, az id="div2" azonosítóval rendelkező elem területére. $("#div2").css("background-color", "white"); // Stílust nem kötelező meghatározni. } }); });
- url: Itt határozzuk meg, az elérési útvonalat. Mely lehet globális vagy közvetlen.
- Elérési útvonalat, URL-címet, csak a saját fájlainkra adhatunk meg. Más DOMAIN címre nem.
- Globális meghatározás, url:"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"
- Közvetlen meghatározás, url:"../mappaneve/valami.html"
- URL címet változóhoz is rendelhetjük, var cim ="../mappaneve/valami.html";
- error: Jelzi, ha lekérdezésnél hiba történt.
- Kiírathatjuk a lekérdezési hiba okát.
- Hiba kiíratása helyett, meghatározhatunk valami más function tevékenységi feladatot, hogy mi történjen.
- succes:
- Meghatározza, hogy a lekérdezési útvonalon történő lekérdezés sikeres vagy sem.
- Sikeres lekérdezés esetén, meghatározhatunk egy functiont, hogy mi történjen.
Következő példában általunk készített
teszt fájlokat fogunk lekérdezni.
Gyakorláshoz:
Hozzunk létre egy "mintak" nevű mappát, melybe elhelyezzük a hivható fájlokat, a következő elnevezésekkel.
- hivhato.html -------------- ( Ez, ANSI vagy Karakterkódolással íródjon.)
- hivhato_kodolt.html ----- ( Ez, ANSI vagy Karakterkódolással, de az ékezetes karaktereket, ASCII kódolt formátumban írjuk meg.)
- hivhato_utf8.html -------- ( Fájl kódolása UTF-8 BOM vagy UTF-8 legyen.)
- szoveg.txt ----------------- ( ANSI kódolású, TXT (Jegyzettömbben.) írjuk meg.)
- szovegutf8.txt ------------ ( UTF-8 BOM kódolású, TXT (Jegyzettömbben.) írjuk meg.)
Megjegyzés:
Probléma adódhat, ha tesztelés közben, a hívott oldalon módosítást végzünk.
Hívott oldalt böngészővel meg kell nyitni, majd frissíteni kell a böngésző ablakából.
Ha ez megtörtént, akkor visszatérhetünk az ajax lekérdezések teszteléséhez.
Tesztelésnél, gyakorlásnál, ugyanazt a HTML fájlt, linkkel is megnyithatjuk, így oldalak tartalmát összehasonlíthatjuk a lekérdezett eredménnyel.
Teszt linkek. A megjelenő oldalról ide visszalépni, a böngészőablak vissza nyílra kell kattintani.
Gyakorlásnál, Ajax tesztelésnél is helyezzünk el hivatkozási linket, ha valamelyik fájl tartalmát megváltoztatjuk,
akkor az itteni hivatkozási linkkel rá kell keresni, és frissíteni az oldalt, hogy ajax kérés helyesen működjön.
4. szoveg.txt. Katt ide. | 5. szovegutf8.txt. Katt ide.
Gyakorolni, tesztelni, majd véglegesíteni:
- Bérelt tárhelyünkön (SZERVEREN) lehetséges.
- Vagy, saját számítógépünkön is tesztelhetjük, ha telepítettük az APACHE szervert.
( Ellenkező esetben nincs eredmény, vagy hibát kapunk.)
Első példában, lekérdezünk egy HTML fájlt, melynek hibás URL utvonalat határozunk meg, hogy ekkor mi történik?
Következő gombokra kattintással tesztelhetjük, miért kell Ajax() kéréshez, UTF-8 BOM kódolású fájl.
--------------------------
$.ajax() lekérdezések, a következő piros keretben jelennek meg.
Program leírása.
Megjegyzés:
JavaScript program jelenleg, a head szakaszban van.
Javaslat, írjuk meg külön JavaScript fájlban, majd hívjuk meg a head szakaszban.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// ------ Hibás URL meghatározásnál, mi történik? ---------------------------------------
var cim="../hivhato.html"; // Változóhoz rendeljük az URL címet. (Elérési útvonalat.)
$("#btn01").click(function(){
// ------ URL cím létezik vagy sem. Ha lekérdezésnél hiba történt, kiíratjuk annak okát. ----------------------------------
$.ajax({url: cim, error: function(xhr) {
alert("Hiba történt!\n xhr.status: " + xhr.status + "\n xhr.statusText: " + xhr.statusText); }
});
$.ajax({url: cim, success: function(result) {
$("#div2").html(result); // Kiíratjuk lekért adatot, id="div2" azonosítóval rendelkező elem területére.
$("#div2").css("background-color", "white"); // Stílust, nem kötelező meghatározni.
$("#div2").css("font-size", 12); // Stílust, nem kötelező meghatározni.
$("#div2").css("padding", 5); // Stílust, nem kötelező meghatározni.
}
});
});
// ANSI vagy Karakterkódolású, html fájl lekérdezése. ----------------------------------------------------------------
var urlcim="mintak/hivhato.html"; // Változóhoz rendeljük az URL címet. (Elérési útvonalat.)
$("#btn02").click(function(){
// ------ URL cím létezik vagy sem. Ha lekérdezésnél hiba történt, kiíratjuk annak okát. ----------------------------------
$.ajax({url: urlcim, error: function(xhr){ alert("Hiba történt!\n xhr.status: " + xhr.status + "\n xhr.statusText: " + xhr.statusText);} });
// ------ URL cím létezik, akkor lekérdezhetjük. -------------------------------------------
$.ajax({url: urlcim, success: function(result)
{ $("#div2").html(result); // Kiíratjuk lekért adatot, id="div2" azonosítóval rendelkező elem területére.
$("#div2").css("background-color", "white"); // Stílust, nem kötelező meghatározni.
$("#div2").css("font-size", 12); // Stílust, nem kötelező meghatározni.
$("#div2").css("padding", 5); // Stílust, nem kötelező meghatározni.
}
});
});
// ANSI vagy Karakterkódolásnál, ékezetes betűk kódolva, html fájl lekérdezése. -------------------------------------------------
var utvonal="mintak/hivhato_kodolt.html"; // Változóhoz rendeljük az URL címet. (Elérési útvonalat.)
$("#btn03").click(function(){
// ------ URL cím létezik vagy sem. --------------------------------------------------------
$.ajax({url: utvonal, error: function(xhr){ alert("Hiba történt!\n xhr.status: " + xhr.status + "\n xhr.statusText: " + xhr.statusText);} });
// ------ URL cím létezik, akkor lekérdezhetjük. -------------------------------------------
$.ajax({url: utvonal, success: function(result) {
$("#div2").html(result);
$("#div2").css("background-color", "white");
}
});
});
// ------ UTF-8 BOM vagy UTF-8 kodolású html fájl lekérése. ---------------------------------------
var utf8="mintak/hivhato_utf8.html"; // Változóhoz rendeljük az URL címet. (Elérési útvonalat.)
$("#btn04").click(function(){
$.ajax({url: utf8, error: function(xhr){ alert("Hiba történt!\n xhr.status: " + xhr.status + "\n xhr.statusText: " + xhr.statusText); } });
$.ajax({url: utf8, success: function(result) {
$("#div2").html(result);
$("#div2").css("background-color", "white");
}
});
});
// ------ ANSI kódolású TXT jegyzettömbe megírt, fájl lekérése. ------------------------------
var txtcim="mintak/szoveg.txt"; // Változóhoz rendeljük az URL címet. (Elérési útvonalat.)
$("#btntxt01").click(function(){
$.ajax({url: txtcim, error: function(xhr){ alert("Hiba történt!\n xhr.status: " + xhr.status + "\n xhr.statusText: " + xhr.statusText); } });
$.ajax({url: txtcim, success: function(result) {
$("#div2").html(result);
$("#div2").css({"font-size": "14px", "color": "black", "padding": "5","background-color": "white"});
}
});
});
// ------ UTF-8 BOM kódolású TXT jegyzettömbe megírt, fájl lekérése. ------------------------------
var txtutf8="mintak/szovegutf8.txt"; // Változóhoz rendeljük az URL címet. (Elérési útvonalat.)
$("#btntxt01").click(function(){
$.ajax({url: txtutf8, error: function(xhr){ alert("Hiba történt!\n xhr.status: " + xhr.status + "\n xhr.statusText: " + xhr.statusText); } });
$.ajax({url: txtutf8, success: function(result) {
$("#div2").html(result);
$("#div2").css({"font-size": "14px", "color": "black", "padding": "5","background-color": "white"});
}
});
});
});
</script>
</head>
<body>
<button id="btn01">1. Hibás URL cimmel html fájl lekérdezése. Kattints ide!</button>
<button id="btn02">2. ANSI vagy Karakterkódolású html fájl lekérdezése. Kattints ide!</button>
<button id="btn03">3. ANSI vagy Karakterkódolású, de ékezetes betűk kódolva. html fájl lekérdezése. Kattints ide!</button>
<button id="btn04">4. UTF-8 BOM vagy UTF-8 kódolású. html fájl lekérdezése. Kattints ide!</button> <br>
<button id="btntxt01">5. ANSI kódolású TXT fájl lekérdezése. Kattints ide!</button>
<button id="btntxt02">6. UTF-8 BOM kódolású TXT fájl lekérdezése. Kattints ide!</button>
<!-- Lekérdezések az id="div2" azonosítóval rendelkező elem területén jelennek meg. -->
<!-- Megjegyzés: nem kötelező div elem, lehet span elem is. Példa: <span id="div2"></span> -->
<div id="div2" style="width: 99%; min-height:520px; left:5px; border: 2px solid red;"> </div>
</body>
|