js—封装原生AJAX

前言：

ajax是一种无需刷新网页即可更改网页内部分内容的技术，指的是异步的javascript和xml用于和服务器端做数据交互，当向服务器提交少量数据时可以使用ajax，该篇文章讲的是原生ajax+django的应用

ajax的好处：

无需刷新网页，从而与服务器做交互；
允许你根据用户事件来更新网页的部分数据;

封装原生ajax的步骤：

创建XMLRequestHttp对象；
打开链接，发送请求，
发送参数
接收响应

1、创建XMLRequestHttp对象；

这是封装ajax的基础；

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

2、打开链接，发送请求；

发送请求的方式分两种：get和post；

在这一步，要考虑同源策略：即保证域名+协议+端口号的一致

这一步通过open()来完成

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

3、发送参数

这一步根据请求方式的不同，分为了两种

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

4、接收响应

来自服务器的响应分两种：

1、responseText：获取字符串形式的数据

2、responseXML：获取xml形式的数据

当请求发送的服务器是readyState就会发生改变，从而调用onreadystatechange

readyState具有一下五种状态：

0：表示XMLRequestHttp实例已生成，但open没被调用；

1：表示建立了连接send()还没被调用，仍可使用setRequestHeader()设定http请求头的信息；

2：表示send()方法已被执行，并且头信息和状态码已经收到

3：表示正在接收服务器传来的body部分的数据

4：表示服务器数据已被全部接收，或者本次接收失败

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

django+ajax总代码

1、创建django项目

1、下载第三方包django-cors-headers该包作用是跨域请求

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

2、在settings.py文件中配置以下内容

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

3、下载子应用在控制台输入

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

4、注册子应用

INSTALLED_APPS = [
    'app1',
]

5、配置路由

//配置一级路由
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、视图函数

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、js中书写的内容





    
    
    
    Document

在控制台看到一下内容则是成功了

js—封装原生AJAX

Python相关栏目本月热门文章