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必须返回的是一个实例
posted @ 2017-12-02 15:48  谷子的  阅读(1547)  评论(0编辑  收藏  举报