# AJAX
## What is AJAX?
* Asynchronous JavaScript And Xml
* Sends **asynchronous requests**
\
### AJAX Request
: Sends an `XHR`
### XMLHttpRequest (XHR)
* Use `XMLHttpRequest (XHR)` objects to interact with servers.
* You can retrieve data from a URL without having to do a full page refresh.
* This enables a Web page to update just part of a page without disrupting what the user is doing.
* XMLHttpRequest is used heavily in AJAX programming.
\
## Django API: Building Ping-Pong
> Creating a virtual environment
```bash
python -m venv venv
```
> Making the project find pip list here
```bash
source venv/bin/activate
```
> Installing pip inside the virtual environment
```bash
(venv)
chloe@chloe-XPS-15-9570 ~/Workspace/VanillaJS/live/AJAX
$ pip -m pip install --upgrade pip
```
> Installing django inside the virtual environment
```bash
(venv)
chloe@chloe-XPS-15-9570 ~/Workspace/VanillaJS/live/AJAX
$ pip install django==2.1.15
```
### Using the `art` package
> installation
```bash
pip install art
```
### `ping.html`
```html
Art
```
### `views.py`
```python
from django.shortcuts import render
from django.http import JsonResponse
import art
# Create your views here.
def ping(request):
return render(request, 'arts/ping.html')
def pong(request):
user_input = request.GET.get('inputText')
art_text = art.text2art(user_input)
data = {
'success': True,
'content': art_text,
}
return JsonResponse(data)
```
\
## Implementing Likes with AJAX
1. Send a request to the data manipulation URL (Django app) through AJAX (HTTP Request sent by the browser)
2. Based on the received response data, change only the heart's HTML attributes
### `index.html`
```html
{% extends 'base.html' %}
{% block content %}
INDEX
{% for article in articles %}
Author: {{ article.user }}
Title: {{ article.title }}
Content: {{ article.content }}
AJAX method
{% if user in article.like_users.all %}
{% else %}
{% endif %}
Traditional method
{% if user in article.like_users.all %}
{% else %}
{% endif %}
{{article.like_users.all|length}} people like this post.
{% endfor %}
CREATE
{% endblock %}
```
### `views.py`
```python
@login_required
def like_api(request, article_pk):
user = request.user
article = get_object_or_404(Article, pk=article_pk)
if article.like_users.filter(pk=user.pk).exists():
article.like_users.remove(user)
liked = False
else:
article.like_users.add(user)
liked = True
context = {
'liked': liked,
'count': article.like_users.count()
}
return JsonResponse(context)
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://chloe-codes1.gitbook.io/til/web/javascript/11_ajax.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.