AJAX随笔2

Ajax作用：是用JavaScript向服务器发送异步请求，然后服务器给出响应，然后以XML格式的文件返回给浏览器端！

异步：当浏览器向服务器发送请求的时候，不是整个页面刷新，而是局部刷新[局部信息发送请求]！

同步：当浏览器向服务器发送请求的时候，整个页面都会刷新！

XML:一种文件格式，现在用XML这种返回格式的数据比较少了，XML解析性能较差，而且比较消耗带宽，现在大多数都是在是使用JSON数据的返回格式！!

案例: POST请求

<script type="text/javascript">

    window.onload = function(){

        var btn = document.getElementById("btn01");

            btn.onclick=function(){

            //1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！

            var xhr = new XMLHttpRequest();

            //2.通过open方法设置请求参数

            var method= "post";

            var url = "${pageContext.request.contextPath}/AServlet";

            xhr.open(method, url);

            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //3.发送请求！

            xhr.send("username=zhangsan&password=lisi");

            //4.接收响应信息

            xhr.onreadystatechange= function(){

                if(xhr.readyState == 4 && xhr.status == 200 ){

                    var data = xhr.responseText;

                    alert(data);

                }

            }

        }

    }

</script>

案例: Get请求

<script type="text/javascript">

    window.onload = function(){

        var btn = document.getElementById("btn01");

            btn.onclick=function(){

            //1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！

            var xhr = new XMLHttpRequest();

            //2.通过open方法设置请求参数

            var method= "get";

            var url = "${pageContext.request.contextPath}/AServlet";

            xhr.open(method, url);

            //3.发送请求！

            xhr.send();

            //4.接收响应信息

            xhr.onreadystatechange= function(){

                if(xhr.readyState == 4 && xhr.status == 200 ){

                    var data = xhr.responseText;

                    alert(data);

                }

            }

        }

    }

</script>

JSON

　JSON是JavaScript 对象表示法（JavaScript Object Notation）。
　　　　作用：JSON 是存储和交换文本信息的语法
　　　　优势：JSON 比 XML 更小、更快，更易解析。
　　

　　　　json对象是用{}括起来的键值对结构：
     　　　　1.键和值之间用:分隔
　　  　　 2.键值对之间用,分隔
　　  　　 3.键必须是字符串类型，也就是说必须用""[双引号]引起来！不能使用单引号，也不能不用引号！
　　  　　 4.JSON值的数据类型：
  　　　　　　　　数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在方括号中）、对象（在花括号中）、null
　　　　注意点：JSON对象是用{}括起来的，而数组是用 [ ] 括起来的！

　JSON对象和JSON字符串之间的相互转换：
   　　　　JSON对象转换为JSON字符串：
    　　    　　 var jsonStr = JSON.stringify(json);
    　　　   JSON字符串转换为JSON对象：
     　　　　    var jsonObj = JSON.parse(jsonStr);

JQuery中用ajax发送get请求

<script type="text/javascript">

    $(function(){

        $("#btn01").click(function(){

            $.get("${pageContext.request.contextPath}/AServlet?t="+Math.random(),{"name":"zhangsan","age":12},function(data){

                $("#div01").html(data);

            });

        });

    });

</script>

JQuery中用ajax发送post请求

$(function(){

    $("#btn01").click(function(){

        var url = "${pageContext.request.contextPath}/AServlet";

        var obj = {"username":"张三","password":123456};

        function callback(data){

            alert(data);

        };

        var type = "text";

        $.post(url,obj,callback,type);

    });

});

巴特西

AJAX随笔2

最新文章

热门文章