ajax优缺点及用法

Ajax

是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，几种原有技术的结合体

优点

  1. 通过异步的模式，提升用户体验
  2. 减少不必要的数据往返，优化浏览器和服务器之间的传输，也减少了带宽占用
  3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载

缺点

  1. 不支持浏览器的回退按钮
  2. 暴露了与服务器交互的细节从而引起安全问题
  3. 对搜索引擎的支持较弱

原生ajax

  1. 创建一个XMLHttpRequer异步调用对象，是整个ajax的核心
  2. 创建一个新的HTTP请求，并指定该HTTP请求的方法
  3. 设置响应HTTP请求状态变化的函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    //获取xhr对象，兼容各个版本
    function crateXHR() {
        if (typeof XMLHttpRequest != 'undefined'){
            return new XMLHttpRequest();
        }else if (typeof ActiveXObject != 'undefined'){
            var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0']
            var xhr;
            for (var i = 0; i < xhrArr.length; ++i){
                try{
                    xhr = new ActiveXObject(xhrArr[i]);
                    break;
                }catch (e){

                }
            }
            return xhr;
        }else {
            throw new Error('请升级浏览器版本！');
        }
    }
    //创建XMLHttpRequest对象
    var xhr = crateXHR();
    //响应XMLHttpRequest对象状态变化的函数，onreadystatechange在readyestatechange属性发生变化时触发
    xhr.onreadystatechange = function () {
        //异步调用成功
        if (xhr.readyState === 4){//异步调用成功，响应内容解析完成
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
                //获取服务器返回的数据
                var demo = document.getElementById('demo');
                demo.innerText = xhr.responseText;
            }
        }
    }
    //创建请求
    xhr.open('get','./json/demo.json',true);
    //发送请求
    xhr.send(null);
    //xhr.send({id:8,uuid:"afdeafd58fadf"});//xhr.open是post的话，参数需要放在send中，并在请求头加上header请求头
    //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
</script>
<body>
<div id="demo"></div>
</body>
</html>

jQuery封装后的ajax方法

    //jQuery的ajax方法
    $.ajax({
        url:"./json/demo.json",   //请求地址
        type:"get", //请求方式
        async:true, //同步异步
        dataType:"json", //数据返回格式
        success:function (data) {  //请求成功的回调
            //获取服务器返回的数据
            $('#demo').text(data)
        }
    });

 

posted @ 2022-04-14 22:22  一剑天门  阅读(110)  评论(0)  编辑  收藏  举报