JavaWeb开发 —— Ajax

目录

一、介绍

二、原生Ajax

三、Axios

四、案例分析

---

一、介绍

① 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。

② 作用：

• 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
• 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

③ 同步与异步：

 二、原生Ajax

1. 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
2. 创建XMLHttpRequest对象：用于和服务器交换数据
3. 向服务器发送请求
4. 获取服务器响应数据

详细内容见：W3school / Ajax

XMLHttpRequest对象属性：

属性	描述
onreadystatechange	定义当 readystate 属性发生变化时被调用的函数
readyState	保存XMLHttpRequest的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以XML 数据返回响应数据
status	返回请求的状态号。 200：" OK "  403：" Forbidden " 404：" Not Found "
statusText	返回状态文本(比如 " OK " 或 " Not Found ")

注意：但是这种操作比较繁琐，在早期浏览器中存在浏览器兼容性问题。索引在目前开发过程中，原生Ajax基本不再使用，而目前使用的多是基于原生Ajax的封装技术，比如Axios等。

三、Axios

① 介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。

② 官网：http://www.axios-http.cn/

③ 使用方式：

1. 引入Axios 的 js 文件。

2. 使用Axios 发送请求，并获取响应结果。

④ 请求方式别名：

• axios.get( url  [ , config ] )
• axios.delete( url [ , config ] )
• axios.post( url  [ , data [ , config ]] )
• axios.put( url [ , data [ , config ]] )

四、案例分析

基于Vue以及Axios完成数据的动态加载展示：

1. 数据准备的url：http://yapi.smart-xwork.cn/mock/169327/emp/list
2. 在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1代表男，2代表女)。

 

    
    
    
    
    
    


    

        

            

                
编号
                
姓名
                
图像
                
性别
                
入职日期
                
最后操作时间
            
            

                
{{index + 1}}
                
{{emp.name}}
                

                    
                
                

                    男
                    女
                
                
{{emp.job}}
                
{{emp.entrydate}}
                
{{emp.updatetime}}