AJAX入门——不加载整个页面,与服务器交换数据并更新部分网页内容

AJAX = Asynchronous JavaScript And XML = 异步的JavaScript和XML

客户端和服务器同步和异步

最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

实现方式1——javascript

<input type="submit" onclick="fun()">

-------------------------------------------------------------------------
<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、发送请求
            xmlhttp.open("GET","ajaxservlet?username=jack",true);
            xmlhttp.send();

            //3、接受返回数据
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var  responsetest = xmlhttp.responseText;
                    alert(responsetest)
                }
            }
        }

    </script>

实现方式2

$.ajax({

        xxx:xxx,

        xxx:xxx

});

该参数规定 AJAX 请求的一个或多个名称/值对。

jQuery ajax() 方法 | 菜鸟教程

    <script>
        function fun() {
            $.ajax({
                url:"ajaxservlet",//
                type:"get",
                // data:"username=jack&age=23",
                data:{"username":"jack","age":"25"},
                success:function (data) {
                    alert(data);
                },
                error:function () {
                    alert("请求出错");
                }
            });
        }

    </script>

实现方式3

$.get(URL,data,function(data,status,xhr),dataType)

    <script>
        function fun() {
            $.get("ajaxservlet",{"username":"jack","age":"24"},function (data) {
                alert(data)
            },"text");
        }
    </script>

实现方式4