首页 > 代码库 > AJAX

AJAX

2024-10-03 13:22:39   217人阅读

1.AJAX的优点和缺点
        优点:
            * 异步交互, 提高了用户体验!
            * 服务器只响应部分数据, 而不是整个页面, 所以降低了服务器的压力!
        缺点:
            * ajax不能应用所有的场景
            * ajax会无端的增加访问服务器的次数, 给服务器带来了压力!!

 

2.几种常用的AJAX实现方法：

1. load方法
       $(selector).load(url,data,callback);
             selector -- 选择器, 将从服务器获取到的数据加载到指定的元素中
             url -- 发送请求的URL地址
             data -- 可选, 向服务器发送的数据 key/value数据
             callback -- 可选, load方法完成后所执行的函数
      示例:
            $("#username_msg").load("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username});

　　　　　--->将后台返回的结果会回写到 id为 username_msg 的标签中

2. $.get 和 $.post 方法
　　$.get(url, [data], [callback]);
   　　　　 url -- 发送请求的URL地址
   　　　　 data -- 可选, 向服务器发送的数据
   　　　　 callback -- 可选, 请求成功后所执行的函数
　　示例:
   　　 $.get("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username}, function(result){
       　　 $("#username_msg").html("<font style=‘color:red‘>"+result+"</font>");
  　　  });

3. $.ajax方法
    $.ajax(url, [data], [async], [callback]);
        url -- 发送请求的URL地址
        data -- 可选, 发送至服务器的key/value数据
        async -- 可选, 默认为true, 表示异步交互
        type -- 可选, 请求方式 , 默认为"GET"。
        success -- 可选, 请求成功后执行的函数, 函数参数:
        result -- 服务器返回的数据
    示例:
        $.ajax({
            "url" : "<%= request.getContextPath() %>/AjaxCheckUsernameServlet",
            "data" : {"username": username},
            "async" : true,
            "type" : "POST",
            "success" : function(result){
                $("#username_msg").html("<font style=‘color:red‘>"+result+"</font>")
            }
        });

 

3.原生JS底层实现ajax请求：(只需四步)

第一步, 获取XMLHttpRequest对象
    var xmlHttp = ajaxFunction();
    function ajaxFunction(){
        var xmlHttp;
        try{
            //现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象
            xmlHttp = new XMLHttpRequest();
        }catch(e){
            try{
                //IE6.0
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                try{
                    //IE5.0及更早版本
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e){
                    alert("...");
                    throw e;
                }
            }
        }
        return xmlHttp;
    }

第二步, 打开与服务器的连接
    xmlHttp.open(method, url, async);
        > method: 请求方式, 可以是GET或POST
        > url: 所要访问的服务器中资源的路径 如: /Day10/servlet/AServlet
        > async: 是否为异步传输, true 表示为异步传输 一般都是true
    
第三步, 发送请求
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //通知服务器发送的数据是请求参数
    xmlHttp.send(xxx); //注意, 如果不给参数可能会造成部分浏览器无法发送请求
    > 参数: 
        如果是GET请求, 可以是null, 因为GET提交参数会拼接在url后面
        如果是POST请求, 传入的就是请求参数
            "username=张飞&psw=123"
    
第四步, 注册监听
    > 在XMLHttpRequest对象的一个事件上注册监听器:     
        onreadystatechange
    > 一共有五个状态:(xmlHttp.readyState)
        0状态: 表示刚创建XMLHttpRequest对象, 还未调用open()方法
        1状态: 表示刚调用open()方法, 但是还没有调用send()方法发送请求 
        2状态: 调用完了send()方法了, 请求已经开始
        3状态: 服务器已经开始响应, 但是不代表响应结束 
        4状态: 服务器响应结束!(通常我们只关心这个状态) 
    > 获取xmlHttp对象的状态:
        var state = xmlHttp.readyState;//可能得到0, 1, 2, 3, 4 
    > 获取服务器响应的状态码
        var status = xmlHttp.status;
    > 获取服务器响应的内容
        var data = http://www.mamicode.com/xmlHttp.responseText;//得到服务器响应的文本格式的数据  

        xmlHttp.onreadystatechange = function(){
            //当服务器已经处理完请求之后
            if(xmlHttp.readyStat == 4){
                if( xmlHttp.status == 200 ){
                    //获取响应数据
                    var result = xmlHttp.responseText;
                    result = xmlHttp.responseXML;
                }
                
            }
            
        }

 

AJAX


联系
我们