js—封装原生AJAX

最新推荐文章于 2023-09-20 10:27:08 发布

蝉夏不馋夏

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量2k

点赞数 1

分类专栏： JavaScript-学习笔记 django 文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_65565362/article/details/124565662

版权

JavaScript-学习笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

django

5 篇文章 0 订阅

订阅专栏

前言：

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

<!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>

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