首页  »   Ajax

AJAX漫笔2

网友分享于:2017-08-21  浏览:0次
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);
    });
});

 

相关解决方案

最新解决方案