AJAX入门

AJAX

• 概念：AJAX（Asynchronous JavaScript And XML）：异步的JavaScript和XML

• AJAX作用：

  1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据。

     • 使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了。

2. 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页技术，如：搜索联想，用户名是否可用于校验，等等。

AJAX快速入门

1. 编写AjaxServlet，并使用response 输出字符串
2. 创建 XMLHttpRequest对象，用于服务器交换数据
3. 向服务器发送请求
4. 获取服务器响应数据

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



    //3.获取响应
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                alert(this.responseText);
        }
    };
    //2.发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    xhttp.send();

</script>

Axios 异步 框架

Axios基本使用

1.引入axios的js文件

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

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

<script>
    //1. get
    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })

</script>

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

Axios 请求方式别名

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

• 请求方式别名

  axios.request(config)

  axios.get(url[, config])

  axios.delete(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("url").then(function(resp){
  	alert(resp.data);
  })
  

• post

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