Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。

先通过代码来看看Ajax吧！

views.py

from django.shortcuts import render,redirect,HttpResponse

from django import  forms

from django.forms import fields

from app_01 import models

def ajax(request):

    return render(request, 'ajax.html')

def ajax_json(request):

    import time

    time.sleep(3)

    print(request.POST)   #打印request.POST内的内容

    ret = {'code': True , 'data': request.POST.get('username')}

    import json

    return HttpResponse(json.dumps(ret))     #向前台发送ret，利用json.dumps()将ret变为字符串
ajax.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="text"/>

    <input type="button" value="Ajax1" onclick="Ajax1();" />

<form action="/ajax_json/" method="POST" >

        <input type="text" name="username" />

        <input type="text" name="email" />

        <input type="submit" onclick="sumitForm();" value="Form提交"/>

    </form>

<script type="text/javascript" src="/static/jquery-1.12.4.js"></script>

    <script>

function Ajax1(){

            var xhr = getXHR();

            //var xhr = new XMLHttpRequest();         //创建XMLHttpRequest对象

            xhr.open('POST', '/ajax_json/',true);  //指定用post发，发送到ajax_json里，是否异步为true，默认不填也为true

            xhr.onreadystatechange = function(){     //onreadystatechange为回调函数，当匿名函数内的状态发生变化时就会执行，每一次都会执行

                if(xhr.readyState == 4){             //一共5个状态，当状态为4时，启动使其发生变化

                    // 接收完毕

                    var obj = JSON.parse(xhr.responseText); //responseText为返回值，返回html的返回值

                    console.log(obj);

                }

            };

            xhr.setRequestHeader('k1','v1');   //发送GET请求头，利用csrf时使用

            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');  //发送post请求时

            xhr.send("name=root;pwd=123");   //发送数据，发送的只能是字符串

        }

</script>

</body>

</html>

点击Ajax1，可以看到请求已经发送过去

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');  //发送post请求时

xhr.send("name=root;pwd=123");   //发送数据，发送的只能是字符串

通过这两行代码，可以知道已经向后台发送了请求

看完这些代码，就差不多知道原生ajax是怎么发送请求的了吧！

那下面就说说原生ajax的方法和属性

1、XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法：

a. void open(String method,String url,Boolen async)

   用于创建请求

    

   参数：

       method： 请求方式（字符串类型），如：POST、GET、DELETE...

       url：    要请求的地址（字符串类型）

       async：  是否异步（布尔类型）

 

b. void send(String body)

    用于发送请求

 

    参数：

        body： 要发送的数据（字符串类型）

 

c. void setRequestHeader(String header,String value)

    用于设置请求头

 

    参数：

        header： 请求头的key（字符串类型）

        vlaue：  请求头的value（字符串类型）

 

d. String getAllResponseHeaders()

    获取所有响应头

 

    返回值：

        响应头数据（字符串类型）

 

e. String getResponseHeader(String header)

    获取响应头中指定header的值

 

    参数：

        header： 响应头的key（字符串类型）

 

    返回值：

        响应头中指定的header对应的值

 

f. void abort()

 

    终止请求

XmlHttpRequest对象的主要属性：

a. Number readyState

   状态值（整数）

 

   详细：

      0-未初始化，尚未调用open()方法；

      1-启动，调用了open()方法，未调用send()方法；

      2-发送，已经调用了send()方法，未接收到响应；

      3-接收，已经接收到部分响应数据；

      4-完成，已经接收到全部响应数据；

 

b. Function onreadystatechange

   当readyState的值改变时自动触发执行其对应的函数（回调函数）

 

c. String responseText

   服务器返回的数据（字符串类型）

 

d. XmlDocument responseXML

   服务器返回的数据（Xml对象）

 

e. Number states

   状态码（整数），如：200、404...

 

f. String statesText

   状态文本（字符串），如：OK、NotFound...

2、跨浏览器支持

XmlHttpRequest
　　·IE7+, Firefox, Chrome, Opera, etc.
ActiveXObject("Microsoft.XMLHTTP")
　　·IE6, IE5

Django之原生Ajax操作的更多相关文章

  1. Django学习---原生ajax

    Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...

  2. Django（九）下：Ajax操作、图片验证码、KindEditor使用

    三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...

  3. ASP.NET学习笔记（5）——原生Ajax基本操作

    说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...

  4. django 笔记15 ajax系列

    参考 http://www.cnblogs.com/wupeiqi/articles/5703697.html # 原生操作# jQuery操作# 伪Ajax操作# XMLHttpReques 伪aj ...

  5. django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...

  6. Django中的文件上传和原生Ajax

    概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...

  7. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  8. Day21 Django之Form文件上传、原生Ajax和实现抽屉实例

    一.Form文件上传 """ Django settings for prev_chouti project. Generated by 'django-admin st ...

  9. 框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

随机推荐

  1. [计算机网络-数据链路层] CSMA、CSMA/CA、CSMA/CD详解

    1.CSMA(载波侦听多路访问协议) CSMA 当其他节点检测到信道被占用时不发送数据.但是当数据发送完后其他节点同时检测到信道为空闲,之后又在同一时刻发送数据,可能再次产生冲突. 2.CSMA/CD ...

  2. 【数据库】MySQL 复制表结构

    介绍 有时候我们需要原封不动的复制一张表的表结构来生成一张新表,MYSQL提供了两种便捷的方法. 例: CREATE TABLE tb_base( id INT NOT NULL PRIMARY KE ...

  3. [您有新的未分配科技点] 无旋treap：从单点到区间（例题 BZOJ1500&NOI2005 维护数列 ）

    1500: [NOI2005]维修数列 Time Limit: 10 Sec  Memory Limit: 64 MB Description Input 输入的第1 行包含两个数N 和M(M ≤20 ...

  4. [洛谷P4563][JXOI2018]守卫

    题目大意:有一段$n(n\leqslant5\times10^3)$个点的折线,特殊点可以覆盖它以及它左边的它可以“看见”的点(“看见”指连线没有其他东西阻挡).定义$f_{l,r}$为区间$[l,r ...

  5. 【BZOJ1494】【NOI2007】生成树计数（动态规划，矩阵快速幂）

    [BZOJ1494][NOI2007]生成树计数(动态规划,矩阵快速幂) 题面 Description 最近,小栋在无向连通图的生成树个数计算方面有了惊人的进展,他发现: ·n个结点的环的生成树个数为 ...

  6. 关于在VWmare下安装Redhat

    本文是小白博主自行摸索安装的过程,下文主要是给出几篇很有用的文章出处和自己遇到的问题. 一.关于安装包 对于安装包,个人建议是去官网下载(个人安装的是rhel 7.4),可能初接触Linux时,是不是 ...

  7. HDU-3974 Assign the task题解报告【dfs序+线段树】

    There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...

  8. 洛谷 P3373 【模板】线段树 2 解题报告

    P3373 [模板]线段树 2 题目描述 如题,已知一个数列,你需要进行下面三种操作: 1.将某区间每一个数乘上\(x\) 2.将某区间每一个数加上\(x\) 3.求出某区间每一个数的和 输入输出格式 ...

  9. 最小生成树-----Prim算法与Kruskal算法（未完

    生成树(spanning tree):无向联通图的某个子图中,任意两个顶点互相都联通并且形成了一棵树,那么这棵树就叫做生成树. 最小生成树(MST,minimum spanning tree):如果为 ...

  10. WebDriver的定位元素方法

    如果把页面上的元素看作人的话,在现实世界如何找到某人呢?方法有三: 一.通过人本身的属性,例如他的姓名,手机号,身份证号,性别,这些可区别他人的属性.在web页面上的元素也有这些属性,例如,id.na ...