ajax学习笔记代码

最新推荐文章于 2024-09-14 11:06:39 发布

一支海棠

最新推荐文章于 2024-09-14 11:06:39 发布

阅读量101

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/m0_45136861/article/details/113528832

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

ajax学习笔记代码

笔记1

【Ajax的由来】
    ajax是javascript里面的一个技术
    2005年以前web1.0时代
        网页都是以展示为主，内容多为静态
        那个时候没有前端这个职位   美工或者叫模板工程师
        后台以嵌套模板的形式开发
            asp jsp php
    2005年以后 web2.0时代
        用户不仅仅阅读静态网页，为网站做出贡献
        用户体验提高了。

   ajax是web2.0时代的一个标志
    现在web3.0时代为主
        大数据时代
        网络可以根据用户，给用户进行推送
        搜集你平常的习惯

【ajax是干什么】
    就是做交互的

  什么是交互
        用户对浏览器发出指令（做出操作），浏览器或者程序对操作有相应的反馈

   主要做的是前后台的交互，传递接收数据
【form表单】
    form必须要填写的东西是什么

   1、action   地址
        2、name   数据的名字
        3、method  默认值  get

   form表单数据的格式
            get  地址栏？数据名=数据值&数据名=数据值
            post 不在地址栏显示

   get和post的区别
            1、get地址栏提交，post不是
            2、get不安全，post相对安全
            3、缓存 cache
                浏览器对于同一个地址只访问一次
                这个缓存对开发者不好
                get有缓存的，post没有缓存
            4、容量大小
                get 比较小 几k
                post 很大 理想没有限制


   平常项目中get的使用量比post多 互联网最重要的就是分享
        form表单在传递数据的时候缺点
            1、刷新页面、跳转页面、覆盖页面  用户体验非常差
            2、只能给后台发送数据、不能接收后台的数据

【ajax特点】
        1、无刷新
        2、不仅可以发送数据、还可以接收数据
【ajax】
    Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
  异步   不需要等待、可以继续操作其他事情

   同步  需要等待，得到结果后，才能继续做下一件事

   javascript是一个同步（阻塞加载）的语言

   ajax可以模拟异步的操作
        ajax为什么要有异步的特性
    XML  是一种数据格式  但是现在用的很少了，因为这种格式非常麻烦

   json格式

【json】
    let a=1;

    let name='张三'
    let age=18
    let sex=女

    let person1={
        name:'张三',
        age:18,
        sex:'女'
    }
    person1.job='学生'
    person1.job='老师'

    let person1={
        'name':'张三',
        'age':18,
        'sex':'女'
    }

    let person1={
        "name":"张三",
        "age":18,
        "sex":"女"
    }

    json对象：无序的键值对集合


js的json对象和数据交互的json格式有什么区别
    js的json对象里面的key我们一般不加引号
    但是当json变成一种格式的时候必须是双引号

    {
        "name":"张三",
        "age":18,
        "sex":"女"
    }
【数组】
    [1,2,3,4,5]
    ['三国演义','水浒传','西游记','红楼梦']
    ['apple','banana','pear']
    有序的数据集合
【网页需要展示的数据如何用json格式储存】
【如何根据json数据，渲染页面】
    1、先布局
    2、循环数据
    3、创建元素
    4、在元素里面添加内容
    5、把元素插入到指定的位置
【如何去利用ajax去请求数据】
    ajax
    原生的ajax是一系列的步骤，不是一个简单的操作。
    如果我们没有都把这些步骤全部写一遍，不行。所以需要把ajax封装使用
    1、先布局
    2、利用ajax请求数据
    3、把字符串的json变成真正的json对象
    4、循环数据
    5、创建元素
    6、在元素里面添加内容
    7、把元素插入到指定的位置
【我封装的ajax的用法】
    ajax({
        url:'',//后台的地址
        type:'get|post'//传输方式 默认是get
        data:{}, //给后台传送的数据 {a:1,b:2}
        success:function(res){} //成功的函数 res是接收的数据
        error:function(err){} //失败的函数  err是失败的错误信息
    })

代码片段

json test

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var json = {
            a: 1,
            b: 2,
        }
        console.log(json['a']); //  .后不能跟变量  但是 [] 里面可以
        console.log(json.b);
        json.a = 2 //修改
        console.log('a', json.a);
        json.c = 5 // 增加
        console.log(json.c);

        // for in 循环
        for (var key in json) {
            console.log(key, json[key]);
        }
    </script>
</head>

<body>

</body>

</html>

ajax.js

function json2url(json){
    json.t=Math.random();
    var arr=[];
    for(var name in json){
        arr.push(name+'='+json[name]);
    }
    return arr.join('&');
}

function ajax(json){

    json=json || {};
    if(!json.url){
        alert('地址是必填的！');
        return;
    }
    json.type=json.type || 'get';
    json.data=json.data || {};


    var timer=null;
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }else{
        var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
    }

    switch(json.type.toLowerCase()){
        case 'get':
            oAjax.open('GET',json.url+'?'+json2url(json.data),true);

            oAjax.send();
            break;
        case 'post':
            oAjax.open('POST',json.url,true);
            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            oAjax.send(json2url(json.data));
            break;
    }

    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){

            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                json.success && json.success(oAjax.responseText);
            }else{
                json.error && json.error(oAjax.status);
            }
        }
    };
}

news.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    li {
        list-style: none;
        color: blue;
    }
    
    #ul2 li {
        float: left;
        margin: 20px;
        text-decoration: none;
    }
    
    a {
        text-decoration: none;
        color: blue;
    }
    
    a:visited {
        color: blue;
    }
</style>

<body>

    <ul id="ul1">

    </ul>
    <ul id="ul2">

    </ul>
</body>

</html>
<script src="ajax.js"></script>
<script>
    // 获取ul
    var oUL = document.getElementById('ul1')
    var oUL2 = document.getElementById('ul2')
    ajax({
        url: 'news.json', //后台地址
        type: 'GET', // 请求方式
        success(res) {
            console.log(JSON.parse(res));
            var json = JSON.parse(res); //把 res 变为json 对象
            //  循环数据
            for (var i = 0; i < json.news.length; i++) {
                //创建li
                var oLi = document.createElement('li');
                // 插入内容
                oLi.innerHTML = '<a href=" ' + json.news[i].link + '" >' + json.news[i].tit + '</a>';
                //元素插入指定位置
                oUL.appendChild(oLi)
            }
            //循环数据
            for (var i = 0; i < json.taobao.length; i++) {
                var oLi2 = document.createElement('li');
                oLi2.innerHTML =
                    '<a href=" ' + json.taobao[i].link + '">\n' +
                    '<img src=" ' + json.taobao[i].src + '" alt="">\n' +
                    '<p class="msg">' + json.taobao[i].msg + '</p>\n' +
                    '<p class="personNum">😀<span>' + json.taobao[i].number + '</span>人说好</p>\n' +
                    '</a>';
                oUL2.appendChild(oLi2)
            }

        },
        error(err) {

        }
    })
</script>