对Ajax的理解
一、什么是Ajax？
ajax全称为Asynchronous JavaScript and XML (异步的JavaScript和XML)，是一种创建交互式网页应用的网页开发技术方案，它的出现使得传统的web应用程序，从一次请求得到完整的被渲染后的网页文件 到 网页局部刷新的一次改变。
tips:ajax的产生是由于用户的操作而偷偷进行的 客户端与服务器交互数据的行为
XML是一种标记语言，是数据交互以及传输一种格式，近几年比较火的还有json;
二、Ajax的应用：
1.用户上传头像的预览功能；
2.注册，验证登录操作，比如用户名是否重复、登录密码是否错误等等；
3.主机管理系统中的编辑功能，例如删除某一行主机信息，会偷偷执行删除数据库相关操作，并删除该页上的数据Dom；
4.热点新闻的刷新、鼠标滚动刷新等；
5.等等；
三：原生Ajax:
Ajax的实现依赖于XmlHttpRequest（主流）以及ActiveXObject（IE6及以下版本）
1 a. void open(String method,String url,Boolen async) 2 用于创建请求 3 4 参数： 5 method： 请求方式（字符串类型），如：POST、GET、DELETE... 6 url： 要请求的地址（字符串类型） 7 async： 是否异步（布尔类型） 8 9 b. void send(String body) 10 用于发送请求 11 12 参数： 13 body： 要发送的数据（字符串类型） 14 15 c. void setRequestHeader(String header,String value) 16 用于设置请求头 17 18 参数： 19 header： 请求头的key（字符串类型） 20 vlaue： 请求头的value（字符串类型） 21 22 d. String getAllResponseHeaders() 23 获取所有响应头 24 25 返回值： 26 响应头数据（字符串类型） 27 28 e. String getResponseHeader(String header) 29 获取响应头中指定header的值 30 31 参数： 32 header： 响应头的key（字符串类型） 33 返回值： 34 响应头中指定的header对应的值 35 36 f. void abort() 37 38 终止请求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 </head> 7 <body> 8 <input onclick="ajaxtest();" type="button" value="ajax测试"> 9 <form method="post" action="/index/" target="ifm"> 10 <iframe src="" name="ifm"></iframe> 11 <input type="url" name="url"> 12 <input type="submit" value="提交"> 13 </form> 14 {% load staticfiles %} 15 <script src="{% static "jquery-1.12.4.js" %}"></script> 16 <script src="{% static "jquery.cookie.js" %}"></script> 17 <script> 18 //获取XHR对象 19 function getXHR(){ 20 var xhr; 21 //兼容操作 22 if(window.XMLHttpRequest){ 23 xhr = new XMLHttpRequest(); 24 } 25 else{ 26 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 27 } 28 return xhr; 29 } 30 //ajax post操作 31 function ajaxtest(){ 32 var xhr = getXHR(); 33 xhr.onreadystatechange = function() { 34 if (xhr.readyState == 4) { 35 //将获取到的数据反序列化为 36 var obj = JSON.parse(xhr.responseText); 37 console.log(obj); 38 } 39 } 40 xhr.open("POST", "/index/", true) 41 // 如果使用原生的ajax进行post操作，就需要设置以下请求头 42 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); 43 xhr.send(JSON.stringify("action:ajax; ")); 44 } 45 </script> 46 </body> 47 </html>
四：JQuery封装的ajax：
JQuery封装后的ajax的可读性变得更好，以key-value的方式封装ajax的传输自指定的参数以及数据；
1 jQuery.get(...) 2 所有参数： 3 url: 待载入页面的URL地址 4 data: 待发送 Key/value 参数。 5 success: 载入成功时回调函数。 6 dataType: 返回内容格式，xml, json, script, text, html 7 8 9 jQuery.post(...) 10 所有参数： 11 url: 待载入页面的URL地址 12 data: 待发送 Key/value 参数 13 success: 载入成功时回调函数 14 dataType: 返回内容格式，xml, json, script, text, html 15 16 17 jQuery.getJSON(...) 18 所有参数： 19 url: 待载入页面的URL地址 20 data: 待发送 Key/value 参数。 21 success: 载入成功时回调函数。 22 23 24 jQuery.getScript(...) 25 所有参数： 26 url: 待载入页面的URL地址 27 data: 待发送 Key/value 参数。 28 success: 载入成功时回调函数。 29 jQuery.ajax(...) 30 31 部分参数： 32 33 url：请求地址 34 type：请求方式，GET、POST（1.9.0之后用method） 35 headers：请求头 36 data：要发送的数据 37 contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") 38 async：是否异步 39 timeout：设置请求超时时间（毫秒） 40 41 beforeSend：发送请求前执行的函数(全局) 42 complete：完成之后执行的回调函数(全局) 43 success：成功之后执行的回调函数(全局) 44 error：失败之后执行的回调函数(全局) 45 46 47 accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型 48 dataType：将服务器端返回的数据转换成指定类型 49 "xml": 将服务器端返回的内容转换成xml格式 50 "text": 将服务器端返回的内容转换成普通文本格式 51 "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。 52 "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式 53 "json": 将服务器端返回的内容转换成相应的JavaScript对象 54 "jsonp": JSONP 格式 55 使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数 56 57 如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string 58 59 converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数 60 $.ajax({ 61 accepts: { 62 mycustomtype: 'application/x-some-custom-type' 63 }, 64 65 // Expect a `mycustomtype` back from server 66 dataType: 'mycustomtype' 67 68 // Instructions for how to deserialize a `mycustomtype` 69 converters: { 70 'text mycustomtype': function(result) { 71 // Do Stuff 72 return newresult; 73 } 74 }, 75 });
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p> 10 <input type="button" onclick="XmlSendRequest();" value='Ajax请求' /> 11 </p> 12 13 14 <script type="text/javascript" src="jquery-1.12.4.js"></script> 15 <script> 16 function JqSendRequest(){ 17 $.ajax({ 18 url: "/test/", 19 type: 'GET', 20 dataType: 'text', 21 success: function(data, statusText, xmlHttpRequest){ 22 console.log(data); 23 } 24 }) 25 } 26 </script> 27 </body> 28 </html>
五、“伪”Ajax操作：
iframe标记具有嵌套HTML对象的特性，简单地说，就是iframe能够在标签内部加载HTML页面的特性，好像是偷偷进行了ajax操作；
1 <form method="post" action="/index/" target="ifm"> 2 <iframe src="" name="ifm"></iframe> 3 <input type="url" name="url"> 4 <input type="submit" value="提交"> 5 </form>
def index(request, *args, **kwargs): if request.method == "GET": return render(request, "index.html") elif request.method == "POST": ret = {"state": request.POST.get("url", None)}; print(ret) return HttpResponse(json.dumps(ret))
其实，诸多网站上的头像预览功能就是利用了这一特性；
具体过程：
1. form内部的文件上传，如果采用的是ajax方式提交，需依赖于 new FormData(form-obj) 这一对象（为了方便将该对象命为A）；
2.发送A.get("file-select") 到服务器；
3.服务器获取数据，并通过file-obj.chunks存储文件内容，并返回dumps后的json数据（包含服务器暂存文件的url）
4.iframeDocument = iframe.contentWindow.document;
5.后续对iframe标签提取url；
