一、介绍

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

② 作用：

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

③ 同步与异步：

二、原生Ajax

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

详细内容见：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 ")

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="获取数据" onclick="getData()"><div id = "div1"></div></body>
<script>function getData(){//1.创建XMLHttpRequestvar xmlHttpRequest = new xmlHttpRequest();//2.发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();  //发送请求//3.获取服务响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML  = xmlHttpRequest.respnseText;}}}
</script>
</html>

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

三、Axios

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

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

③ 使用方式：

引入Axios 的 js 文件。

<script src = "js/axios-0.18.0.js"></script>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()">
</body>
<script>function get(){//通过axios发送异步请求 - getaxios({method:"get",URL:"http://yapi.smart-xwork.cn/mock/169327/emp/list"//成功回调函数}).then(result =>{console.log(result.data);})}function post(){//通过axios发送异步请求 - postaxios({method:"get",URL:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data:"id=1"//成功回调函数}).then(result =>{console.log(result.data);})}
</script>
</html>

④ 请求方式别名：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()">
</body>
<script>function get(){axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result =>{console.log(result.data);})}function post(){axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result =>{console.log(result.data);})}
</script>
</html>

四、案例分析

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script>
</head>
<body><div id = "app"><table border="1" cellspacing = "0" width = "60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>入职日期</th><th>最后操作时间</th></tr><tr align="center" v-for = "(emp ,index) in emps"><td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src = "emp.image" width="70px" height="50px"></td><td><span v-show = "emp.gender == 1">男</span><span v-show = "emp.gender == 0">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new vue({el:"#app",data:{emps:[]},mounted(){//发送异步请求，加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result =>{this.emps =  result.data.data;})}});
</script>
</html>

JavaWeb开发 —— Ajax相关推荐

SEEK学习论坛-JavaWeb开发实训课题 (数据库MySQL+js+Ajax+Servlet)
关于这次学校实训,我们做了一个类似于CSDN博客的项目,然后我们小组取名叫SEEK,一个学习论坛,前面ppt有介绍,我主要是负责后端数据库的,与MySQL交互,由我的组长写好js代码,然后将前端所获取 ...
javaweb开发要学习的所有技术和框架总结
javaweb开发要学习的所有技术和框架总结: 前端技术: HTML, CSS, JAVASCRIPT, JQUERY, AJAX HTML "超文本"就是指页面内可以包含图片.链 ...
JavaWeb开发网上商城
JavaWeb开发知识总结(网上商城项目小结) 1. 数据库设计表的关系的设计如下: 2. 使用技术总结 2.1 BaseServlet的设计实现处理请求的方式1: * 针对每一个请求均创建一个S ...
JavaWeb开发专题(一)-JavaWeb入门
1.JavaEE的概念 Java Enterprice Edtion(Java企业版).JavaEE并不是一个具体的技术.而是由SUN公司提出的一个Java 企业级开发的平台,是一种标准.其中包含13 ...
JavaWeb开发_Web前端_Ajax
JavaWeb开发_Web前端_Ajax 原生Ajax Axios 案例参考原生Ajax 概念: Asynchronous JavaScript And XML, 异步的JavaScript和XM ...
JavaWeb开发前端语言：jQuery（一） jQuery核心函数、jQuery对象、jQuery选择器、以及jQuery元素筛选
JavaWeb开发前端语言:jQuery 1.jQuery介绍 1.1 jQuery的初使用 1.2 使用jQuery的常用问题解析 2. jQuery核心函数介绍 3.区分jQuery对象与dom ...
JavaWeb 开发 06 —— smbms项目实践
系列文章 JavaWeb 开发 01 -- 基本概念.Web服务器.HTTP.Maven JavaWeb 开发 02 -- ServletContext.读取资源.下载文件.重定向和请求转发 Java ...
基于JavaWeb 开发和实现一个微博系统【100010104】
JavaWeb 微博系统一.设计要求: 使用 JavaWeb 开发和实现一个微博系统,可参考新浪微博,要求具备微博的基本功能: 1)注册.登录和注销等功能: 2)发布信息,如:文字.图片: 3)用户 ...
JavaWeb开发简介
1.什么是JavaWeb? Web,即网页.因此Web开发就是网页开发.那么JavaWeb开发,我们可以这样通俗理解:就是运用以Java及其周边为主的相关技术栈,进行一系列的网页开发. 2.Web的分 ...

JavaWeb开发 —— Ajax

一、介绍

二、原生Ajax

三、Axios

四、案例分析

JavaWeb开发 —— Ajax相关推荐

最新文章

热门文章