Java web 之 AJAX

AJAX

概念:AJAX 异步的JavaScript和xml

作用:

1. 与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据
   使用了Ajax和服务器进行通信,就可以使用HTML+Ajax来替换jsp页面了

异步交互

2. 可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想.用户名是否可用校验,等等

同步

客户端访问-->请求服务器-->服务器处理中-->响应客户端-->继续访问

异步

客户端访问–>客户端可以执行其他的操作–>服务器自动请求和处理–>响应客户端–>继续访问

发送请求:

      方法:open(method,url,async)
       描述:
       1.method: 请求的类型:GET还是POST
       2.url:服务器(文件)位置
       3.asunc:true(异步),false(同步)

获取响应

         readyState   保存了XMLHttpRequest的状态
         0:请求未初始化
         1:服务器连接已建立
         2:请求已接受
         3:正在处理请求
         4:请求已完成且响应已就绪
          每当readyState发生变化时就会调用onreadystatechange函数
         
         status:
         200:"ok"
         403:"Forbidden"
         404:"Page not found"
         
          当readystate为4,status为200时,响应就绪

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //创建核心对象
        var xhttp;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }else{
            //code for IE6,IE5
            xhttp=new ActiveXObject("Microsoft.XMLHTTP")
        }
        //发送请求
        xhttp.open("GET","http://localhost:8888/jsp_03/ajaxServlet");
        xhttp.send();

        //获取响应
        function  loadDoc(){
            var xhttp=new XMLHttpRequest();
            xhttp.onreadystatechange = function (){
                if (this.readyState==4&&this.status==200){
                   alert(this.responseText);
                }
            };
            xhttp.open("GET","http://localhost:8888/jsp_03/ajaxServlet",true);
            xhttp.send();
        }
    </script>
</body>
</html>

type:
如果是xhr就是异步的请求