[go: up one dir, main page]
Scribd
Upload
5 views36 pages

PHP and Ajax

AJAX (Asynchronous JavaScript and XML) is a technique that enables fast and dynamic web page updates by allowing parts of a page to refresh without reloading. It works by sending HTTP requests to a server, which processes the request and returns data that JavaScript uses to update the page. The document also discusses HTTP methods, provides examples of using PHP with AJAX, and outlines the advantages and real-world applications of this technology.

Uploaded by

emmanuel.gumayagay1823
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views36 pages

PHP and Ajax

AJAX (Asynchronous JavaScript and XML) is a technique that enables fast and dynamic web page updates by allowing parts of a page to refresh without reloading. It works by sending HTTP requests to a server, which processes the request and returns data that JavaScript uses to update the page. The document also discusses HTTP methods, provides examples of using PHP with AJAX, and outlines the advantages and real-world applications of this technology.

Uploaded by

emmanuel.gumayagay1823
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

PHP and AJAX

Eman Gumayagay
What is AJAX

o AJAX (Asynchronous JavaScript and XML) is a technique for


creating fast and dynamic web pages.

o It allows web pages to update asynchronously by


exchanging data with a server behind the scenes.

o This means parts of a page can be updated without


reloading the entire page.
How AJAX Works

1. A user triggers an event (e.g., clicking a button).

2. JavaScript sends an HTTP request to the server (usually using


XMLHttpRequest or Fetch API).

3. The server (PHP) processes the request and returns data.

4. JavaScript processes the response and updates the page


dynamically.
What is XMLHttpRequest?

o XMLHttpRequest (XHR) is an API used to send and


receive data asynchronously from a server.

o It allows JavaScript to communicate with the server


without refreshing the page.
WHAT is HTTP?

o HyperText Transfer Protocol (HTTP) is the


foundation of data communication on the web.

o It enables the transfer of data between clients


(browsers) and servers.

o Eg: http://localhost/phpmyadmin
WHAT is HTTPS?

o HyperText Transfer Protocol Secure (HTTPS) is


an encrypted version of HTTP.

o It uses SSL/TLS encryption to secure data from


hackers.

o Eg: https://facebook.com/profile.php
HTTP Methods: GET

o GET is used to request data from the server.

o Data is sent in the URL (query string).

Best for:
✅ Fetching data
✅ Search queries
✅ Simple requests
HTTP Methods: GET

o GET is used to request data from the server.

o Data is sent in the URL (query string).

Best for:
✅ Fetching data
✅ Search queries
✅ Simple requests
HTTP Methods: POST

o POST is used to send data to the server.

o Data is sent in the request body (not visible in URL).

Best for:
✅ Submitting forms
✅ Secure data transfer
✅ Large data submission
GET vs POST
GET vs POST
Simple PHP & AJAX Example: GET

Here were getting DATA from a website php page using


XMLHttpRequest(), and were passing the name value as John, PHP
file will verify and will echo and AJAX will return the value as a result.
Simple PHP & AJAX Example: POST

Here were getting DATA from a website php page using


XMLHttpRequest(), and were passing values from a query
string, as a FORM, PHP will process it and returns a value
AJAX Fetch API

We can also use fetch api to make an AJAX Request to the


server, it helps returns the data without reloading the site.
Advantages of Using PHP with AJAX

✔️Faster Performance – Only necessary data is updated.


✔️Better User Experience – No page reloads.
✔️Efficient Server Communication – Reduces server
load.
✔️Easy Integration – PHP handles data processing easily.
Real-World Applications

o Live Search (Google Suggest)

o Auto-Saving Forms

o Real-Time Chat Applications

o Dynamic Content Loading


APPLICATION

YEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY!!!!!!!!!!!!!
Create Database

Create new
Database:
phpmyadmin
Create Users Table

Create new
Table: users
Create Columns Table

Don’t forget the A.I [AUTO INCREMENT] at user_id


Create Columns Table

Don’t forget the A.I [AUTO INCREMENT] at user_id, after, save


Create Activity Folder

On your File Explorer, create your folder inside, htdocs at XAMPP, after that open
your folder at VS Code

Eg: C://xampp/htdocs/YOUR FOLDER


Create Files

Now on your VS Code,

Create multiple files

Connection.php – for our connection

Fetch.php – to fetch from database

Index.php – main file

Insert.php – to insert data


Connection.php

Now istablish your


MySQL Connection
in connection.php
Index.php

Include your
connection to you
main File:
index.php
Create UI: HTML

Design your HTML


Form, include
fields username,
password,
display_name
Add Scripts

Add JavaScript
scripts, to integrate
with PHP, insert.php

Were sending
query string to
the server
Registration

In your insert.php,

Create a query
that will insert a
user if it doesn’t
exists yet! For
added security.
TEST

Now if we test at
the browser, after
submitting we can
see a alert notif,
and the data is
being inserted on
the background.
FETCHING in Background

After submitting the


form, we want to
update our table, so
add another
function that runs
after the execution
of registerUser
FETCHING in Background

Use GET
XMLHttpRequest to
request to server;

NOTE: WERE ONLY


USING GET, IF WE
DON’T HAVE ANY TO
PASS FROM
DATABASE.
Fetch.php

Add background
functionalities that
gets user, and
display to table.
TEST

Test again,

After registering
it will update
our table.
DISPLAY

As we can see
here, when the
page is loaded, the
users isn’t loading
yet, so we need to
display them first.
DISPLAY using Fetch

So include your
fetch.php inside the
tbody, it will run
again the fetch and
return it’s value,
and then appended
to the table.
YEYYYYYYYYYYYYYYYYYYYY

HAPPY CODING!

You might also like