Javascript xmlhttp (Examples)

https://webdevfix.com/examples-for-xmlhttp-in-javascript

Tech:

Javascript

Since:

1 year ago

Views:

In Javascript, XMLHttpRequest is used to send and receive data from a server. It is a cross-browser solution for making asynchronous requests.

'xmlhttp' Example

The following example shows how to use the XMLHttpRequest object to send and receive data from a server.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.readyState);
    console.log(this.status);
    console.log(this.statusText);

    console.log(this.responseText);
    console.log(this.responseXML);

    console.log(this.getAllResponseHeaders());
    console.log(this.getResponseHeader("Last-Modified"));
  }
};
x.onload = function() {
  var data = JSON.parse(this.responseText);
  console.log(data);
};
x.onerror = function(err) {
  console.log("Fetch Error :", err);
};
x.open("GET", "API_URL", true);
x.setRequestHeader("Content-type", "application/json");
x.send();
x.abort();

onreadystatechange

The onreadystatechange event is triggered every time the readyState property changes.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  // code
};
x.open("GET", "API_URL", true);
x.send();

readyState

The readyState property returns the current state of the XMLHttpRequest.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  if (this.readyState == 4) {
    // code
  }
};
x.open("GET", "API_URL", true);
x.send();

// 0: request not initialized
// 1: server connection established
// 2: request received
// 3: processing request
// 4: request finished and response is ready

status

The status property returns the status code of the XMLHttpRequest.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  if (this.status == 200) {
    // code
  }
};
x.open("GET", "API_URL", true);
x.send();

// 200: "OK"
// 403: "Forbidden"
// 404: "Not Found"

statusText

The statusText property returns the status text of the XMLHttpRequest.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  if (this.statusText == "OK") {
    // code
  }
};
x.open("GET", "API_URL", true);
x.send();

// "OK"
//  "Not Found"

responseText

The responseText property returns the response text of the XMLHttpRequest.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  var y = this.responseText;
};
x.open("GET", "API_URL.txt", true);
x.send();

responseXML

The responseXML property returns the response XML of the XMLHttpRequest.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  var y = this.responseXML;
};
x.open("GET", "API_URL.XML", true);
x.send();

XMLHttpRequest()

The XMLHttpRequest() constructor creates a new XMLHttpRequest object.

var x = new XMLHttpRequest();

open()

The open() method opens a new connection to a resource.

var x = new XMLHttpRequest();
x.open("GET", "API_URL", true);

// open(method, url, async, user, psw)

// method: GET or POST
// url: the file location
// async: true (asynchronous) or false (synchronous)
// user: optional user name
// psw: optional password

send()

The send() method sends the request to the server.

var x = new XMLHttpRequest();
x.open("GET", "API_URL", true);
x.send();
x.send("SOME_TEXT_IF_POST");

setRequestHeader()

The setRequestHeader() method sets the value of an HTTP request header.

var x = new XMLHttpRequest();
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

abort()

The abort() method aborts the current request.

var x = new XMLHttpRequest();
x.abort();

getAllResponseHeaders()

The getAllResponseHeaders() method returns all the response headers as a string.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  var y = this.getAllResponseHeaders();
};
x.open("GET", "API_URL", true);
x.send();

getResponseHeader()

The getResponseHeader() method returns the value of a response header.

var x = new XMLHttpRequest();
x.onreadystatechange = function() {
  var y = this.getResponseHeader("Content-Type");
};
x.open("GET", "API_URL", true);
x.send();

Javascript Number - 10 Methods and 5 Properties (Reference)

2 years ago

Javascript Statements - 16 Statements (Reference)

2 years ago

Javascript matchMedia - 2 Methods and 2 Properties (Reference)

2 years ago

Javascript Object - 21 Methods (Reference)

1 year ago

Javascript Document - 24 Methods (Reference)

1 year ago