URL

• Protokoll: zur Kommunikation verwendetes Protokoll (z. B. https)
• Hostname: IP oder Domain
• Port: erlaubt mehrere Dienste auf dem selben Host (sonst Standardport, z. B. 443 für https)
• Pfad: gewünschte Resource (kann Dateipfad entsprechen)
• Suche: GET Parameter mit Werten
• Hash: HTML Element ID, zu der gesprungen wird

JavaScript URL API

❮❯JavaScriptconst url = new URL('https://www.google.com/search?q=url+api');
//url = new URL("https://www.beispiel.de:8000/pfad1/pfad2?param1=1&param2=2#elementId");
//url = new URL("https://localhost:3000/");
//url = new URL("https://de.wikipedia.org/wiki/Uniform_Resource_Locator#Aufbau");
console.log(url);
console.log(url.href); // https://www.google.com/search?q=url+api
console.log(url.protocol); // https:
console.log(url.hostname); // www.google.com
console.log(url.port); //
console.log(url.pathname); // /search
console.log(url.search); // ?q=url+api
console.log(url.searchParams.get('q')); // url api
url.searchParams.forEach((value, key) => {
  console.log(key + ': ' + value); // q: url api
});
console.log(url.hash); //

Request URL

Request URL kann analysiert werden, um passenden Response zu senden.

Codeconst http = require('http');

const hostname = '127.0.0.1'; // localhost
const port = 3000;

const server = http.createServer((request, response) => {
  response.statusCode = 200;
  response.setHeader('Content-Type', 'text/plain');
  response.setHeader('Access-Control-Allow-Origin', '*'); // on CORS error
  const url = new URL(request.url || '', `http://${request.headers.host}`);
  switch (url.pathname) {
    case '/':
      response.write('Hello World');
      break;
    case '/search':
      response.write('Hier ist was du suchst: ' + url.searchParams.get('item'));
      break;
    default:
      response.statusCode = 404;
  }
  response.end();
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

❮❯HTML<button id="button">Suche</button>
<input id="searchItem" type="text" />
<div id="answer" />

❮❯JavaScriptasync function requestTextWithGET(url) {
  const response = await fetch(url);
  const text = await response.text();
  return text;
}

const answer = document.getElementById('answer');
const button = document.getElementById('button');
button.addEventListener('click', getAndAttachText);
const searchItem = document.getElementById('searchItem');

async function getAndAttachText(event) {
  const text = document.createElement('p');
  text.textContent = await requestTextWithGET(
    'http://localhost:3000/search?item=' + searchItem.value
  );
  answer.appendChild(text);
}