AJAX(一): 实现AJAX的三种方式

AJAX: (Asynchronous Javascript And XML)
       即使用Javascript语言与服务器进行异步交互，传输的数据为XML（现在更多使用json数据）
 
 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求
 
 利用AJAX可以做:
 1.模态对话框: 1>. 注册验证用户是否存在
 2>. 登录验证用户名密码
 2.不刷新页面的情况下，增加，删除，修改数据
 
 AJAX的实现:
 1. 基于jQuery的AJAX实现:
 $.ajax({
 url: '/url',
 type: 'GET/POST', # POST先注释csrf_token
 data: {
 # 字典 // 可传num, str
 },
 contentType: // 发送数据的编码格式
 traditional:true, // 声明后data中可传list, 要传字典转json
 timeout: // 等待时间
 async: // 是否异步
 
 beforeSend: function(){} // 发送前执行的函数
 complete: function(){} // 数据接收完全后执行的函数
 success: function(arg){ // 回调函数，服务器返回数据时执行，arg为返回的json字符串
 JSON.stringify(dict) // 相当于字典转json, json.dumps(dict)
 JSON.parse(str) // 相当于json转字典, json.loads(str)
 },
 error: function(){} // 失败时执行的函数
 
 dataType: // 将接收到的数据转为指定格式, json,jsonp,text,xml,html,script
 })
 
 $('button').click(function () { 
 var data = $('#fm').serialize(); // 相当于submit, 获取form中所有的数据
 })
 
 2. 原生AJAX: var xhr = new XMLHttpRequest()
 GET: xhr.open('GET','/url?p=123',[true/false]); # 创建连接(是否异步)
 xhr.onreadystatechange = function(){ # 指定状态改变时，执行的函数
 if (xhr.readyState==4){ # 回调函数，数据全部接收
 var arg = xhr.responseText() # 服务器返回的数据，字符串类型
 }
 };
 xhr.send(null) # 客户端发送数据 
 
 
 POST: xhr.open('POST','/url'); # 创建连接
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); # 设置请求头
 xhr.onreadystatechange = function(){ # 回调函数
 if(xhr.readyState==4){
 var arg = xhr.responseText()
 }
 };
 data_json = JSON.stringify(data)
 xhr.send(data_json) # 发送数据

 其他属性和方法:
 客户端状态值: xhr.readyState 0 -- 没有使用open()方法
 1 -- 使用了open(),但还没有send()
 2 -- 已经send()了,但还没有响应
 3 -- 部分接收
 4 -- 完全接收
 接收:
 响应头: xhr.getResponseHeader('Content-Type')
 xhr.getAllResponseHeader()
 响应码: xhr.states
 响应文本: xhr.statesText 
 发送:
 设置响应头: xhr.setRequestHeader 
 
 
 3. 伪AJAX: 兼容性最好
 iframe标签 + form表单: form提供数据, iframe不刷新提供通道, 返回值在iframe中
 <iframe name='ifra' style='display:none'></iframe>
 <form action='/url' method='post' target='ifra'>
 <input type='text' name='user'/>
 <input type='button' id='btn' value='提交'/>
 </form>
 
 $('#btn').click(function(){
 $('name').onload(function(this){ # 回调函数, 通过iframe拿到返回值
 var arg = this.contentWindow.document.body.innerText # iframe内部也是一个html对象
 })
 })