【快速入门】—— AJAX

AJAX

1.概述

概念：

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

AJAX作用：

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

2.快速入门

1. 编写AjaxServlet，并使用response输出字符串

2. 创建 XMLHttpRequest 对象：用于和服务器交换数据

    var xmlhttp;
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

3. 向服务器发送请求

xmlhttp.open("GET",“url");
xmlhttp.send();//发送请求

4. 获取服务器响应数据

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
        alert(xmlhttp.responseText);
    }
}

3.AXIOS异步框架

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

1. 引入 axios 的 js 文件

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

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

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){        //resp 代表serlvet返回的响应
    alert(resp.data);
})

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

4.Axios请求方式别名

• 为了方便起见， Axios 已经为所有支持的请求方法提供了别名。

get请求:

axios.get("url")
    .then(function (resp){
        alert(resp.data);
});

post请求:

axios.post("url","参数")
    .then(function (resp){
    alert(resp.data);
});