Ajax基本介绍及用法

什么是Ajax

Ajax就是“Asynchronous Javascript And XML”，异步 JavaScript 和 XML，什么是异步呢，就是Ajax可以让你的请求在整个网页不刷新的情况下进行局部刷新，传统的网页如果不使用Ajax技术，如果要更新内让，必须让整个页面刷新

什么是同步异步

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。信息错误又要重新填写！
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验。

Ajax的请求流程

1.创建对象，new XMLHttpRequest()
2.创建HTTP请求，open
3.send

怎么使用

示例

<script type="text/javascript">
        function ajaxRequest(){
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var ajax=new XMLHttpRequest();
            ajax.open("POST","LoginDemo1",true);
            console.log(ajax.readyState);
            ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            ajax.send("username="+username+"&password="+password);
            ajax.onreadystatechange=function(){
                console.log(ajax.readyState);
                console.log(ajax.status);
                if(ajax.readyState==4){
                    if(ajax.status==200){
                          //接收响应结果
                        var result = ajax.responseText;
                console.log(result);
                          if( result="1"){
                            document.getElementById("span1").innerHTML = "ok";
                            }
                          else{
                            document.getElementById("span1").innerHTML = "err";
                          }  
                    }else{
                        alert("访问错误...");
                    }
                };
            }
        }
    </script>

注意点
1.url问题
open(method, url, asynch)
ajax.open(“POST”,”LoginDemo1”,true);url部分和action的值一致
2.提交表单问题
当我们要发送表单的数据给后台，可以先把表单数据提取出来

var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

然后修改首部信息ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded);告诉服务器我们上传的是文本，这样后台才能解析我们上传的数据
3.打印的readyState一直是1
因为发送一个请求后，客户端无法确定什么时候会完成这个请求
0 代表未初始化，还没有调用 open 方法
1 代表正在加载， open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕，send 已被调用。请求已经开始
3 代表交互中，服务器正在发送响应
4 代表完成，响应发送完毕
有两种方法解决
1）我们可以设置ajax.onreadystatechange=function(){}监听请求状态
每次 readyState 值的改变，都会触发 readystatechange 事件，通过上面的方法可以把状态都获取到
2）把ajax.open(“POST”,”LoginDemo1”,true);的true设置为false异步

servlet的处理

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String a=request.getParameter("username");
        String b=request.getParameter("password");
        System.out.println(request.getContentType());
        System.out.println("user:"+a);
        System.out.println("password:"+b);
//      response.sendRedirect("success.jsp");
        request.getRequestDispatcher("/success.jsp").forward(request, response);
        PrintWriter out=response.getWriter();
        if (b=="123") {
            out.print("1");
        }else{
        out.print("2");
        }
    }

我们要给返回数据给ajax，可以用PrintWriter out=response.getWriter();返回