2020-09-23---Ajax

最新推荐文章于 2020-12-09 10:32:45 发布

易de

最新推荐文章于 2020-12-09 10:32:45 发布

阅读量96

点赞数

分类专栏： H5

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/108753870

版权

H5 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

52 篇文章 0 订阅

订阅专栏

Ajax

- ajax

ajax

概念
无需加载整个网页（刷新页面）的情况下，能够更新部分网页对的技术。
优点
（1）无刷新更新数据
（2）异步与服务器通信，不打断用户的操作
（3）前后端负载平衡
（4）前后端分离
缺点
（1）对搜索引擎支持较弱
（2）不能很好地支持移动端设备
（3）没有了back和history功能，即对浏览器机制的破坏
（4）对IT企业带来了新的安全威胁。

ajax原理

四步
1.创建对象
2.连接服务器
3.发送请求
4.接收返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <p>通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容</p>
    <input type="button" value="请求数据">
    <div id="box"></div>
    <script>
        var o_btn = document.getElementsByTagName('input')[0];
        var o_div = document.getElementById('box');
        o_btn.onclick = function(){
            //1.创建对象
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
            //2.连接服务器
            xhr.open('get','abc.txt',true);
            //3.发送请求
            xhr.send();
            //4.接受返回
            xhr.onreadystatechange = function (){
                //判断请求状态码
                if(xhr.readyState === 4){
                    //判断响应状态码
                    if(xhr.status === 200){
                        // 通过responseText属性将请求到的数据拿回来，放到div中
                        o_div.innerText = xhr.responseText;
                    }
                }
            }
        }
    </script>
</body>
</html>

ajax封装1

function ajax(url,fnWin,fnFaild){
    //1.创建对象
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiceXObject('Microsoft.XMLHTTP');
    //2.与服务器建立联系
    xhr.open('GET',url,true);
    //3.发送请求
    xhr.send();
    //4.接收响应
    xhr.onreadystatechange = function(){
        //判断请求状态码
        if(xhr.readyState === 4){
            //判断响应状态码
            if(xhr.status === 200){
                if(fnWin instanceof Function){
                    fnWin(xhr.responseText);
                }else{
                    fnFaild();
                }
            }
        }
    }
}

ajax封装2

通过get方式访问，信息是携带咋地址栏里面的
URL路径：‘09访问php.php?name=张三&pwd=123’
通过post方式访问，信息需要单独传递过来
URL路径：‘09访问php.php’
信息data：‘name=张三&pwd=123’

let ajax = {
    get : function(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(fn instanceof Function){
                        fn(xhr.responseText);
                    }
                }
            }
        }
    },
    post : function(url,data,fn){
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xhr.open('post',url,true);
        //设置http的请求头
        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(fn instanceof Function){
                        fn(xhr.responseText);
                    }
                }
            }
        }
    }
}

应用（说明：代码里的ajax（）都是上面封装1的ajax函数）

1.通过ajax请求 .txt 的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <p>通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容</p>
    <input type="button" value="请求数据">
    <div id="box"></div>
    <script>
        //获取btn
        let o_btn = document.getElementsByTagName('input')[0];
        //获取放置内容的盒子
        var o_div = document.getElementById('box');
        //点击事件
        o_btn.onclick = function(){
            //1.创建XMLHttpRequest对象
            // var xhr = new XMLHttpRequest();  //IE6以下不兼容
            // var xhr = new ActiveXObject('Microsoft.XMLHttp');
            //兼容
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
            alert(xhr);
            alert(xhr.readyState);  //0
            // 2.连接服务器
            xhr.open('get','01abc.txt',true);
            alert(xhr.readyState);  //1
            //3.发送请求  
            xhr.send();
            alert(xhr.readyState);
            //4.接受返回
            xhr.onreadystatechange = function(){
                //判断请求状态码
                if(xhr.readyState === 4){
                    //判断响应状态码
                    if(xhr.status === 200){
                        o_div.innerHTML = xhr.responseText;
                    }
                }
            }
        }
    </script>
</body>
</html>

01abc.txt

hello

2.ajax缓存问题

浏览器缓存的是URL地址，也就是说当你再次访问一个内容的时候，浏览器会从缓存中找你之前访问的这个内容的URL地址。
URL地址的完整路径：
例如百度：
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=java&rsv_spt=1&oq=java&rsv_pq=9ae87b9e0000af9a&rsv_t=64a2xLPgOIqVeiuTYMJ2vghLIMU2amOkhpFAUsNeIXZ6aMAmwitsrebiPa%2BGy1E8WWZa&rqlang=cn&rsv_enter=0&rsv_sug3=1&rsv_sug1=1&rsv_sug7=100&rsv_sug4=1395
httrs:// 协议
www.baidu.com 主机（host）
s 路径
上面的内容确定了，就能确定是百度的地址
？后面是参数，不影响网址
也就是说我们在设置URL路径的时候可以每次都给问号（？）后面一个不一样的内容，这样就能保证每次访问的但都不是同一个URL了。

即：设置url?key=时间戳
‘abc.txt?y=’ + new Date().getTime()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <p>通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容</p>
    <input type="button" value="请求数据">
    <div id="box"></div>
    <script src="js/ajax.js"></script>
    <script>
        //获取btn
        let o_btn = document.getElementsByTagName('input')[0];
        //获取放置内容的盒子
        var o_div = document.getElementById('box');
        //点击事件
        //缓存问题
        o_btn.onclick = function(){
            ajax('abc.txt?y=' + new Date().getTime(),(data)=>{
                console.log('abc.txt?y=' + new Date().getTime());
                o_div.innerText = data;
            },()=>{
                alert('没有找到请求的数据');
            })
        }
    </script>
</body>
</html>

3.ajax乱码问题

统一字符编码集为utf-8

4ajax访问数组

URL路径：‘04arr.json?y=’ + new Date().getTime()
04arr.json 里面的内容：[1,2,3,4]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04访问</title>
</head>
<body>
    <p>通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容</p>
    <input type="button" value="请求数据">
    <div id="box"></div>
    <script src="js/ajax.js"></script>
    <script>
        let o_btn = document.getElementsByTagName('input')[0];
        var o_div = document.getElementById('box');
        o_btn.onclick = function(){
            ajax('04arr.json?y=' + new Date().getTime(),(data)=>{
                console.log('04arr.json?y=' + new Date().getTime());
                //data 为从外界请求回来的数据，从外界请求回来的数据都是字符串
                o_div.innerText = data;  //[1,2,3,4]
                o_div.innerText += data[0];  //[    字符串的0下标找到 [
            },()=>{
                alert('没有找到请求的数据');
            })
        }
    </script>
</body>
</html>
</html>

5.ajax解析json字符串

三种方法：

eval（）有风险
parse 有兼容
new Function(‘return’ + 解析的字符串)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05parse</title>
</head>
<body>
    <script src="js/ajax.js"></script>
    <script>
        // var str = '{"id" : 10,"name" : "手机","price" : 3999}';
        var str = '1 + 1';
        //1.eval  有风险
        //eval解析对象的时候要加一对小括号
        var obj_eval = eval('(' + str + ')');
        console.log(obj_eval);
        //2.parse  有兼容
        var obj_parse = JSON.parse(str);
        console.log(obj_parse);
        //3.  能解析对象，不能解析普通字符串
        var obj_function = (new Function('return' + str))();
        console.log(obj_function);
    </script>
</body>
</html>

6.ajax解析json对象

URL路径：‘06json.json?y=’ + new Date().getTime()
里面的内容为
{
“name” : “张三”,
“age” : 18
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06访问json</title>
</head>
<body>
    <p>通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容</p>
    <input type="button" value="请求数据">
    <div id="box"></div>
    <script src="js/ajax.js"></script>
    <script>
        let o_btn = document.getElementsByTagName('input')[0];
        var o_div = document.getElementById('box');
        o_btn.onclick = function(){
            ajax('06json.json?y=' + new Date().getTime(),(data)=>{
                data = (new Function('return' + data)());
                console.log(data);
                o_div.innerText = data;
                o_div.innerText += data.name;
            },()=>{
                alert('没有找到请求的数据');
            })
        }
    </script>
</body>
</html>
</html>

7.ajax实现分页效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07分页</title>
</head>
<body>
    <ul></ul>
    <a href="javascript:;">1</a>
    <a href="javascript:;">2</a>
    <a href="javascript:;">3</a>
    <script src="js/ajax.js"></script>
    <script>
        var o_ul = document.querySelector('ul');
        var o_a = document.querySelectorAll('a');
        for(let i = 0,len = o_a.length;i < len;i ++){
            o_a[i].onclick = function(){
                //每次换页之前都先把页面清空，不然当点击下一个页面的时候，上一个页面的内容还在
                o_ul.innerText = '';
                ajax('07page' + (i + 1) + '.json?y' + new Date().getTime(),(data)=>{
                    let arr = (new Function('return' + data)());  //存的是啥类型就解析为啥类型
                    //遍历数组
                    arr.forEach((value)=>{
                        //创建li
                        var o_li = document.createElement('li');
                        o_li.innerHTML = `<b>${value.user}</b><i>${value.age}</i>`;
                        o_ul.appendChild(o_li);
                    });
                   
                })
            }
        }
    </script>
</body>
</html>

点击1,2,3的时候，上面的内容会切换。
在这里插入图片描述

8.委托实现分页

URL路径： ‘07page’ + target.innerText + ‘.json?y’ + new Date().getTime()
07page’ + target.innerText ：点击1的时候，target.innerText为1；点击2…target.innerText为2………，然后分别呈现里面的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07分页</title>
</head>
<body>
    <ul></ul>
    <a href="javascript:;">1</a>
    <a href="javascript:;">2</a>
    <a href="javascript:;">3</a>
    <script src="js/ajax.js"></script>
    <script>
        var o_ul = document.querySelector('ul');
        var o_a = document.querySelectorAll('a');
        o_ul.parentNode.onclick = function(evt){
            o_ul.innerHTML = '';
            var e = evt || window.event;
            var target = e.target || e.srcElement;
            if(target.nodeName.toUpperCase() === 'A'){
                ajax('07page' + target.innerText + '.json?y' + new Date().getTime(),(data)=>{
                    data = (new Function('return' + data))();
                    //遍历数组
                    data.forEach(value => {
                         var o_li = document.createElement('li');
                         o_li.innerHTML = `<strong>${value.user}</strong><i>${value.age}</i>`;
                        o_ul.appendChild(o_li);
                    });
                   
                    
                })
            }
        }
    </script>
</body>
</html>

9.访问php （这里调用的是ajax封装2的函数）

通过get方式访问，信息是携带咋地址栏里面的
URL路径：‘09访问php.php?name=张三&pwd=123’
通过post方式访问，信息需要单独传递过来
URL路径：‘09访问php.php’
信息data：‘name=张三&pwd=123’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09访问php</title>
</head>
<body>
    <input type="button" value="访问php">
    <div id="box"></div>
    <script src="js/ajax2.js"></script>
    <script>
        let o_btn = document.querySelector('input');
        let o_box = document.getElementById('box');
        o_btn.onclick = function(){
            // ajax.get('09访问php.php?name=张三&pwd=123',data=>{
            //     o_box.innerHTML = data;
            // })
            ajax.post('09访问php.php','name=张三&pwd=123',data=>{
                o_box.innerHTML =data;
            })
        }
    </script>
</body>
</html>

易de

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-09-23---Ajax

Ajaxajaxajax原理ajax封装应用1.通过ajax请求 .txt 的内容ajax概念无需加载整个网页（刷新页面）的情况下，能够更新部分网页对的技术。优点（1）无刷新更新数据（2）异步与服务器通信，不打断用户的操作（3）前后端负载平衡（4）前后端分离缺点（1）对搜索引擎支持较弱（2）不能很好地支持移动端设备（3）没有了back和history功能，即对浏览器机制的破坏（4）对IT企业带来了新的安全威胁。ajax原理四步1.创建对象2.连接服务器3.发送请求
复制链接

扫一扫

专栏目录