【前端总览】Ajax 复习

最新推荐文章于 2024-05-20 20:21:09 发布
最新推荐文章于 2024-05-20 20:21:09 发布
阅读量102 收藏 1
点赞数
分类专栏： 前端总览 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40715438/article/details/109367777
版权

文章目录

Ajax预备知识

post和get区别

get

（1）会将上传的内容写在url后面，安全性不高

（2）有最大上传大小限制

post

（1）上传的内容在包头部，url上看不到

（2）没有最大上传大小限制

应用场景

通常小文件，不考虑安全性的时候用get方法。

大文件和需要保密的时候用post

使用服务器实现简单的文件上传（post方法）

（服务器使用wamp）

  • 注意事项

（1）上传文件要用post方法（可能比较大，get限制大小，且更安全）

（2）表单要指定enctype为二进制格式，否则无法读取，只能读到文件名

（3）后端php使用$_FILES[name]获取该文件字典，name为input的name

（4）PHP中会把文件暂时放在一个临时目录，但无法直接从这里取到文件，因为这里的文件不进行处理就会被快速删除，需要把这里的文件拿出来存到自己指定的位置，用到move_uploaded_file方法

（5）路径不要带中文，否则会报错。

  • 简单上传
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>
  <body>
    <form action="upload1.php" method="post">
      <input type="file" name="upload" id="upFIle" />
      <input type="submit" value="upload" />
    </form>
  </body>
</html>

php
<?php
    print_r($_POST);
?>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4sYSJqg4-1603972484193)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20201023154213483.png)]

  • 保存上传的文件
注意 表单要用二进制格式才能读取到上传的文件（enctype）
<!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>
  <body>
    <form action="upload1.php" method="post" enctype="multipart/form-data">
      <input type="file" name="upload" id="upFIle" />
      <input type="submit" value="upload" />
    </form>
  </body>
</html>

<?php

// 1.获取上传文件对应的字典（key-value格式）

    $fileInfo=$_FILES['upload'];
    // print_r($fileInfo);

// 2.获取文件名

    $fileName=$fileInfo['name'];

// 3.获取文件的临时保存路径
    $filePath=$fileInfo['tmp_name'];

// 4.保存文件
	//第一个参数上传上来的文件的暂时路径
	//第二个参数要保存的路径（包括文件名）
    move_uploaded_file($filePath,'./source/'.$fileName);
?>

大型文件上传

  • 虽然post方法上传理论上没有大小限制，但web服务器对上传的文件大小有限制，需要进行修改

  • 修改php.ini

（1）位置：wamp目录–bin–apache–bin

（2）要修改的位置：

1.file_uploads=On	默认应该就是On，不用改

2.upload_max_filesize=2048M 上传文件最大大小

3.post_maxsize=2048M	post方法上传最大大小

4.max_execution_time=30000 脚本执行的最长时间 秒

5.max_input_time=3000	接收提交数据的时间限制 秒

6.memory_limit=2048M	内存消耗限制

Ajax基本概念

  • 使用ajax，可以在不更新整个网页的前提下进行交互。比如百度搜索框下弹出的可能内容

在这里插入图片描述

  • ajax是基于JS的前端技术

Ajax-GET方法

GET方法基本使用
  • 使用步骤
1.创建xmlhttp异步对象
2.设置请求方式和地址
3.发送请求
4.监听状态，进行处理
  • 具体代码

（1）php部分随便写

get1.php
<?php
    echo 'hello world ajax !'
?>

（2）在html页面中写JS脚本

<!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>
  <body>
    <button>send message</button>

    <script>
      let btn = document.querySelector("button");
      btn.onclick = function (val) {
        // 1.创建异步对象
        let xmlhttp = new XMLHttpRequest();

        // 2.设置请求方式和地址
        xmlhttp.open("GET", "./get1.php", true);
        /*
                open的参数
                01 请求方式 GET / POST
                02 请求地址
                03 同步false/异步true   ajax固定异步，必须是true
            */

        // 3.发送请求
        xmlhttp.send();

        // 4.监听状态
        xmlhttp.onreadystatechange = function (val2) {
          // 5.进行处理
          // 5.1当消息传输完成时才进行处理
          if (xmlhttp.readyState === 4) {
            // 5.2判断消息是否正常传输，没有发生错误
            if (
              (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
              xmlhttp.status === 304
            ) {
              // 5.3对成功状态进行处理
              console.log("传输完成！");
            } else {
              console.log("传输出错！");
            }
          }
        };
      };
    </script>
  </body>
</html>

（3）结果：

​ 传输出错的结果

在这里插入图片描述

​ 正确的结果

在这里插入图片描述

  • 状态码总结

（1）readyState

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

（2）state

[200，300)都是成功
304 是访问了本地缓存，也算成功
404 是未找到页面
  • 获得服务器返回的数据

（1）XML格式数据

xmlhttp.responseXML

（2）字符串类型数据

xmlhttp.responseText

修改代码后

在这里插入图片描述

再次请求

在这里插入图片描述

GET方法 IE兼容问题
  • XMLHttpRequest对象的IE兼容

使用下面代码创建xmlhttp ，能够具有IE兼容

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  • IE请求最新数据问题

IE认为同一个URL的内容是固定的，要想实时获得最新数据，必须用不同的url进行请求

解决方案：在url后面加上一段额外字符，没有实际意义，只为了兼容IE

可以使用随机数random也可以使用时间date

xmlhttp.open("GET", "get1_IE.txt?"+(Math.random()), true);
封装Ajax的GET请求
基本封装
  • 意义：每次定义的Ajax操作都是大同小异，为了减少工作量应该把其封装成一个函数
  • 封装方法

需要改变的地方设置成封装方法的参数：

（1）请求的url

（2）成功后的处理 传入一个回调函数success(xhr)

（3）失败时的处理 传入一个回调函数error(xhr)

function myAjaxGet(url, success, error) {
    let btn = document.querySelector("button");
    btn.onclick = function (val) {
        // 1.创建异步对象
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2.设置请求方式和地址
        xmlhttp.open("GET", url + '?t=' + (new Date().getTime()), true);
        /*
                open的参数
                01 请求方式 GET / POST
                02 请求地址
                03 同步false/异步true   ajax固定异步，必须是true
            */

        // 3.发送请求
        xmlhttp.send();

        // 4.监听状态
        xmlhttp.onreadystatechange = function (val2) {
            // 5.进行处理
            // 5.1当消息传输完成时才进行处理
            if (xmlhttp.readyState === 4) {
                // 5.2判断消息是否正常传输，没有发生错误
                if (
                    (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
                    xmlhttp.status === 304
                ) {
                    // 5.3对成功状态进行处理
                    success(xmlhttp);

                } else {
                    error(xmlhttp);
                }
            }
        };
    };
}
  • 使用该封装方法
1.引入封装方法的JS文件
<script src="./get_wrap.js"></script>
2.调用该函数，并定义两个回调函数
<script>
        myAjaxGet('get1_IE.txt',(xhr)=>{
            alert(xhr.responseText);
        },(xhr)=>{
            console.log('error!');
        })
 </script>

结果

在这里插入图片描述

将请求内容放到url上
  • 给封装的方法新增一个参数，用来接收要被放在url上的请求内容
  • 将请求封装在一个对象内传递到ajax方法中，即新参数是一个对象
变化：
1.新增方法obj2str
2.myAjaxGet方法新增参数obj
3.方法内部处理url的地方改成 url+"?"+(obj处理成的str)

function obj2str(obj) {
    /*
        obj的格式为 key:val
        将它转成字符串 key1=val1&key2=val2 的形式
    */
    // 将用于兼容IE的时间随机数也放进来一起处理
    obj.t = new Date().getTime();

    let ret = [];
    //    形成[key1=val1,key2=val2]形式的数组
    for (key in obj) {
        ret.push(key + '=' + obj[key]);
    }
    //    把他们变成用&连接的字符串，返回
    return ret.join('&');

}


function myAjaxGet(url, obj, success, error) {
    let btn = document.querySelector("button");
    btn.onclick = function (val) {
        // 0.将obj变成字符串
        let str = obj2str(obj);
        // 1.创建异步对象
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2.设置请求方式和地址
        xmlhttp.open("GET", url + "?" + str, true);
        /*
                open的参数
                01 请求方式 GET / POST
                02 请求地址
                03 同步false/异步true   ajax固定异步，必须是true
            */

        // 3.发送请求
        xmlhttp.send();

        // 4.监听状态
        xmlhttp.onreadystatechange = function (val2) {
            // 5.进行处理
            // 5.1当消息传输完成时才进行处理
            if (xmlhttp.readyState === 4) {
                // 5.2判断消息是否正常传输，没有发生错误
                if (
                    (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
                    xmlhttp.status === 304
                ) {
                    // 5.3对成功状态进行处理
                    success(xmlhttp);

                } else {
                    error(xmlhttp);
                }
            }
        };
    };
}

 	<script src="./get_wrap2.js"></script>
    <script>
      myAjaxGet(
        "get2.php",
        {
          name: "Joe",
          age: "18",
          fk: 0,
        },
        (xhr) => {
          alert(xhr.responseText);
        },
        (xhr) => {
          console.log("error!");
        }
      );
    </script>
亿点细节

  • 请求响应的时间不定，为了防止时间过长应该设定一个最长时间，超时就停止请求

  • url中不能出现中文，因此要用JS方法将其转码

修改；
1.myAjaxGet方法新增参数limitTime
2.方法内新增timer变量用于接收定时器id
3.方法内新增定时器，定时器时间为limitTime
4.方法内进行url拼接的地方 URL要用encodeURIComponent方法转码
5.obj2str方法中key和val在push前要用encodeURIComponent方法转码


function obj2str(obj) {
    /*
        obj的格式为 key:val
        将它转成字符串 key1=val1&key2=val2 的形式
    */
    // 将用于兼容IE的时间随机数也放进来一起处理
    obj.t = new Date().getTime();


    let ret = [];
    //    形成[key1=val1,key2=val2]形式的数组
    for (key in obj) {
        ret.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
    //    把他们变成用&连接的字符串，返回
    return ret.join('&');


}

function myAjaxGet(url, obj, limitTime, success, error) {
    let btn = document.querySelector("button");
    btn.onclick = function (val) {
        // 0.将obj变成字符串
        let str = obj2str(obj);
        // 1.创建异步对象
        var xmlhttp, timer;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2.设置请求方式和地址
        xmlhttp.open("GET", encodeURIComponent(url) + "?" + str, true);
        /*
                open的参数
                01 请求方式 GET / POST
                02 请求地址
                03 同步false/异步true   ajax固定异步，必须是true
            */

        // 3.发送请求
        xmlhttp.send();

        // 4.监听状态
        xmlhttp.onreadystatechange = function (val2) {
            // 5.进行处理
            // 5.1当消息传输完成时才进行处理
            if (xmlhttp.readyState === 4) {
                //传输完成，清除定时器
                clearInterval(timer);
                // 5.2判断消息是否正常传输，没有发生错误
                if (
                    (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
                    xmlhttp.status === 304
                ) {
                    // 5.3对成功状态进行处理
                    success(xmlhttp);

                } else {
                    error(xmlhttp);
                }
            }
        };
        // 若超时则停止请求
        timer = setInterval(() => {
            console.log('timer out!');
            xmlhttp.abort();//终止请求
            clearInterval(timer);
        }, limitTime);
    };

}

    <script src="./get_wrap3.js"></script>
    <script>
      myAjaxGet(
        "get2.php",
        {
          name: "Joe",
          age: "18",
          fk: 0,
          chinese: "你好",
        },
        3000,
        (xhr) => {
          alert(xhr.responseText);
        },
        (xhr) => {
          console.log("error!");
        }
      );
    </script>
  • 注意事项

url中只能是字母、数字、下划线、ASCII码，其他的都要转码

Ajax-POST方法

基本用法
  • 无表单数据
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
  • 有表单数据
1.在open和send之间加上setRequestHeader方法
2.将要传递的表单数据作为send的参数传递

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
封装POST，并实现同时具有两种模式的方法
修改：
1.方法名为myAjax，增加参数 method 接收传输方式
2.方法内新增if判断，是GET方法还是POST方法
3.GET方法沿用前面封装，POST方法按照上面有表单数据来封装

function obj2str(obj) {

    /*
        obj的格式为 key:val
        将它转成字符串 key1=val1&key2=val2 的形式
    */
    // 将用于兼容IE的时间随机数也放进来一起处理
    obj.t = new Date().getTime();


    let ret = [];
    //    形成[key1=val1,key2=val2]形式的数组
    for (key in obj) {
        ret.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
    //    把他们变成用&连接的字符串，返回
    return ret.join('&');
}

function myAjax(method, url, obj, limitTime, success, error) {
    let btn = document.querySelector("button");
    btn.onclick = function (val) {
        // 0.将obj变成字符串
        let str = obj2str(obj);
        // 1.创建异步对象
        var xmlhttp, timer;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if (method === "GET") {
            // 2.设置请求方式和地址
            xmlhttp.open("GET", encodeURIComponent(url) + "?" + str, true);
            /*
                    open的参数
                    01 请求方式 GET / POST
                    02 请求地址
                    03 同步false/异步true   ajax固定异步，必须是true
                */

            // 3.发送请求
            xmlhttp.send();

            // 4.监听状态
            xmlhttp.onreadystatechange = function (val2) {
                // 5.进行处理
                // 5.1当消息传输完成时才进行处理
                if (xmlhttp.readyState === 4) {
                    //传输完成，清除定时器
                    clearInterval(timer);
                    // 5.2判断消息是否正常传输，没有发生错误
                    if (
                        (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
                        xmlhttp.status === 304
                    ) {
                        // 5.3对成功状态进行处理
                        success(xmlhttp);

                    } else {
                        error(xmlhttp);
                    }
                }
            };
            // 若超时则停止请求
            timer = setInterval(() => {
                console.log('timer out!');
                xmlhttp.abort();//终止请求
                clearInterval(timer);
            }, limitTime);
        } else {
            // 2.设置请求方式和地址
            xmlhttp.open("POST", encodeURIComponent(url), true);
            /*
                    open的参数
                    01 请求方式 GET / POST
                    02 请求地址
                    03 同步false/异步true   ajax固定异步，必须是true
            */

            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


            // 3.发送请求
            xmlhttp.send(str);

            // 4.监听状态
            xmlhttp.onreadystatechange = function (val2) {
                // 5.进行处理
                // 5.1当消息传输完成时才进行处理
                if (xmlhttp.readyState === 4) {
                    //传输完成，清除定时器
                    clearInterval(timer);
                    // 5.2判断消息是否正常传输，没有发生错误
                    if (
                        (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
                        xmlhttp.status === 304
                    ) {
                        // 5.3对成功状态进行处理
                        success(xmlhttp);

                    } else {
                        error(xmlhttp);
                    }
                }
            };
            // 若超时则停止请求
            timer = setInterval(() => {
                console.log('timer out!');
                xmlhttp.abort();//终止请求
                clearInterval(timer);
            }, limitTime);
        };
    }

}


    <script src="./get_post.js"></script>
    <script>
      myAjax(
        "POST",
        "get2.php",
        {
          name: "Joe",
          age: "18",
          fk: 0,
          chinese: "你好",
        },
        3000,
        (xhr) => {
          alert(xhr.responseText);
        },
        (xhr) => {
          console.log("error!");
        }
      );
    </script>

仿照jQuery的Ajax 完善封装

method的大小写问题

只能传大写的POST和GET才能正常使用

解决方法

在if判断的时候全部先转为小写再判断
if(method.toLowerCase()==='get'){
	..
}else{
	..
}
参数顺序问题

必须按照顺序接收参数，否则无法正常使用

解决方法

将参数改为一个对象，这样使用其中各属性都是 对象.属性 的方式，不需要关注其顺序（具体实现略）

声明
参数 function myAjax(option){..}
使用 option.url
	option.method
		...


调用
myAjax({
	url:'xx',
	method:'xx',
	...
});

Ajax数据传输

  • 问题提出

服务器如果返回的是简单的字符串数据，会难以区分和使用（比如哪里是用户名哪里是密码）。

简单使用如 “|” 之类的字符进行分割容易引起错误（比如原本数据里就带|符号）

所以需要一种格式化的数据传送方式

Ajax-xml解析

xml格式
  • 头部
<?xml version="1.0" encoding="UTF-8" ?>
  • 标签
所有数据都要放到一个 【根标签】 内，且所有标签的名字都是【自定义】的

<person>
	<name>alex</name>
    <age>18</age>
</person>
服务端php返回xml格式
头部必须加
header("content type:text/xml: charset-utf 8")
返回内容
echo file_get_contents("user.xml");
前端解析xml格式数据

xml格式和html格式的标签获取方式一致

res=xhr.responseXML //获取xml数据
res.querySelector('name')  ==> <name>alex</name>
res.querySelector('name').innerHTML ==> alex
前端解析JSON数据
接收：
str=xhr.responseText

处理：
str=JSON.stringify(obj) 对象转成JSON字符串形式

obj=JSON.parse(str)  字符串转成JSON对象形式

使用：
obj.name
obj.age

IE兼容性：
引入JSON2.js文件

  • JSON比xml更有优势，体积小、简洁、操作简单

  • JSON处理注意事项

后端可能返回的是非标准的JSON字符串
比如 对象中key没有用双引号
这样的字符串无法使用JSON.parse解析成对象

解决：使用eval来解析
var obj=eval("("+str+")");

用法：eval解析时要将str用()括起来
	既可以解析JSON字符串，也可以解析非标准JSON字符串
kunnan0
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
2022年前端面试题整理，持续更新中
jiey0407的博客
08-01 2662
rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性em是一个相对单位，是相对于父元素字体大小有继承性px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。因为Vue的组件可能会在很多地方使用，会产生多个实例，如果返回的是对象的，这些组件之间的数据是同一份（引用关系），那么修改其中一个组件的数据，另外一个组件的数据都会被修改到。...
前端知识复习
m0_57057282的博客
02-20 821
2.如果没有，才会沿着原型链，层层向上搜索，直到找到名字的属性 3.如果找到最后原型链的末尾，即最后的原型为null，那就是没有找到该属性。我们使用这种方式实现网络请求时，如果请求内部又包含请求，以此循环，就会出现回调地狱，这也是一个诟病，后来才催生了更加优雅的请求方式。bind 也能改变对象的执行上下文，它与 call 和 apply 不同的是，返回值是一个函数，并且需要稍后再调用一下，才会执行。是函数对象独有的属性，它是在函数被创建时自动添加的，指向一个对象，该对象就是函数的原型。
前端知识汇总复习
qq_44776747的博客
02-25 197
这是我的一份对最近前端知识学习的复习整理 HTML：一种超文本标记语言，能表示文字，视频，音乐等复杂元素 标签：他由标签名，属性（名值对），内容三部分组成，属性令这些标签有了某些特殊的能力 table标签：包括thead，与tbody两部分 thead 包含tr th tbody 包含tr td 建议表明thead与tbody 不表明的话浏览器会自动表明这两项 form表单提交与ajax 表单标签...
web前端基础内容复习一
weixin_42526180的博客
02-24 90
HTML 什么是HTML 理解HTML的本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。 什么是标签 理解什么是标签，标签的组成：标签名、属性（名值称)、内容 属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力` 例如：<a href="www.baidu.com">百度</a> 重要标签说明 表格标签 table thead tr ...
Web前端复习笔记
qq_41549174的博客
02-25 333
1、 HTML HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。 2、标签 HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。，标签对的组成：标签名、属性（名值对）、内容。 属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力 例如：百度 2.1 table 表格标签 table thead t...
web前端进阶前复习（作业）
qwemnb1234567890的博客
02-25 133
HTML 什么是 HTML 理解HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。 什么是标签 理解什么是标签，标签对的组成：标签名、属性（名值对）、内容 属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力 例如：<a href="www.baidu.com">百度</a> 重要标签说明 表格标...
WEB前端.jQuery
刘云儿的博客
07-23 628
README： 定位：WEB前端 目的：适合有jQuery知识基础萌新阅读。本文总结jQuery相关语法，常用操作，关键字等，用于快速的（每个支线仅有一个强综合性的案例）阅览复习知识点。 关键字：web前端， JavaScript（js），jQuery（jq），总结复习 说明： 本文内容参考W3school并加以整理，更简洁，更具代表性的案例，更贴心(xiong)的注释。 如果有任何问题包...
Day03/Js基础复习-02
qq_50649586的博客
08-14 112
js基础02
Web前端复习（HTML、CSS、JavaScript）
Cherry19的博客
02-24 380
一，HTML 1，什么是HTML HTML本质是超文本标记语言，能表现如文字、音频、程序等复杂元素。 2，什么是标签 标签对的组成：标签名、属性（名值对）、内容。 属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力。 3，重要标签说明 （1）表格标签 table thead tr th tbody tr td <table border="1"> &l...
前端AJAX请求axios插件
05-06
前端AJAX请求axios插件
前端网络——Ajax使用
01-08
AJAX是什么？ AJAX 可以用于创建快速动态的网页。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ajax(Asynchronous javaScript and XML 异步的javascript和xml)可实现异步，局部的获取数据...
（免费）菜狗学前端之原生Ajax笔记
04-14
关于原生Ajax知识：包含原生ajax的get/post传参方式、返回数据等
web前端开发AJAX学习笔记
06-24
web前端开发AJAX学习笔记
jquery ajax 分页 前端
09-13
纯前台控制的分页 使用的是jquery的插件 自定义页码显示数量和显示数据量 简单好用 不=关联后台 直接在前台jqeury操作分页内容 方便快捷
Django使用AJAX向服务器发起请求
最新发布
wanghuizheng的专栏
05-20 182
AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术，它允许在不重新加载整个页面的情况下向服务器发送和接收数据。通过 AJAX，网页可以异步地向服务器发起请求并在后台进行处理，然后在不刷新页面的情况下更新页面的部分内容。：AJAX 的核心是 JavaScript，它负责在客户端（浏览器）发起请求、处理响应，并更新页面的内容。：XHR 是在 JavaScript 中用于向服务器发起 HTTP 请求和接收响应的对象。
Ajax、Axios和Fetch的用法和区别，撤回请求，防抖节流，针对处理高频率请求的场景如何处理？
为了WLB努力
05-17 944
在现代JavaScript开发中，用于进行HTTP请求的三种主要方式是Ajax、Axios和Fetch。这三种方式各有优缺点，并且适用于不同的场景。在合适的业务场景下使用，以下是它们的区别和使用举例。并且实现撤回或取消请求，减少不必要的重复请求，在同时有高频率大量请求时，放入请求队列，以及前端的防抖或者节流，提高前端性能优化。Ajax（Asynchronous JavaScript and XML）是一种使用JavaScript和XML进行异步网页更新的技术。尽管其名称中包含XML，但它可以处理多种数据格式
AJAX(JQuery版本)
zheshiyangyang的博客
05-20 542
方法是简单且强大的AJAX方法load()方法从服务器加载数据，并把返回的数据放入被选元素中语法参数说明URL：文件所在的路径data：与请求一同发送的查询字符串键/值对集合callback：load()方法完成后执行的函数名称$.get()方法通过远程HTTP GET请求载入信息这是一个简单的GET请求功能，用来取代复杂的$.ajax语法,dataType)参数说明参数描述url必需。规定将请求发送的哪个 URL。data可选。规定连同请求发送到服务器的数据。可选。
JavaScript精粹（八）- AJAX
Daniel
05-17 634
在前端开发中，AJAX（Asynchronous JavaScript and XML）是一种实现异步数据交换的技术。通过 AJAX，可以在不刷新整个页面的情况下向后端服务器发送请求，并获取、更新页面上的部分内容，提高了用户体验和页面性能。
web前端开发技术总复习
06-11
好的，针对你的问题，我简要介绍下web前端开发技术的总复习内容： 1. HTML：超文本标记语言，是Web页面的基础，可以用来定义页面的结构和内容。 2. CSS：层叠样式表，可以用来定义页面的样式和布局。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值