Ajax的使用

最新推荐文章于 2024-11-13 01:18:00 发布

小刘哥哥--

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量81

点赞数

分类专栏： ajax 文章标签： javascript css html5 es6 jquery

本文链接：https://blog.csdn.net/m0_51073906/article/details/111938261

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Ajax的使用

ajax的工作原理

(创建一个XMLHTTPRequest对象)
(与服务器建立连接)
（发送请求）
（等待响应）

ajax的优点

1.无需刷新更新数据
2.异步与服务器通信
3.前端和后端负载平衡
4.Ajax使得界面与应用分离，也就是数据与呈现分离

ajax的缺点

1.Ajax干掉了Back与History功能，即对浏览器机制的破坏
2.Ajax技术给用户带来了很好的用户体验的同时也对IT企业带来了新的威胁，Ajax技术就如同对企业数据建立了一个直接通道，这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑
3.对搜索引擎支持较弱，不利于优化
4.不能很好地支持移动设备

封装Ajax的函数（同时适用get和post）

let ajax = {
    get(url,fn){
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xhr.open('get',url,true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    if(typeof fn === 'function'){
                        fn(xhr.responseText);
                    }
                }
            }
        }
    },
    post(url,data,fn){
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xhr.open('post',url,true);
        xhr.setRequestHeader('Content-type','Application/x-www-form-urlencoded;charset=utf-8');
        xhr.send(data);
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    if(typeof fn === 'function'){
                        fn(xhr.responseText);
                    }
                }
            }
        }
    }
}