JavaWebAjax
目录
JavaWeb——Ajax
一、什么是Ajax
概念：Asynchronous JavaScript And XML，异步的JavaScript和XML 作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
同步与异步：
Ajax原生方式获取服务器数据：
function getData(){
//1.创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
//2.发送异步请求
xmlHttpRequest.open(‘GET’,“一个网址”);
xmlHttpRequest.send();//发送请求
//3.获取服务器响应数据
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById(‘div1’).innerHTML = xmlHttpRequest.responseText;
}
}
Ajax原生方式获取服务器数据：
function getData(){
//1.创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
//2.发送异步请求
xmlHttpRequest.open(‘GET’,“一个网址”);
xmlHttpRequest.send();//发送请求
//3.获取服务器响应数据
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById(‘div1’).innerHTML = xmlHttpRequest.responseText;
}
}二、Axios
Axios是Ajax的一种现代化替代方案，它在功能性和易用性上都有很大的提升。Axios提供了更为简洁的API和更强大的功能。 Axios方式获取服务器数据： //通过axios发送异步请求get function get() { axios({ method: “get”, url: “一个网址”, //成功回调函数 }).then((result) => { console.log(result.data); }); Axios方式发送数据： //通过axios发送异步请求post axios({ method:“post”, url:“ , data:“id=1” }).then((result)=>{ console.log(result.data); }); Axios请求方式别名 Axios为简化书写，为各种请求方式定义了别名： axios.get(url[,config]); axios.delete(url[,config]); axios.post(url[,data[,config]]); axios.put(url[,data[,config]]); Axios别名方式发送请求： axios.get(“ => { console.log(result.data); })； axios.post(“ , “id=1”).then(result =>{ console.log(result.data)； })