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. C#开发移动应用 - 环境搭建

    前言 其实从2013开始就想用Xamarin,奈何 当初收费一座大山压在身上 完全无法见得庐山真面目 后面2015,微软收购Xamarin,没过多久就宣布对个人用户免费..那个兴奋劲就别提了.. 兴奋 ...

  2. windows下面安装redis

    一.下载windows版本的Redis 链接:https://pan.baidu.com/s/1i6X2klv 密码:j4pi 二.安装Redis 这里下载的是Redis-x64-3.2.100版本, ...

  3. jmeter 安装tps插件

    1.下载  jpgc-graphs-basic-2.0.zip 2.解压并将lib 目录下的 jmeter-plugins-cmn-jmeter-0.4.jar 拷贝到 %JMeter%/lib 目录 ...

  4. 中国省市 Json 二级联动

    Json数据: var cities = {'北京': ['北京'], '广东': ['广州', '深圳', '珠海', '汕头', '韶关', '佛山', '江门', '湛江', '茂名', '肇庆 ...

  5. BZOJ1072 排列perm 【状压dp】

    Description 给一个数字串s和正整数d, 统计s有多少种不同的排列能被d整除(可以有前导0).例如123434有90种排列能 被2整除,其中末位为2的有30种,末位为4的有60种. Inpu ...

  6. Codeforces 601D. Acyclic Organic Compounds(四个愿望一次满足)

    trie合并的裸题...因为最多只有n个点,所以最多合并n次,复杂度$O(N*26)$. #include<iostream> #include<cstring> #inclu ...

  7. [CF1087D]Minimum Diameter Tree

    link 题目大意 有$n$个点的前边权为$0$的树,你要加入$S$边权总量,可以为分数,使得当前树的直径最小. 题目分析 题目过于毒瘤,导致于最后$1$个小时一直在做此题,没想到真的只是一个结论一样 ...

  8. IT(然而其实是。。hdu5244?)

    Time Limit: 3000 ms Memory Limit: 256 MB Description IT = Inverse Transform 两个长度为 \(2^n\) 的序列 \(a,b\ ...

  9. PID控制算法的C语言实现八 变积分的PID控制算法C语言实现

    变积分PID可以看成是积分分离的PID算法的更一般的形式.在普通的PID控制算法中,由于积分系数ki是常数,所以在整个控制过程中,积分增量是不变的.但是,系统对于积分项的要求是,系统偏差大时,积分作用 ...

  10. 03-树2. List Leaves (25) 二叉树的层序遍历

    03-树2. List Leaves (25) 题目来源:http://www.patest.cn/contests/mooc-ds/03-%E6%A0%912 Given a tree, you a ...