ajax简单实例java 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对象
                     })
                 })