What is myAJAX?

Klicke hier für die deutsche Beschreibung!

New in this version!

authentication protection (user/password)
sends/receives headers

What is myAJAX?

myAJAX is a function which you can help to call up AJAX calls in a simple way!

You can integrate files (.html, .php, .txt etc.) at a defined point (ID) in the DOM (HTML).

Benefits!

When using this feature:

files are integrated in a defined location (ID),
all Javascript scripts will executed for the called HTML files,
PHP / HTML and Javascript scripts are executed in the PHP files,
the src attribute is taken into account. The named file is integrated and executed, e.g .:

<script src="myScript.js"><script>
Form data will be transmitted with "GET" or "POST" when called,
a callback function can be called which has access to all essential data (see example 3 below)!

Installation

for testing purposes

Simply link the script tag as follows:

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/myajaxcall@1.1.0/myajax_bundle.min.js"></script>
</head>
<body>
</body>
</html>

locale installation

create a package.json

npm init
Install the package

npm i myajaxcall
Include (e.g. in the index.html)

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
</body>
</html>

Working method and examples

The function is called with:

lib.myAJAX(filename, id, form, callback, user, password, headers)

Not all parameters are necessary! If a parameter has to be skipped, you have to fill this up with null. Example:

lib.myAJAX('JSON.php', null, null, myCallback)

simple examples and explanations

Example 1: Filename and ID

The index.html calls the test.html and inserts its content in the h1 tag in place of the span tag with the ID content.

test.html

<i>Welt</i>

index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <h1>Hallo <span id="content"></span>!</h1>

    <script>
        new lib.myAJAX("test.html","content");
    </script>
</body>
</html>

Example 2: Transfer of form data to a PHP script

After the submit button has been pressed, the form data is transferred to the PHP script showInput.php and the result is then saved in the index.html in the div tag with the ID showData.

Important: please do not forget the command event.preventDefault() !

showInput.php

<?php
  $user = $_GET['user'];
  $psw = $_GET['pwd'];
  echo "Input user: $user <br>";
  echo "Input passw: $psw"; 
?>

Important: please do not forget the command event.preventDefault() !
index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <form method="GET" action="showInput.php" id="form1">
        <label for="user"></label>
        <input type="text" name="user">
        <label for="pwd"></label>
        <input type="text" name="pwd">
        <input type="submit">
    </form>
    <div id="showData"></div>
   
    <script>
      document.getElementById("form1").addEventListener("submit",
        function(event){
            event.preventDefault();
            const FORM = document.getElementById("form1");
            const ACTION_SCRIPT = FORM.getAttribute("action");

            new lib.myAJAX(ACTION_SCRIPT,"showData", FORM);    
        })
</body>
</html>

The transmission method (POST / GET) is determined automatically by lib.myAJAX () from the form tag!

Callback function

There is the possibility of the function libmyAJAX () to integrate a callback function, which has access to all information that the executed AJAX call has determined.

Structure of the callback function

functionsname(response, responseText, responseXML, responseURL, responseType, responseHeaders)

response: property returns the response's body content as an ArrayBuffer, Blob, Document, JavaScript Object, or DOMString, depending on the value of the request's responseType property.
responseText: get the response data as a string
responseXML: get the response data as XML data
responseURL: property returns the serialized URL of the response or the empty string if the URL is null. If the URL is returned, any URL fragment present in the URL will be stripped away. The value of responseURL will be the final URL obtained after any redirects.
responseType: is an enumerated string value specifying the type of data contained in the response.
responseHeader: all response headers (see example below)

Example 3: Callback, receives JSON data from a PHP file.

JSON.php

<?php
    $ary=[
        ["name"=>"Otto", "adresse"=>["str"=>"Otto Braun Str.", "PLZ"=>"10409"]],
        ["name"=>"Torsten", "adresse"=>["str"=>"Müllerstr.", "PLZ"=>"13086"]],
        ["name"=>"Melly", "adresse"=>["str"=>"Thomas-Mann-Str.", "PLZ"=>"10551"]]
    ];
    echo json_encode($ary);
?>

index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <button id="btn">Data</button> 
    <div id="data"></div>
    <script>
      document.getElementById("btn").addEventListener("click",
        function(){
            new myAJAX("JSON.php",null, null, myCallback);    
        })
       
        function myCallback(res,resTxt,resXML,resURL,resType){
            arr=JSON.parse(res);
            myData = `Name:${arr[1]["name"]}<br> Location:${arr[1]["adresse"]["str"]} <br>`
            myData += `URL: ${resURL}`
            document.getElementById("data").innerHTML=myData;
        }
    </script>
</body>
</html>

Example 4: Authentication, user/password.

index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <button id="btn">Data</button> 
    <div id="data"></div>
    <script>
      document.getElementById("btn").addEventListener("click",
        function(){
          let user = "admin";
          let pwd = "1234";
          new myAJAX("auth.php","data",null, null, user, pwd);    
        })
    </script>
</body>
</html>

auth.php

<?php
    if (!isset($_SERVER['PHP_AUTH_USER'])) {
        header('WWW-Authenticate: Basic realm="My Realm"');
        header('HTTP/1.0 401 Unauthorized');
        echo 'The second round get user and pwd!';
        exit;
    } else if ($_SERVER['PHP_AUTH_USER'] == "admin" and $_SERVER['PHP_AUTH_PW'] =="1234"){
        echo "You logged in!";
    } else{
        echo "User or psw aren't correct!";
    }
?>

Example 5: Headers send.

index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <button id="btn">Data</button> 
    <div id="data"></div>
    <script>
      document.getElementById("btn").addEventListener("click",
        function(){
          let user = "admin";
          let pwd = "1234";
          let headers = [
                {header:"Content-type", value: "text/html"},
                {header:"MyHeader", value: "nice header"}
              ]
          new myAJAX("auth.php",null, null, myCallback, user, pwd, headers);    
        })
        function myCallback(res,resTxt,resXML,resURL,resType, resHeaders){
            document.getElementById("data").innerHTML=resHeaders;
        }
    </script>
</body>
</html>

auth.php

<?php
    if (!isset($_SERVER['PHP_AUTH_USER'])) {
        header('WWW-Authenticate: Basic realm="My Realm"');
        header('HTTP/1.0 401 Unauthorized');
        echo 'The second round get user and pwd!';
        exit;
    } else if ($_SERVER['PHP_AUTH_USER'] == "admin" and $_SERVER['PHP_AUTH_PW'] =="1234"){
        echo "You logged in!";
    } else{
        echo "User or psw aren't correct! <br>";
        echo getallheaders(); 
    }
?>

Deutsch

Neu in dieser Version!

Authentifizierungsschutz (Benutzer/Passwort)
sendet / empfängt Header

Was ist myAJAX?

myAJAX ist eine Funktion mit dessen Hilfe Sie, auf eine einfache Weise, AJAX-Calls aufrufen können!

Sie können Dateien (.html, .php, .txt etc.) in den Scope einer aufgerufenen Webseite an einen definierten Punkt (ID) im DOM-Content (HTML) einbinden.

Vorteile!

Bei der Verwendung dieser Funktion:

werden Dateien an einen definierten Platz (ID) eingebunden,
bei der gerufenen HTML-Dateien alle Javascript-Scripte ausgeführt,
in der PHP-Dateien werden PHP/HTML und Javascript-Scripte ausgeführt,
Das src-Attribut wird berücksichtigt. Die benannte Datei wird eingebunden und ausgeführt, z.B.:

<script src="myScript.js"><script>
Formulardaten werden mit "GET" oder "POST" beim Aufruf übermittelt,
kann eine Callback-Funktion aufgerufen werden, die Zugriff auf alle wesentlichen Daten hat (siehe Unten)!

Installation

für Testzwecke

Verlinken Sie den Script-Tag einfach wie folgt:

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/myajaxcall@1.1.0/myajax_bundle.min.js"></script>
</head>
<body>
</body>
</html>

locale Installation

erstelle eine package.json

npm init
Installieren des Packages

npm i myajaxcall
Einbinden (z.B. in die index.html)

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
</body>
</html>

Arbeitsweise und Beispiele

Die Funktion wird aufgerufen mit:

lib.myAJAX(filename, id, form, callback, user, password, headers)

Nicht alle Parameter sind notwendig! Falls ein Parameter übersprungen werden muss, wird dieser mit null aufgefüllt. Beispiel:

lib.myAJAX('JSON.php', null, null, myCallback)

einfache Beispiele und Erklärungen

Beispiel 1: Filename und ID

Die index.html ruft die test.html und fügt deren Inhalt im h1-Tag an der Stelle des span-tag mit der ID content ein.

test.html

<i>Welt</i>

index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <h1>Hallo <span id="content"></span>!</h1>

    <script>
        new lib.myAJAX("test.html","content");
    </script>
</body>
</html>

Beispiel 2: Übergabe von Formulardaten an ein PHP-Script

Nach dem der Button submit gedrückt wurde, werden die Formulardaten an das PHP-Script showInput.php übergeben und anschließend in der index.html im div-Tag mit der ID showData, angezeigt.

Wichtig: bitte nicht das event.preventDefault() vergessen!

showInput.php

<?php
  $user = $_GET['user'];
  $psw = $_GET['pwd'];
  echo "Input user: $user <br>";
  echo "Input passw: $psw"; 
?>

bitte nicht das event.preventDefault() vergessen!
index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <form method="GET" action="showInput.php" id="form1">
        <label for="user"></label>
        <input type="text" name="user">
        <label for="pwd"></label>
        <input type="text" name="pwd">
        <input type="submit">
    </form>
    <div id="showData"></div>
   
    <script>
      document.getElementById("form1").addEventListener("submit",
        function(event){
            event.preventDefault();
            const FORM = document.getElementById("form1");
            const ACTION_SCRIPT = FORM.getAttribute("action");

            new lib.myAJAX(ACTION_SCRIPT,"showData", FORM);    
        })
</body>
</html>

Die Übertragungsmethode (POST/GET) ermittelt lib.myAJAX() selbständig aus dem form-Tag!

Callback-Function

Es besteht die Möglichkeit der Funktion libmyAJAX() eine Callback-Funktion zu übergeben, welche Zugriff hat auf alle Informationen, die der ausgeführte AJAX-Call ermittelt hat.

Aufbau der Callback-Funktion

functionsname(response, responseText, responseXML, responseURL, responseType)

response: gibt den Hauptinhalt der Antwort als ArrayBuffer, Blob, Dokument, JavaScript-Objekt oder DOMString zurück, abhängig vom Wert der responseType-Eigenschaft der Anforderung.
responseText: gibt den Wert als String zurück.
responseXML: gibt den Wert als XML-Data zurück.
responseURL: Die Eigenschaft gibt die serialisierte URL der Antwort oder die leere Zeichenfolge zurück, wenn die URL null ist. Wenn die URL zurückgegeben wird, wird jedes in der URL vorhandene URL-Fragment entfernt. Der Wert von responseURL ist die endgültige URL, die nach Weiterleitungen erhalten wird.
responseType: ist eine Zeichenfolge, die den in der Antwort enthaltenen Datentyp angibt.
responseHeader: alle empfangenen Headers (siehe Beispiel unten)

Beispiel 3: Callback, empfängt JSON-Daten von einer PHP-Datei.

JSON.php

<?php
    $ary=[
        ["name"=>"Otto", "adresse"=>["str"=>"Otto Braun Str.", "PLZ"=>"10409"]],
        ["name"=>"Torsten", "adresse"=>["str"=>"Müllerstr.", "PLZ"=>"13086"]],
        ["name"=>"Melly", "adresse"=>["str"=>"Thomas-Mann-Str.", "PLZ"=>"10551"]]
    ];
    echo json_encode($ary);
?>

index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <button id="btn">Data</button> 
    <div id="data"></div>
    <script>
      document.getElementById("btn").addEventListener("click",
        function(){
            new myAJAX("JSON.php",null, null, myCallback);    
        })
       
        function myCallback(res,resTxt,resXML,resURL,resType){
            arr=JSON.parse(res);
            myData = `Name:${arr[1]["name"]}<br> Location:${arr[1]["adresse"]["str"]} <br>`
            myData += `URL: ${resURL}`
            document.getElementById("data").innerHTML=myData;
        }
    </script>
</body>
</html>

Example 4: Authentifizierung, user/password.

index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <button id="btn">Data</button> 
    <div id="data"></div>
    <script>
      document.getElementById("btn").addEventListener("click",
        function(){
          let user = "admin";
          let pwd = "1234";  
          new myAJAX("auth.php","data",null, null, user, pwd);    
        })
    </script>
</body>
</html>

auth.php

<?php
    if (!isset($_SERVER['PHP_AUTH_USER'])) {
        header('WWW-Authenticate: Basic realm="My Realm"');
        header('HTTP/1.0 401 Unauthorized');
        echo 'The second round get user and pwd!';
        exit;
    } else if ($_SERVER['PHP_AUTH_USER'] == "admin" and $_SERVER['PHP_AUTH_PW'] =="1234"){
        echo "You logged in!";
    } else{
        echo "User or psw aren't correct!";
    }
?>

Example 5: Headers senden.

index.html

<html>
<head>
    <script src="node_modules/myajaxcall/myajax_bundle.js"></script>
</head>
<body>
    <button id="btn">Data</button> 
    <div id="data"></div>
    <script>
      document.getElementById("btn").addEventListener("click",
        function(){
          let user = "admin";
          let pwd = "1234";  
          let headers = [
                {header:"Content-type", value: "text/html"},
                {header:"MyHeader", value: "nice header"}
              ]
          new myAJAX("auth.php",null, null, myCallback, user, pwd, headers);    
        })
        function myCallback(res,resTxt,resXML,resURL,resType, resHeaders){
            document.getElementById("data").innerHTML=resHeaders;
        }
    </script>
</body>
</html>

auth.php

<?php
    if (!isset($_SERVER['PHP_AUTH_USER'])) {
        header('WWW-Authenticate: Basic realm="My Realm"');
        header('HTTP/1.0 401 Unauthorized');
        echo 'The second round get user and pwd!';
        exit;
    } else if ($_SERVER['PHP_AUTH_USER'] == "admin" and $_SERVER['PHP_AUTH_PW'] =="1234"){
        echo "You logged in!";
    } else{
        echo "User or psw aren't correct! <br>";
        echo getallheaders(); 
    }
?>
`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

New in this version!

What is myAJAX?

Benefits!

Installation

for testing purposes

locale installation

Working method and examples

simple examples and explanations

Example 1: Filename and ID

Example 2: Transfer of form data to a PHP script

Callback function

Structure of the callback function

Example 3: Callback, receives JSON data from a PHP file.

Example 4: Authentication, user/password.

Example 5: Headers send.

Deutsch

Neu in dieser Version!

Was ist myAJAX?

Vorteile!

Installation

für Testzwecke

locale Installation

Arbeitsweise und Beispiele

einfache Beispiele und Erklärungen

Beispiel 1: Filename und ID

Beispiel 2: Übergabe von Formulardaten an ein PHP-Script

Callback-Function

Aufbau der Callback-Funktion

Beispiel 3: Callback, empfängt JSON-Daten von einer PHP-Datei.

Example 4: Authentifizierung, user/password.

Example 5: Headers senden.

About

Releases

Packages

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
Readme.md		Readme.md
myajax_bundle.js		myajax_bundle.js
package.json		package.json

InnoGuide/myAJAX

Folders and files

Latest commit

History

Repository files navigation

New in this version!

What is myAJAX?

Benefits!

Installation

for testing purposes

locale installation

Working method and examples

simple examples and explanations

Example 1: Filename and ID

Example 2: Transfer of form data to a PHP script

Callback function

Structure of the callback function

Example 3: Callback, receives JSON data from a PHP file.

Example 4: Authentication, user/password.

Example 5: Headers send.

Deutsch

Neu in dieser Version!

Was ist myAJAX?

Vorteile!

Installation

für Testzwecke

locale Installation

Arbeitsweise und Beispiele

einfache Beispiele und Erklärungen

Beispiel 1: Filename und ID

Beispiel 2: Übergabe von Formulardaten an ein PHP-Script

Callback-Function

Aufbau der Callback-Funktion

Beispiel 3: Callback, empfängt JSON-Daten von einer PHP-Datei.

Example 4: Authentifizierung, user/password.

Example 5: Headers senden.

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Packages