zoukankan      html  css  js  c++  java
  • ajax 介绍,ajax的请求通过js中的 xmlHttpRequest对象完成

    ajax (Asynchronous JavaScript And XMl)  异步JavaScript和xml,传输的数据是xml,现在是json数据,

    使用JavaScript与

    同步交互:发出一个请求,等待服务器响应结束,才能发出第二个请求

    异步交互:发出一个请求,无需等待服务器响应解除,就可以发出第二个请求。

    ajax的特点:异步,和局部刷新

    json对象,值的都是字符串,在js的对象,

    如:在python语言和PHP语言传输数据,是需要一个解析器的,json字符串存的就是字符串,不需要解析器,

    优点:局部刷新性能高,异步请求,

    缺点:不适合所有场景,有时用到同步交互,

      请求次数过多,增大服务器压力,

      ajax是使用JavaScript技术实现的,还需要处理浏览器的兼容问题,

    ajax的核心是在JavaScript中添加一个  xmlHttpRequest对象,所有的请求都是xmlHTTPRequest对象来完成的,

    jquery 封装了JavaScript了,可以更快捷的实现ajax请求

    ajax代码要写在前端页面中,

    下面以实例讲解

    在url 文件中,创建index api

    from django.conf.urls import url
    from django.contrib import admin
    
    from app01 import views
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^index/', views.index),  -------index api ,
    ]

    在settings文件中配置静态文件的路径

    STATIC_URL = '/static/'
    
    STATIC_ROOT = os.path.join(BASE_DIR,'static')

    在views文件文件,创建视图函数index,

    from django.shortcuts import render,HttpResponse
    
    # Create your views here.
    
    def index(request):
        import time
        time.sleep(5)#等待5秒,才能看到请求的结果,这是同步
    
    
    
        return HttpResponse('ajax  !!!!')

    在template模板中创建index页面,应用bootstrap 和jquery,

    过程:

    1.在index页面输入内容后,有get和post两种方法向后端发送数据,在ajax里,有需要的几个参数,针对不同的情况

        url是必填的,是要谁发送请求,

        type 是发送request的方法,默认是GET方法,可以不写,但如果是POST方法,就要标明了

        data: 是客户端发给服务端的数据,是一个json的object对象,实际上在发送的时候进行了,编码以某种格式(urlencode:?a=1&b=2)发给服务器,urlencode是一种编码格式,?a=1&b=2 就是urlencode 编码格式,

    data:JSON.stringify({ 
          a:1,  
          b:2,
          )}
    JSON.stringify
    直接写data是一个json对象,如果要求data是一个json字符串,就用jSON.stringify 把对象转成json字符串,
    之前没有加,JSON.stringify 是默认已经做了,转成了json字符串,
    contentType:"application/json"

        contenType:用来指明当前请求数据的编码格式,contentType:"application/json",一旦设定,data必须是json字符串,不能使json对象,

        processData :声明当前的数据是否进 行转码处理,默认是True,就是转码,如果不做编码处理,当传图片,xml,二进制数据的时候就不需要做转码处理,设置为False,

        success:是回调函数,处理拿到后端或者服务器返回的数据,用参数接收,接收到的是json数据类型,所以要把接收的数据进行解析,

        error:是当请求或者返回发生错误的时候,用,

        complete:是不管正确与否,都要执行的函数

        statusCode: 是返回状态码,一个状态码对应一个函数,如: 是404 的错误,就可以执行一个函数,

    2.当发送到url 参数对应的地址ajaxHandle后,就开始执行视图函数ajaxHandle,视图函数给出响应和判断,最终返回到页面,进行显示

    发送的地址是ajaxHandle视图函数,由它执行处理请求,

    {% load staticfiles %}  ----------引用静态文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script src="{% static 'bootstrap/jquery-3.2.1.js' %}"></script>
    
    </head>
    <body>
    
    用户名:<input type="text">
    
    <button>Ajax提交</button>
    
    </body>
    
    </html>

    ajax 的get请求  ,是input框触发事件,包括发生错误的时候,触发error函数执行

    {#    ajax的get请求#}
        $(".user").blur(function () {
    
            var user=$(this).val();
    
            ajax语法,在函数内,
            $.ajax({
                            参数url 要发送到哪里
                url:'/ajaxHandle/',
                            ajax 的发送请求,不写,是默认get请求
                type:'GET',
                        date 是ajax给服务端或者后端发送的数据,要用json的数据格式
                date:{"user":user},
                             回调函数,ajax发送完数据后,,就要处理后端或者服务器接收到的数据,就要用到回调函数,这就是异步,
                              success 里的date参数 就是接收到的json字符串(只有json可以在网络间传输,),所以接收到后需要解析成js对象
               date 数据就是视图函数传的返回值, 
           success:function (date) { date=JSON.parse(date); 拿到数据开始判断,不正确,就给用户提示下 }, 如果请求数据是错误的,或者是没有请求到,就没必要处理这些数据,触发error函数执行         
          error:function(jpxmlHttpresponse,textStatue,err){
              #请求都是xmlHTTPRequest对象来完成的,
              #textstatue ,就是请求完成的状态,
              #err,底层通过throw抛出的异常对象,值与错误类型有关,
          },
          complete是就像python的finally,try是正常执行的代码,except 是错误的时候执行的代码,finall就是不管正确错误都要执行的代码,       
          complete:function(jpxmlHttpresponse,textstatue){
          
          },

          statusCode 是状态码,是哪个状态码,就执行哪个函数
          statusCode:{
           "403":function(jpxmlHttpresponse,textstatus,err{
              console.log(argument)
              }
          },
           "404":function(){
            
            }
    }) })

    ajax的post请求,是button触发事件,与form表单请求一样,都会被forbidden掉,

    {#  ajax的post请求,会被forbidden .#}
    
        $("button").click(function () {
            $.ajax({
                url:"/ajaxHandle/",
                type:"POST",
                data:{"user":"egon"},
                success:function () {
                    alert(333)
                }
            })
        })

    ajax发送的请求要有视图函数来处理ajaxHandle。

    def index(request):
        # import time
        # time.sleep(5)#等待5秒,才能看到请求的结果,这是同步
    
    
    
        return render(request,'index.html')
    
    
    def ajaxHandle(request):
    
        #ajaxHandle 是index  发送请求要调用的函数,所以就要判断是那种方式的请求
        if request.method =="POST":
            obj = HttpResponse("ok")
            obj.status_code=404
    
            return obj
    
        print('ajax.....')
        #GET是发送的方法,get()是去字典里的值
        user = request.GET.get("user")#从页面中request里取出前端传来的数据
    
        #user 与数据库的数据进行判断,
        # user.objects.filter(username=user)
        ret = {"flag":False}
        if user =="yuan":
            ret["flag"]=True
    
    
    
        return HttpResponse(json.dumps(ret))#HttpResponse必须返回的是一个实例

    ajax的另一种发送方式:

    $.ajax("/ajaxHandle/"){   },url是必填的

    ajax的另一种流程:

    1.发送请求,

    2.server接收请求,

    3.server处理数据

    4.server端返回响应,

    5.ajax接收数据

    如果5个步骤都顺利进行(返回200 OK)触发success函数执行,

    def index(request):
    # import time
    # time.sleep(5)#等待5秒,才能看到请求的结果,这是同步



    return render(request,'index.html')


    def ajaxHandle(request):

    #ajaxHandle index 发送请求要调用的函数,所以就要判断是那种方式的请求
    if request.method =="POST":
    obj = HttpResponse("ok")
    obj.status_code=404

    return obj

    print('ajax.....')
    #GET是发送的方法,get()是去字典里的值
    user = request.GET.get("user")#从页面中request里取出前端传来的数据

    #user 与数据库的数据进行判断,
    # user.objects.filter(username=user)
    ret = {"flag":False}
    if user =="yuan":
    ret["flag"]=True



    return HttpResponse(json.dumps(ret))#HttpResponse必须返回的是一个实例
  • 相关阅读:
    开启MySQL远程访问权限 允许远程连接
    [SCOI2005]互不侵犯
    树的数据生成器
    博客园优化
    图的随机数据生成器
    CF 983B 序列函数
    [HNOI2010]弹飞绵羊
    luogu P3393 逃离僵尸岛
    LCT解读(1)
    [APIO2010]特别行动队
  • 原文地址:https://www.cnblogs.com/gyh04541/p/7954490.html
Copyright © 2011-2022 走看看