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);
    });
});