AJAX入门知识

AJAX入门

概念: AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML

作用：

1. 与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据。使用了AJAX和服务器进行通信， 就可以使用HTML+AJAX来替换JSP页面了
2. 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想。用户名是否可用校验，等等…

原生的JS实现方式（了解）

​ //1.创建核心对象
​ var xmlhttp=new XMLHttpRequest();
​ //2. 建立连接
​ /*
​ 参数：
​ 1. 请求方式：GET、POST
​ * get方式，请求参数在URL后边拼接。send方法为空参
​ * post方式，请求参数在send方法中定义
​ 2. 请求的URL：
​ 3. 同步或异步请求：true（异步）或 false（同步）
​ */
​ xmlhttp.open(“GET”,“ajaxServlet?username=tom”,true);
​ //3.发送请求
​ xmlhttp.send();
​ //4.接受并处理来自服务器的响应结果
​ //获取方式 ：xmlhttp.responseText
​ //什么时候获取？当服务器响应成功后再获取
​ //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
​ xmlhttp.onreadystatechange=function() {
​ //判断readyState就绪状态是否为4，判断status响应状态码是否为200
​ if (xmlhttp.readyState4 && xmlhttp.status200) {
​ var responseText = xmlhttp.responseText;//获取服务器的响应结果
​ alert(responseText);
​ }
​ }

JQuery实现方式一

//使用$.ajax()发送异步请求
​ $.ajax({
​ url:“ajaxServlet1111” , // 请求路径
​ type:“POST” , //请求方式
​ //data: “username=jack&age=23”,//请求参数
​ data:{“username”:“jack”,“age”:23},
​ success:function (data) {
​ alert(data);
​ },//响应成功后的回调函数
​ error:function () {
​ alert(“出错啦…”)
},//表示如果请求响应出现错误，会执行的回调函数
​ dataType:“text”//设置接受到的响应数据的格式
​ });

JQuery实现方式二

$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])
//url：请求路径 data：请求参数 callback：回调函数
type：响应结果的类型

Axios异步框架实现方式

Axios对原生的AJAX进行封装，简化书写。官网: https://www.axios-http.cn

//get方式
axios({
method:“get”
url:“请求路径+请求参数”
}).then(function(resp){
//回调函数
});
//post方式
axios({
method:“post”
url:“请求路径”
data:“请求参数”
}).then(function(resp){
//回调函数
});