1.Ajax

1.1. The concept

Ajax: ASynchronous JavaScript And XML, Asynchronous JavaScript and XML
同步And 异步: basic client and server communicate with one another on
Ajax is a kind 用于创建快速动态网页的技术, without having to reload the entire web page technical section of the page can be updated. By in the background with the server 少量数据交换, Ajax allows asynchronous page updates. This means that, for certain parts of the page to be updated without reloading the entire page. Traditional web page (do not use Ajax) If you need to update the content, you must reload the entire web page. Overall, that is 提升用户体验, allowing users to operate more freely flowing

1.2. Implementation

1.2.1. Native JS implementation (understand)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //定义方法，按钮一点击就会执行
        function  fun() {
            //发送异步请求
            //1.创建核心对象，查看W3school文档的JavaScript章节有Ajax创建对象的代码，直接复制过来
            var xmlhttp;
            if(window.XMLHttpRequest){
                //code for IE7+,Firefox,Chrome,Opera,Safari
                xmlhttp=new ActiveXObject();
            }else{
                //code for IE6,IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2.建立连接
            /*
                参数：
                    1.GET或POST请求方式
                        GET方式：请求参数在URL后面拼接，send方法为空参
                        POST方式：请求参数在send方法中定义
                    2.请求的URL
                    3.同步(false)或异步(true)
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);

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

            //4.接收并处理来自服务器的响应结构，和创建对象一样也参考文档
            //获取方式：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取
            //当xmlhttp对象的就绪状态改变时，会触发事件onreadystatechange
            xmlhttp.onreadystatechange=function () {
                //就绪状态是否为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();">
</body>
</html>

1.2.2.JQuery implementation

$.ajax()
$.get()
$.post()

--Ajax front-end and JSON

1.Ajax

1.1. The concept

1.2. Implementation

1.2.1. Native JS implementation (understand)

1.2.2.JQuery implementation

2.JSON

Guess you like