js: encapsular AJAX nativo

Prefacio:

Ajax es una tecnología que puede cambiar parte del contenido de la página web sin actualizar la página web. Se refiere a javascript asíncrono y xml para la interacción de datos con el servidor. Ajax se puede usar cuando se envía una pequeña cantidad de datos al servidor. Este artículo habla de Es una aplicación nativa ajax+django

Los beneficios de ajax:

No es necesario actualizar la página web para interactuar con el servidor;

Le permite actualizar algunos datos en la página web en función de los eventos del usuario;

Pasos para encapsular ajax nativo:

Cree un objeto XMLRequestHttp;

Abra el enlace, envíe la solicitud,

enviar parámetros

recibir respuesta

1. Cree un objeto XMLRequestHttp;

Esta es la base para encapsular ajax;

let xhr = new XMLRequestHttp()//创建XMLRequestHttp对象

2. Abra el enlace y envíe la solicitud;

Hay dos formas de enviar solicitudes: obtener y publicar;

En este paso, se debe considerar la política del mismo origen: es decir, garantizar la consistencia de nombre de dominio + protocolo + número de puerto

Este paso se realiza a través de open()

xhr.open('请求方式','请求地址')

3. Enviar parámetros

Este paso se divide en dos tipos según los diferentes métodos de solicitud.

//get请求发送参数，一般填的是null即：
xhr.send(null);
//post请求有所不同，
xhr.SetRequestHeaders('Content-Type','application/x-www-form-urlencoded');//这一步是向请求添加http头
xhr.send('name='李四'&age=30');

4. Recibe la respuesta

Hay dos tipos de respuestas del servidor:

1. responseText: Obtener datos en forma de cadena

2. responseXML: Obtener datos en forma de xml

Cuando el servidor al que se envía la solicitud está en estado listo, cambiará, llamando así a cambio de estado listo

readyState tiene los siguientes cinco estados:

0: indica que se ha generado la instancia XMLRequestHttp, pero no se ha llamado a open;

1: indica que la conexión se ha establecido y que todavía no se ha llamado a send(), y setRequestHeader() todavía se puede usar para configurar la información del encabezado de la solicitud http;

2: indica que se ha ejecutado el método send() y que se han recibido la información del encabezado y el código de estado

3: Indica que se están recibiendo los datos en la parte del cuerpo del servidor

4: Indica que se han recibido todos los datos del servidor, o esta recepción falló

//当请求发送的服务器是readyState就会发生改变，从而调用onreadystatechange
xhr.onreadystatechange = () =>{
    if(xhr.readystate == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}

django+código total ajax

1. Crea un proyecto Django

1. Descargue el paquete de terceros django-cors-headers, que se utiliza para solicitudes entre dominios

pip install django-cors-headers//下载第三方包

2. Configure el siguiente contenido en el archivo settings.py

INSTALLED_APPS = [
    'corsheaders'
]
MIDDLEWARE = [
    #'django.middleware.csrf.CsrfViewMiddleware',//这个要注释掉
    'corsheaders.middleware.CorsMiddleware'//这个是新增的
]
CORS_ORIGIN_ALLOW_ALL = True

3. Descarga la sub-aplicación e ingrésala en la consola

python manage.py startapp app1//app1是子应用名，可以自定义

4. Registrar sub-aplicaciones

INSTALLED_APPS = [
    'app1',
]

5. Configurar el enrutamiento

//配置一级路由
from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app1/',include('app1.urls',namespace='app1'))
]
//配置二级路由
app_name = 'app1'
from django.urls import path
from .views import *
urlpatterns = [
    path('index/',index.as_view(),name='index'),
]

6. Ver función

from django.shortcuts import render
from django.http import JsonResponse
from django.views import View
# Create your views here.
class index(View):
    def get(selt,request):
        datas = {
                 'id':1,
                'title':'老树昏鸦',
                'fanwei': '莫道黄昏',
            }
        #datas是返回给ajax的数据
        return JsonResponse(datas,safe=False)

7. Contenido escrito en js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /**
         * 封装ajax
         * @param method:请求的方式get还是post
         * @param url:请求的地址
         * @param params:发送的参数
         * @callback 返回响应调用的函数
         * */
        function ajax(method, url, params = null, calleck) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url);
            if (method.toLowerCase() == 'get') {//判断请求方式
                xhr.send(params);
            } else {
                xhr.setRequestHeader('Content-Type', application / x - www - form - urlencoded);
                var str = '';
                for (p in params) {
                    str += `${p}=${params[p]}&`;
                }
                xhr.send(str);
            }
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    calleck(xhr.responseText);
                }
            }
        }
        //执行ajax
        ajax('get', 'http://127.0.0.1:8000/app1/index/', null, createHtml);
        function createHtml(data) {
            var data = JSON.parse(data);
            console.log(data)
        }
    </script>
</body>
</html>

Si ve el contenido en la consola, es correcto.