原生AJAX
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）
1、XmlHttpRequest对象介绍 (不兼容IE老版本)
x = new 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...
测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-2.2.3.min.js"></script> <script src="/static/jquery.cookie.js"></script> </head> <body> <div> <button value="XML_SEND" onclick="xmlSend();">XMLHttpRequest()</button> </div> <script> function xmlSend(){ let xml = new XMLHttpRequest(); //创建XMLHttpResquest对象 xml.open('POST','/ajax_original/'); //设置请求地址 xml.setRequestHeader('X-CSRFtoken',$.cookie('csrftoken') ); //设置请求头 {#xml.send(); //发起请求#} xml.onreadystatechange = function () { //状态改变 console.log('xml 实例readyState状态改变：',xml.readyState); if (xml.readyState === 4) { console.log('收到返回值字符串：',xml.responseText); console.log('转换为对象：',JSON.parse(xml.responseText)); console.log('服务端返回status状态码：',xml.status); console.log('服务端返回statusText文本：',xml.statusText); } }; //测试发送body数据,需要设置请求头Content-Type(告知服务器数据格式，服务器用对应的方式解析) xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); xml.send('name=name1; pwd=123'); } </script> </body> </html>
django-views.py函数处理
from django.shortcuts import HttpResponse from django.views import View import json # Create your views here. class AjaxOrnginal(View): def get(self,request): return render(request, 'ajax_templates/original_xmlHttpRequest.html') def post(self, request): print(request.POST) ret = {'code': True, 'data': None} # return HttpResponse(json.dumps(ret)) return HttpResponse(json.dumps(ret),status=404, reason="Oh Fuck ! EveryThing is None")
2、兼容IE老版本XmlHttpRequest对象
<body>
<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
<input type="button" onclick="XmlPostRequest();" value="Post发送请求" />
<script src="/statics/jquery-1.12.4.js"></script>
<script type="text/javascript">
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function XhrPostRequest(){
var xhr = GetXHR();
// 定义回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已经接收到全部响应数据，执行以下操作
var data = xhr.responseText;
console.log(data);
}
};
// 指定连接方式和地址----文件方式
xhr.open('POST', "/test/", true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 发送请求
xhr.send('n1=1;n2=2;');
}
function XhrGetRequest(){
var xhr = GetXHR();
// 定义回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已经接收到全部响应数据，执行以下操作
var data = xhr.responseText;
console.log(data);
}
};
// 指定连接方式和地址----文件方式
xhr.open('get', "/test/", true);
// 发送请求
xhr.send();
}
</script>
</body>
"伪"AJAX
由于HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。
<form action="/ajax_original/" method="post" target="ifra"> <iframe name="ifra" src="https://www.baidu.com"></iframe> <input type="text" name="username"> <input type="text" name="email"> <input type="submit" value="伪Ajax提交"> </form>
ifram对象为一个小的新html标签窗口，获取ifram对象的内容需要从这个子窗口document对象
$("#ifra").contents().find('body').text()
试用场景：
普通字符串、字典数据：优先使用用Ajax，其次XMLHttpRequest，再次考虑iframe
原生XMLHTTPRequest ---- 上传文件
html前端：XMLHttpRequest()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-2.2.3.min.js"></script> <script src="/static/jquery.cookie.js"></script> </head> <body> <div class="upload_div"> <input type="file" value="上传" class="file" id="original_upload_input" name="file1"> </div> <div> <input type="button" onclick="upLoadFile();" value="上传"> </div> <script> function upLoadFile(){ let file_obj = document.getElementById('original_upload_input').files[0]; let fd = new FormData(); fd.append('username', 'root'); fd.append('file1', file_obj); let xhr = new XMLHttpRequest(); xhr.open('post', '/xhr_upload/'); xhr.setRequestHeader('X-CSRFtoken',$.cookie('csrftoken') ); //设置请求头 xhr.onreadystatechange = function () { //状态改变 console.log('xml 实例readyState状态改变：',xhr.readyState); if (xhr.readyState === 4) { console.log('收到返回值字符串：',xhr.responseText); } }; xhr.send(fd); } </script> </body> </html>
django views函数后台处理
from django.shortcuts import render from django.shortcuts import HttpResponse from django.views import View import json # Create your views here. class XhrUpload(View): def get(self,request): return render(request, 'ajax_templates/original_upload.html') def post(self, request): file = request.FILES.get('file1') with open(file.name, 'wb') as f: for item in file.chunks(): f.write(item) return HttpResponse('upload ok')
jQuery AJAX 方法
https://www.runoob.com/jquery/jquery-ref-ajax.html
AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
下面的表格列出了所有的 jQuery AJAX 方法：
| 方法 | 描述 |
|---|---|
| $.ajax() | 执行异步 AJAX 请求 |
| $.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 |
| $.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
| $.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
| $.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
| $.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
| $.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
| $.param() | 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串） |
| $.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
| ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
| ajaxError() | 规定 AJAX 请求失败时运行的函数 |
| ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
| ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
| ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
| ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
| load() | 从服务器加载数据，并把返回的数据放置到指定的元素中 |
| serialize() | 编码表单元素集为字符串以便提交 |
| serializeArray() | 编码表单元素集为 names 和 values 的数组 |
jQuery ajaxSetup() 方法
定义和用法
ajaxSetup() 方法为将来的 AJAX 请求设置默认值。
语法
$.ajaxSetup({name:value, name:value, ... })
该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。
下面的表格中列出了可能的名称/值：
| 名称 | 值/描述 |
|---|---|
| async | 布尔值，表示请求是否异步处理。默认是 true。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| cache | 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 |
| complete(xhr,status) | 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 |
| contentType | 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。 |
| context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
| data | 规定要发送到服务器的数据。 |
| dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
| dataType | 预期的服务器响应的数据类型。 |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
| global | 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
| ifModified | 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
| jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
| jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
| password | 规定在 HTTP 访问认证请求中使用的密码。 |
| processData | 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
| scriptCharset | 规定请求的字符集。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| timeout | 设置本地的请求超时时间（以毫秒计）。 |
| traditional | 布尔值，规定是否使用参数序列化的传统样式。 |
| type | 规定请求的类型（GET 或 POST）。 |
| url | 规定发送请求的 URL。默认是当前页面。 |
| username | 规定在 HTTP 访问认证请求中使用的用户名。 |
| xhr |
用于创建 XMLHttpRequest 对象的函数。 |
增加：
statusCode 针对不同状态码，自定义函数进行动作处理