AJAX，Axio异步框架（对原生AJAX封装）。web分区

1.Ajax的理解

以前服务器里的数据，都是存在Servlet域里，然后发给JSP，来进行显示。

有了AJAX，可以和服务器通信。不需要JSP作页面。

可以在Servlet把数据发给浏览器，然后在HTML页面显示。

1.1 以前的方法

1.2 现在的方法

这个方法可以实现前后端分离，JSP的启动需要服务器，需要后端的工程师来开发。

1.3 AJAX异步交互

一般搜东西的时候，搜两个，后面的都显示出来。但整个页面事没有刷新的。

局部更新了数据，这些数据是在数据库里。

 比如注册的时候，输入一个用户名，光标一离开，立马显示是否可注册。

这里就和数据库交互了。

同步：按照12345的顺序挨个进行。请求服务器。

异步：可以不请求服务器，直接执行其他操作。 

2.AJAX快速入门及用法。

步骤：前端写JS，然后和Servlet连用。

w3school 在线教程里找到AJAX的教程案例。

1.现在HTML页面里写一个script，创建核心对象

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2.然后用创建的对象向服务器发送请求。

请求服务器端的资源，蓝框的路径得重写。必须是绝对路径：即浏览器里访问的那个路径。

因为前端和后端分离，部署的服务器可能不是同一个。

xhttp.open("GET", "绝对路径（servlet）", true);
xhttp.send();

 

3.获取响应

 xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };

里面变量的含义，4就是响应就绪。

responseText，就是我们AJAXServlet里response返回的数据。

 具体操作。

4.结果

xhr的意思就是异步。

3.AJAX案例，验证用户是否存在

 

前端页面 register.html

    
    
    




    

        
欢迎注册
        已有帐号？ 登录
    
    


        


            

                
用户名
                

                    
                    

                    用户名不太受欢迎
                

            

            

                
密码
                

                    
                    

                    密码格式有误
                
            


            

                
验证码
                

                    
                    
                    看不清？
                
            

        

        

            
        
        

    

4.Axio异步框架

 提供一些封装好了的AJAX代码来使用。

4.1 AXIOS的使用

get和post两种写法。

post用data属性装值。

不过这个只能发一个参数

4.1.1 配置Axios

把JS文件导入。

4.1.2两种方法的简化。