首页 > 其他分享 >ajax的请求,异步,同源策略的学习

ajax的请求,异步,同源策略的学习

时间:2022-11-02 00:22:18浏览次数:75  
标签:异步 请求 res request Ajax ajax user 同源

Ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。

Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。

Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下,能够更新部分⽹⻚的技术。

通过在后台与服务器进⾏少量数据交换,Ajax 可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下,对⽹⻚的某部分进⾏更新。

传统的⽹⻚(不使⽤ Ajax)如果需要更新内容,必须重载整个⽹⻚⻚⾯。

Ajax的优点:

异步:发送⼀个请求,不需要等待响应返回,随时可以再发送下⼀个请求,即不需要等待。

局部刷新:通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。【传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。】

应用场景:

image-20221027114444300这是一个cnblog账户注册界面,当我们在填写昵称的时候输入regina,这个过程本身并没有进行表单提交或者向服务器发送请求,但是当光标离开这个input框之后,就会自动检测了这里面的内容,并且返回提示这个昵称被占用了,而在图二到图三的过程当中,前端显示为下图,有一个刷新的过程,这个就是由于Ajax的局部刷新作用

image-20221027114424672

这个过程中到底浏览器做了些什么工作

image-20221027130522590

我们筛选出XHR(XmlHttpResponse)类型的报文,看到其实浏览器是进行了一个checkDisplayName的操作发送给了服务器,然后服务器的返回如下

image-20221027130705026

image-20221027131118350

json回顾

映射关系

Python Json
dict object
list, tuple array
str string
int, float number
True True
False False
None Null
dic = {
    'user':"regina",
    'age':22,
  	'is_married':True
}
print(json.dumps(dic),type(json.dumps(dic)))

{"user": "regina", "age": 22, "is_married": true} <class 'str'>

可以看到字典中的单引号全部变成了双引号,True映射成了true

dic = [{'user':"regina"},{'age':20}]
print(repr(json.dumps(dic)))
dic = ({'user':"regina"},{'age':20})
print(repr(json.dumps(dic)))

'[{"user": "regina"}, {"age": 20}]'
'[{"user": "regina"}, {"age": 20}]'

列表和元组全变为了数组形式。

Ajax请求

image-20221031163348141

首先确定一个概念就是Ajax请求不是表单提交,是JS代码提交的,说明是要构建一个js代码函数进行提交请求,所以这里的submit是没有用的,现在构建一段js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <title>Title</title>
</head>
<body>
<h3>注册界面</h3>
用户名<input type="text" class="user"><br>
密码&nbsp;&nbsp;&nbsp;&nbsp;<input type="password"><br>
<input type="submit">

<script>
    $(".user").blur(function () {
        alert(123);
    })
</script>
</body>
</html>

首先做一个测试,当光标移除用户名时,会弹窗。

image-20221031164212951

现在改为ajax请求的方式

<script>
    $(".user").blur(function () {
        $.ajax({
            url:"http://127.0.0.1:8001/user/check/",
            //请求方式默认get
        })
    })
</script>

然后我们设置好路由,在用户名中输入内容并离开框,看是否有新的请求发出。

image-20221031165343058

我们的目的是要将input标签里的用户名传给后端

$(".user").blur(function () {
        $.ajax({
            url:"http://127.0.0.1:8001/user/check/",
            //请求方式默认get
            data:{
                "name" : $(".user").val()
            },
        })
    })

image-20221031170310550

经过测试,我们的数据已经传回给了后端,并且也可以打印出来,现在要做的就是进行一个验证再反馈到前端

def check(request):
    ret = User.objects.filter(username=request.GET.get("name"))
    if ret:
        return HttpResponse("用户已存在")
    else:
        return HttpResponse("")

image-20221031170719397

image-20221031170736348

这样的话请求我们就做好了

$.ajax({
            url:"http://127.0.0.1:8001/user/check/",
            //请求方式默认get
            data:{
                "name" : $(".user").val()
            },
            //当相响应正常时触发当函数
            success:function (res) {
                console.log(res)
            }           
        })

image-20221031171045159

success参数得到了后端响应回来的数据,并打印了出来,现在可以通过dom对象的操作,将返回内容添加到登陆界面进行提示。在用户名标签的后面添加一个span标签,然后选中标签进行添加内容

$(".err").html(res)

image-20221031171612764

image-20221031171653871

响应json数据

    if ret:
        res["exist"] = True
        res["msg"] = "该用户已存在"

    return HttpResponse(json.dumps(res))

为什么要用序列化,首先json可以发送很多的接口数据,并且如果要自己一个一个参数传会很麻烦。按照正常逻辑,上图代码中我们首先写好了json.dumps 将序列化转为字符串,并且在html文件中进行反序列化,

success:function (res) {
  console.log(res);
  data = JSON.parse(res);
  console.log(res);
  if(data.exist){
    $(".err").html(data.msg);
  }
  else{
    $(".err").html(" ");
  }

image-20221031203024224这样我们也可以拿到序列化中的值,但是ajax好的一点就是当我们用JsonResponse(res),在html中我们可以直接调用参数,不需要再进行parse反序列化。

image-20221031203409233

练习实例

用ajax实现一个加法

<input type="text" class="add n1"> + <input type="text" class="add n2"> = <input type="text" class="add ans" > <button class="btn">计算</button>

$(".btn").click(function () {
        $.ajax({
            url:"http://127.0.0.1:8001/user/add/",
            type:"post",
            data:{
                "num1":$(".n1").val(),
                "num2":$(".n2").val(),
            },
            success: function(res){
                $(".ans").val(res);
            }
        })
    })
def add(request):
    num1 = int(request.POST.get("num1"))
    num2 = int(request.POST.get("num2"))
    return HttpResponse(str(num1+num2))

image-20221031205211605

异步

同步请求指的是当我访问url时,如果在视图函数当中添加一个睡眠,让服务器等待了5秒,

def reg(request):
    time.sleep(5)
    return render(request,"reg.html")

image-20221031210232136

那么相应的,客户端如图所示,也需要等5秒才能进入页面。

但是异步指的是当我在ajax请求的视图函数当中添加一个睡眠,但其他的请求函数不做任何改变的话,那么这个睡眠等待只会影响这一个ajax请求,其他的正常工作。

def check(request):
    ret = User.objects.filter(username=request.GET.get("name"))
    res = {"exist":False, "msg":""}
    time.sleep(5)
    if ret:
        res["exist"] = True
        res["msg"] = "该用户已存在"

    return JsonResponse(res)

def add(request):
    num1 = int(request.POST.get("num1"))
    num2 = int(request.POST.get("num2"))
    return HttpResponse(str(num1+num2))

image-20221031210539763

同源策略

image-20221101235237131

之前我们一直输入的是ip地址和端口号以及路由,但是现在直接本地文件的形式打开网页,并且我们代码的路由依然是服务器地址,但是依然会报错。

image-20221101235353713

但问题就是他这个路由请求没有问题,我们可以在后端把1和2都打印出来,但是无法进行响应。

image-20221101235440265

image-20221101235548220

这是因为浏览器的同源策略导致的

同源策略概念

是一种约定,是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能都会被影响。可以说web是构建在同源策略之上的,浏览器只是针对同源策略的一种实现。

同源策略(same origin policy)是netScape(网景)提出的一个安全策略,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。具体表现为浏览器在执行脚本前,会判断脚本是否与打开的网页是同源的,判断协议、域名、端口是否都相同,相同则表示同源。其中一项不相同就表示跨域访问。会在控制台报一个CORS异常,目的是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。

image-20221102000002541

解决方案:跨域资源共享(CORS)

服务端设置,可以允许其他源访问服务端资源,借助nodejs实现。

res = HttpResponse(str(num1+num2))
res["Access-Control-Allow-Origin"] = "*"
return res

image-20221102000718600

headers里会有我们添加的那句话,识别到这句话就不会拦截了。

Cors有两种请求,一种是简单请求,一种是非简单请求,只要满足以下两种要求之一就是简单请求

(一)请求方法是下列三个之一:

  • GET

  • POST

  • HEAD

(二) HTTP的头部信息不超过以下几种字段:

  • Accept
  • Accept-language
  • Content-language
  • Last-Event-ID
  • Content-Type:只限于三个值【application/x-www-form-urlencoded、multipart/form-data、text/plain】

标签:异步,请求,res,request,Ajax,ajax,user,同源
From: https://www.cnblogs.com/ivanlee717/p/16849676.html

相关文章

  • AJAX & jQuery 小结
    AJAX概念:异步的JavaScript和XML作用:ajax就是用来做局部刷新的一种方法PS:现在基本不用xml这种数据交换格式,都是用js+json实现ajax异步请求注意:前端页面发......
  • javascript异步编程之generator(生成器函数)与asnyc/await语法糖
    Generator异步方案相比于传统回调函数的方式处理异步调用,​​Promise​​最大的优势就是可以链式调用解决回调嵌套的问题。但是这样写依然会有大量的回调函数,虽然他们之间......
  • javascript异步编程之generator(生成器函数)与asnyc/await语法糖
    Generator异步方案相比于传统回调函数的方式处理异步调用,Promise最大的优势就是可以链式调用解决回调嵌套的问题。但是这样写依然会有大量的回调函数,虽然他们之间没有嵌......
  • Vue 中的 Ajax
    Vue中的Ajax1.1使用代理服务器1.1.1方式一在​​vue.config.js​​中添加如下配置:devServer:{proxy:"http://localhost:5000"}说明:优点:配置简单,请求资源时直接发给......
  • day23 同源策略及JSONP
     同源策略(浏览器的一种机制)概述:浏览器为了安全,产生的一种同源策略,这个策略是为了防止一些恶意的请求,保护用户的隐私.同源策略主要有三个内容,分......
  • bootstrap select插件的使用,及其ajax传值插入select的option
    首先需要导入bootstrap.css 和bootstrap.js之后再倒入bootstrap-select.css和bootstrap-select.js:<linktype="text/css"rel="stylesheet"href="https://cdn.bootcss.c......
  • AJAX基础+Axios快速入门+JSON使用+综合案例
    目录1、AJAX1.1概述1.1.1作用1.1.2同步和异步1.2快速入门1.2.1服务端实现1.2.2客户端实现1.3案例1.3.1需求1.3.2分析1.3.2后端实现1.3.3前端实现2、Axios异步......
  • 解决layui表单ajax提交回调函数不起作用问题的两种方式
    最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉。一个简单的登录就困扰了我很久。登录的form通过ajax提交回调函数老是不起作用。经过浪费了N多时间......
  • Vue 中的 Ajax
    1.1使用代理服务器1.1.1方式一在vue.config.js中添加如下配置:devServer:{proxy:"http://localhost:5000"}说明:优点:配置简单,请求资源时直接发给前端(8080)即可......
  • day22 ajax
    概述:AJAX(asynchronousJavaScriptandxml)异步的Javascript和xml。用于发送http请求(可以是异步请求),能够完成页面的局部刷新功能,在整个页面不刷新的前提下,发送对应的请求......