本文会介绍三种ajax的请求方式：
- 原生的ajax请求
- JQuery的ajax的请求
- 伪造ajax请求
在一个网站上看到ajax是什么的一些说法：
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
在使用form表单提交数据与后台进行交互的时候，是会刷新整个页面的，也就是会重新拉取整个页面的数据。而ajax做的就是局部刷新。只刷新部分页面，而不是刷新整个页面。
所有的实例以python3.6，django-1.10.8版本！
原生ajax：
ajax是基于现有的internet标准，并联合使用它们。包括以下的内容：
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
使用ajax：
ajax的在使用中5个步骤：
下面的一些ajax的函数，用于在上面的五个步骤中使用。
创建了对象之后，要向服务器发送数据。 open()函数用于创建ajax客户端与服务器之间的连接。 send()函数用于向服务器发送数据。 setRequestHeader()用于设置向服务器发送数据时的请求头。----void open(String method,String url,Boolen async) 用于创建请求 参数： method： 请求方式（字符串类型），如：POST、GET、DELETE... url： 要请求的地址（字符串类型） async： 是否异步（布尔类型）若使用ajax请求，必须为异步，就是值为true。----void send(String body) 用于发送请求 参数： body： 要发送的数据（字符串类型）----void setRequestHeader(String header,String value) 用于设置请求头 参数： header： 请求头的key（字符串类型） vlaue： 请求头的value（字符串类型 服务器接收ajax发送的数据之后，需要返回数据给ajax客户端。 ----String getAllResponseHeaders() 获取所有响应头 返回值： 响应头数据（字符串类型） ----String getResponseHeader(String header) 获取响应头中指定header的值 参数： header： 响应头的key（字符串类型） 返回值： 响应头中指定的header对应的值 abort()方法终止请求。 XMLHttpRequest对象的主要属性：---Number readyState 状态值（整数） 详细： 0-未初始化，尚未调用open()方法； 1-启动，调用了open()方法，未调用send()方法； 2-发送，已经调用了send()方法，未接收到响应； 3-接收，已经接收到部分响应数据； 4-完成，已经接收到全部响应数据；---Function onreadystatechange 当readyState的值改变时自动触发执行其对应的函数（回调函数） ---String responseText 服务器返回的数据（字符串类型） ---XmlDocument responseXML 服务器返回的数据（Xml对象） ---Number states 状态码（整数），如：200、404... ---String statesText 状态文本（字符串），如：OK、NotFound...
视图函数如下：
from django.shortcuts import render, HttpResponse
# Create your views here.
import json
def ajax1(request):
return render(request, "ajax1.html")
def ajax1_json(request):
print(request.POST)
msg = {"code": 200, "msg": "What a fuck!"}
return HttpResponse(json.dumps(msg))简易的前端代码如下：
<!DOCTYPE html><html lang="en"><head> <Meta charset="UTF-8"> <title>测试ajax请求title>head><body> <h1 id="i1">第一行内容h1> <input type="button" value="ajax响应内容" onclick="changeContent();"> <script> function changeContent() { var xhr = new window.XMLHttpRequest(); xhr.open("POST", "/ajax1_json", true); xhr.setRequestHeader("flag","wangxz"); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); /* 注意如果数据是post方式传送，则必须数据的mtea格式*/ xhr.send("name=wangxz, pwd=123"); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ console.log(xhr.responseText); var msg = JSON.parse(xhr.responseText); document.getElementById("i1").innerText=msg.msg; } } } script>body>html>
原生ajax请求的前端代码
上面的代码正常允许需要注释掉django中间件中有关csrf的认证，下面我们在ajax中加入csrftoken，但是引入了jquery。
!DOCTYPE htmlhtml lang"en"head Meta charset"UTF" titletest ajax
jQuery ajax请求
jQuery封装了原始的ajax请求，因此使用jQuery请求会更方便一点。其模板文件如下：
<!DOCTYPE html><html lang="en"><head> <Meta charset="UTF-8"> <title>Titletitle>head><body> <h1>第一行内容h1> <input type="button" onclick="changeContent();" value="Jquery改变内容"> <script src="/static/jquery.js">script> <script> function changeContent() { $.ajax({ url: "ajax1_json", type: "POST", data: {"user":"root", "password":"123456"}, dataType: "json", /*dataType制定接受后端返回数据的格式，这个例子中如果不使用这个参数，接受的data数据，可以使用JSON.parse转换为json对象*/ success: function (data) { console.log(data); $("h1").text(data.msg); } }) } script>body>html>
JQuery模板文件
视图函数如下：
def jquery_ajax(request):
if request.method == "GET":
return render(request, "jquery_ajax.html")
elif request.method == "POST":
msg = {"code": 200, "msg": "What a fuck!"}
return HttpResponse(json.dumps(msg))由以上的模板文件，可以发现JQuery中ajax请求，基本格式如下：
$.ajax({
url: "jquery_ajax", #ajax要传入的url
type: "POST", #传递数据的类型
data: {"user":"root", "password":"123456"}, # 要传递的数据
dataType: "json", #接收数据的类型
/*dataType制定接受后端返回数据的格式，这个例子中如果不使用这个参数，接受的data数据，可以使用JSON.parse转换为json对象*/
success: function (data) { #服务端响应成功后的回调函数
console.log(data);
$("h1").text(data.msg);
}
})伪造ajax
可以利用html标签中的iframe标签伪造ajax请求，iframe标签会自动向后台提交数据。
iframe的前端代码如下：
<!DOCTYPE html><html lang="en"><head> <Meta charset="UTF-8"> <title>伪造ajax请求title> <script src="/static/jquery.js">script>head><body><form action="/ajax1_json" method="post" target="ifm1"> <iframe id="ifm1" frameborder="1" name="ifm1">iframe> <input type="text" name="user"> <input type="password" name="pwd"> <input type="submit" value="提交" onclick="submitForm();">form> <script> function submitForm() { $("#ifm1").load(function () { /* console.log(123); */ var text = $("#ifm1").contents().find("body").text(); console.log(text); }) } script>body>html>
iframe模板代码
视图函数如下：
def ajax1_json(request): print(request.POST)
msg = {"code": 200, "msg": "What a fuck!"} return HttpResponse(json.dumps(msg))def wzajax(request): return render(request, "wzajax.html")上面的三种ajax请求，一般若是传递的数据是文件，图片等一般数据优先使用iframe伪造ajax请求，然后使用jQuery，最后使用原生ajax。
iframe的标签是作为一个html文本嵌套在原html标签中的。iframe中的值，是服务端返回的值。注意在上面前端代码中，查找jframe标签值得方法。
利用三种ajax传递一张图片。
用三种方式上传一张照片，用iframe的方式实现预览的功能，前端代码如下：
<!DOCTYPE html><html lang="en"><head> <Meta charset="UTF-8"> <title>Titletitle> <style> #f1{ width: 100px; height: 50px; opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100; } .c1{ display: inline-block;padding: 10px; background-color: #076aa5; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 90; text-align: center; color: white; } .hide{ display: none; } style> <script src="/static/jquery.js">script>head><body> <div style="position: relative;width: 100px;height: 50px;"> <input type="file" name="f1" id="f1"> <a class="c1">上传a> div> <hr> <div> <input type="button" value="提交XHR" onclick="xhrSubmit();" /> <input type="button" value="提交jQuery" onclick="jqSubmit();" /> div> <br><br> iframe传输照片--> <form action="/upload" method="post" target="ifm1" enctype="multipart/form-data"> <input type="file" name="file1"> <iframe frameborder="1" name="ifm1" id="ifm1" style="display: none">iframe> <input type="submit" value="iframe提交" onclick="ifmSubmit();"> 点击提交，iframe会自动提交，不会刷新当前整个页面--> form> 预览,由iframe实现--> <div class="preview">div> <script> function jqSubmit() { var file_obj = document.getElementById('f1').files[0]; var fd = new FormData(); fd.append("username", "wxz"); fd.append("file1", file_obj); $.ajax({ url: "/upload", type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success: function (arg, a1, a2) { console.log(arg); console.log(a1); console.log(a2); } }) } function xhrSubmit() { var file_obj = document.getElementById('f1').files[0]; var fd = new FormData(); fd.append("username", "wxz"); fd.append("file1", file_obj); var xhr = new XMLHttpRequest(); xhr.open("POST", "/upload",true); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ var obj = JSON.parse(xhr.responseText); console.log(obj); } }; xhr.send(fd); } function ifmSubmit() { $("#ifm1").load(function () { var text = $("#ifm1").contents().find("body").text(); var obj = JSON.parse(text); var img_tag = document.createElement("img"); img_tag.src = "/" + obj.img_msg; $(".preview").append(img_tag) }) } script>body>html>
上传照片
对应的视图函数如下：
def upload(request): if request.method == "GET": return render(request, "upload.html") elif request.method == "POST":
username = request.POST.get("username") print("username")
file1 = request.FILES.get("file1") print(file1)
img_path = os.path.join("static/img/", file1.name)
with open(img_path, "wb") as f: for item in file1.chunks():
f.write(item)
msg = {"code": 200, "img_msg": img_path} return HttpResponse(json.dumps(msg))
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
