当前位置 : 主页 > 编程语言 > 其它开发 >

ajax优缺点及用法

来源:互联网 收集:自由互联 发布时间:2022-05-30
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)
        }
    });

 

上一篇:对称密码(共享密钥密码)
下一篇:没有了
网友评论