AJAX

一、概念

AJAX：Asynchronos JavaScript And AML （异步JavaScript和XML）

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

异步和同步的概念
1. 同步：相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。
2. 异步：当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。

二、实现方式

1、原生的js实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现ajax</title>
    <script>
        //定义方法
        function fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立连接
            /*
            参数：
                1.请求方式
                    1.get方式：请求参数在URL后拼接。send方法为空参
                    2.post方式：请求参数在send方法中定义
                2.请求的url
                3.同步或异步请求：true（异步），false（同步）
            */
            xmlhttp.open("post","aJAXServlet?username=tom",true);

            //3.发送请求
            xmlhttp.send();

            //4.接受并处理来自服务器的响应结果
            /*获取方式：xmlhttp.responseText
                      xmlhttp.responseXML*/
            // 当服务器响应成功后获取
            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
            xmlhttp.onreadystatechange=function() {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input >
</body>
</html>

2、JQuery实现方式

1、$.ajax()

语法：$.ajax({键值对})；

  <script>
        //定义方法
        function fun(){
            //使用$.ajax()发送异步请求
            $.ajax({
                url:"aJAXServlet",  //请求路径
                type:"POST", //请求方式 ("POST" 或 "GET")， 默认为 "GET"
                async:false, //同步或异步请求。true为异步，false为同步。默认为true
                //请求参数的两种方式。GET 请求中将附加在 URL 后。
                //第一种
                // data:"username=lisi&age=23", //请求参数
                //第二种
                data:{"username":"lisi","age":23},
                success:function (data) {
                    alert(data);
                }, //响应成功后的回调函数
                error:function () {
                    alert("出错了")
                },
                dataType:"text" //设置接受到的响应数据的格式
            })
        }
    </script>

2、$.get()

发送get请求

语法：$.get(url, [data], [callback], [type])

参数：[]中括号中的参数为可选参数
- url : 请求路径
- data ：请求参数
- callback ：回调函数
- type ：响应结果的类型

<script>
        //定义方法
        function fun(){
            //使用$.get()发送异步请求
            $.get("aJAXServlet",{username:"lisi"},function (data) {
                alert(data);
            },"text")
        }
</script>

3、$.post()

发送post请求

语法：$.post(url, [data], [callback], [type])

一、概念

二、实现方式

1、原生的js实现方式

2、JQuery实现方式

1、$.ajax()

2、$.get()

3、$.post()

JSON