AJAX 和Axios（Web数据交互方式）

1.AJAX的概述和作用

• AJAX：异步的JavaScript和XML
• 作用：
  • 与服务器进行数据交换：通过AJAX可以给服务器发送请求数据，并获取服务器响应的数据，使用AJAX和服务器进行通信，可以使用HTML和AJAX替换JSP页面
  • 异步交互：可以在不重新加载页面的情况下，与服务器交换数据并更新部分的网页技术

2.同步和异步

3.AJAX使用步骤

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

2. 创建XMLHTTPRequest对象，用于服务器交换数据

    		//1.创建核心对象
           var xhttp;
           if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
           } else {
               // code for IE6, IE5
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
   

3. 向服务器发送请求

   //2.发送请求
           xhttp.open("GET", "http://localhost/ajaxServlet?username="+username);
           xhttp.send();
   

4. 获取服务器响应数据

    		//3.获取响应
           xhttp.onreadystatechange = function() {
               if (this.readyState ===4 && this.status ===200) {
                   //alert(this.responseText);
               }
           }
   

4.Axios的使用步骤

1. 引入axios的js文件

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

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

   axios({
           method:"get",
           url:"http://localhost/axiosServlet?username=zjsj"
       }).then(function (resp) {
           alert(resp.data);
       })
   

   axios({
           method:"post",
           url:"http://localhost/axiosServlet",
           data:"username=zjsj"
       }).then(function (resp) {
           alert(resp.data);
       })
   

5.Axios请求方式别名

方法名
axios.get(url[,config])
axios.deletet(url[,config])
axios.head(url[,config])
axios.options(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

方法名	作用
get(url)	发起GET方式请求
post(url,请求参数)	发起POST方式请求

• 发送get请求

  axios.get("http://localhost/axiosServlet?username=zjsj").then(function (resp) {
          alert(resp.data);
      })
  

• 发送post请求

  axios.post("http://localhost/axiosServlet","username=zjsj").then(function (resp) {
          alert(resp.data);
      })