What is AJAX? & How it’s Works

By Mehul Kareliya 21 Nov, 2024 70 mins read 150 views

0 comments 0 likes

Here put some sample code. for full code end of post click download now

What is AJAX?

AJAX = Asynchronous JavaScript And XML.

AJAX is not a programming language. ajax request data from a web server to display or use the data

AJAX is a misleading name. Although AJAX apps may use XML to transfer data, plain text or JSON text are also commonly used.

AJAX allows web pages to be updated asynchronously by exchanging data with a web server in the background. This means that you can update parts of a web page without having to reload the entire page.

AJAX it's Works

1. In Web page On click or change event
2. XMLHttpRequest sends a request to a web server
3. server processes the request
4. server sends a response back to the web page
5. The response is read by JavaScript
6. action do (like update,insert,delete) is performed by JavaScript

Modern Browsers use (Fetch API)

XMLHttpRequest Object. sample
var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);
//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {//Call a function when the state changes.
  if(http.readyState == 4 && http.status == 200) {
      alert(http.responseText);
  }
}
http.send(params);

In case you have/create an object you can turn it into params using the following code, i.e:

var params = new Object();
params.myparam1 = myval1;
params.myparam2 = myval2;
// Turn the data object into an array of URL-encoded key/value pairs.
let urlEncodedData = "", urlEncodedDataPairs = [], name;
for( name in params ) {
urlEncodedDataPairs.push(encodeURIComponent(name)+'='+encodeURIComponent(params[name]));
}

Use modern JavaScript!

Initialize the cURL session:

$url = "www.domain.com";
$ch = curl_init($url);

If your request has headers like bearer token or defining JSON contents you have to set HTTPHEADER options to cURL:

$token = "generated token code";
curl_setopt(
  $ch, 
  CURLOPT_HTTPHEADER, 
  array(
      'Content-Type: application/json', // for define content type that is json
      'bearer: '.$token, // send token in header request
      'Content-length: 100' // content length for example 100 characters (can add by strlen($fields))
  )
);

If you want to include the header in the output set CURLOPT_HEADER to true:

curl_setopt($ch, CURLOPT_HEADER, false);

Set RETURNTRANSFER option to true to return the transfer as a string instead of outputting it directly:

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

To check the existence of a common name in the SSL peer certificate can be set to 0(to not check the names), 1(not supported in cURL 7.28.1), 2(default value and for production mode):

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);

For posting fields as an array by cURL:

$fields = array(
  "username" => "user1",
  "password" => "passuser1",
  "gender" => 1
);
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);

Execute cURL and return the string. depending on your resource this returns output like result=OK:

$result = curl_exec($ch);

Close cURL resource, and free up system resources:

curl_close($ch);

Exmple

-H "Content-Type: application/json"
curl --header "Content-Type: application/json" \
--request POST \
--data '{"username":"xyz","password":"xyz"}' \
http://localhost:3000/api/login

Sample code

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"http://www.example.com/tester.phtml");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, 
        http_build_query(array('postvar1' => 'value1')));
        
// Receive server response ...
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$server_output = curl_exec($ch);
curl_close($ch);
// Further processing ...
if ($server_output == "OK") { 
... 
} else {
... 
}