Ajax基础知识

最新推荐文章于 2025-02-26 13:46:49 发布
最新推荐文章于 2025-02-26 13:46:49 发布
阅读量242 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45772348/article/details/113090938
版权

AJAX

1.AJAX的特点

1.优点

  • 可以无需刷新页面而与服务器端进行通信
  • 允许你根据用户事件来刷新部分页面内容

2.缺点

  • 没有浏览历史，不能回退
  • 存在跨域问题
  • SEO（搜索引擎优化）不友好 --> 爬虫不可爬取Ajax请求得来的数据

2.HTTP协议

1.http

超文本传输协议，规定了浏览器和万维网服务器之间相互通信的规则

2.请求报文

  • 请求行：

    • 请求类型：post、delete、put、get四种方式分别对应对数据的增删改查
    • URL路径
    • HTTP协议版本

  • 请求头：

    • Host：bilibili.com
    • Cookie：name=hgg
    • Content-type：application/x-www-form-urlencoded
    • User-Agent：Chrome 83

  • 请求空行：必须要有

  • 请求体

    • 如果是get请求，请求体为空

    • 如果是post请求，请求体可以不为空 e.g–>username=admin&password=admin

3.响应报文

  • 响应行：
    • HTTP协议版本
    • 响应状态码：200、404、403、500、401等
    • 响应状态字符串：与状态码对应
  • 响应头：
    • Content-type：text/html;charset=utf-8
    • Content-length：2048
    • Content-encoding：gzip
  • 响应空行：必须要有
  • 响应体：响应的数据内容

3.原生Ajax

1.ajax中的get请求

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>click</button>
<div class="content"></div>
</body>
<script>
    document.querySelector('button').onclick=function(){
        let xhr=new XMLHttpRequest();
        xhr.open('GET','http://localhost:3000/ajax');
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status>=200&&xhr.status<300){
                    console.log(xhr)
                    document.querySelector('.content').innerHTML=xhr.responseText;
                }
            }
        }
    }
</script>
</html>

服务器代码

let express=require('express');
let app=express();
app.get('/ajax',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send('232323')
})
app.listen(3000)

请求结果

在这里插入图片描述

2.ajax中的get请求携带参数

后缀在URL之后，用 ? 分割路径与参数键值对，e.g:

     xhr.open('GET','http://localhost:3000/ajax?name=2233&pass=cdd');

3.ajax中的post请求

写法与get方式大致相同，变化的地方在于

      //前台代码变化
      xhr.open('POST','http://localhost:3000/ajax?name=2233&pass=cdd');
      //后台代码变化
      app.post('/ajax',(req,res)=>{
   			 res.setHeader('Access-Control-Allow-Origin','*')
   			 res.send('232323')
  		})

传递请求体参数设置在xhr.send中，e.g：

xhr.send('user=333333&agent=chrome');

请求结果

在这里插入图片描述

4.设置请求头

xhr中的setRequestHeader方法，接收两个参数，头的名字和头的值，同样可以在network中查看

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

请求结果

在这里插入图片描述

5.服务器响应json数据

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>click</button>
<div class="content"></div>
</body>
<script>
    document.querySelector('button').onclick=function(){
       let xhr=new XMLHttpRequest();
       xhr.open('GET','http://localhost:3000/json');
       xhr.responseType='json';//设置响应体类型，将自动进行数据格式的转换
       xhr.send();
       xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status>=200&&xhr.status<300){
                    console.log(xhr)
                    for (const xhrKey in xhr.response) {
                        let div=document.createElement('div');
                        div.innerHTML=`${xhrKey}------${xhr.response[xhrKey]}`;
                        document.body.appendChild(div);
                    }
                }
            }
        }
    }
</script>
</html>

服务器代码

let express=require('express');
let app=express();
app.get('/json',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    let user={
        name:'cdd',
        age:24,
        hobbies:'hiahiahihaiahiahia'
    }
    res.json(user);//向客户端响应json数据
})
app.listen(3000)

6.IE浏览器缓存问题

  • IE缓存开启之后，会对ajax的数据进行缓存，有时会导致页面不能及时更新

  • 解决方法：在URL路径最后加上时间戳，e.g

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>click</button>
<div class="content"></div>
</body>
<script>
    document.querySelector('button').onclick=function(){
        let xhr=new XMLHttpRequest();
        //设置时间戳
        xhr.open('GET','http://localhost:3000/json?t='+Date.now());
        xhr.responseType='json';//设置响应体类型，将自动进行数据格式的转换
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status>=200&&xhr.status<300){
                    console.log(xhr)
                    for (const xhrKey in xhr.response) {
                        let div=document.createElement('div');
                        div.innerHTML=`${xhrKey}------${xhr.response[xhrKey]}`;
                        document.body.appendChild(div);
                    }
                }
            }
        }
    }
</script>
</html>

7.Ajax请求超时与网络异常处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>click</button>
<div class="content"></div>
</body>
<script>
    document.querySelector('button').onclick=function(){
        let xhr=new XMLHttpRequest();
        xhr.timeout=2000;//超时设置，当在设置的时间段内没有收到来自服务器的响应报文，就取消发送此次ajax请求
        xhr.ontimeout=function(){//监听超时的函数
            alert('请求超时')
        }
        xhr.onerror=function(){//监听网络错误的函数，想要看见效果可以在Chrome调试器中的network把网络状态offline后，再发送请求
            alert('网络错误')
        }
        xhr.open('POST','http://localhost:3000/ajax?name=2233&pass=cdd');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send('user=333333&agent=chrome');
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status>=200&&xhr.status<300){
                    console.log(xhr)
                    document.querySelector('.content').innerHTML=xhr.responseText;
                }
            }
        }
    }
</script>
</html>

超时的请求结果

在这里插入图片描述

网络错误的请求结果

在这里插入图片描述

8.Ajax取消请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="btn1">start</button>
<button class="btn2">cancel</button>
</body>
<script>
    let xhr=new XMLHttpRequest();
    document.querySelector('.btn1').onclick=function(){
        xhr.open('GET','http://localhost:3000/ajax');
        xhr.send();
        xhr.onreadystatechange=function(){
        }
    }
    document.querySelector('.btn2').onclick=function(){
        xhr.abort();//核心代码，调用xhr的abort方法取消发送ajax请求
    }
</script>
</html>

9.多次发送ajax请求的处理方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>click</button>
</body>
<script>
    let isSending=false;//定义全局变量标志ajax请求是否正在发送
    let xhr;
    document.querySelector('button').addEventListener('click',function(){
        if(isSending)//第一次点击按钮不执行，从第二次开始，会执行该语句，取消上一次ajax请求的发送，避免给服务器造成过大压力
            xhr.abort();
        xhr=new XMLHttpRequest();
        xhr.open('GET','http://localhost:3000/ajax');
        xhr.send();
        isSending=true;//标志正在发送ajax请求
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                isSending=false;//ajax请求发送结束
            }
        }
    })
</script>
</html>

4.jQuery发送ajax请求

. g e t 或 者 .get或者 .get或者.post方法：

  • 第一个参数为URL地址，
  • 第二个参数是一个对象，用于传递数据
  • 第三个参数为回调函数，对响应数据做处理
  • 第四个参数为响应体类型，非必填，填入json后可以将服务器返回的json字符串转换为json对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>send get</button>
    <button>send post</button>
</body>
<script src="./jquery.js"></script>
<script>
    $('button').eq(0).click(function(){
      $.get('http://localhost:3000/json',{a:100,b:999},function(data){
          //第二个参数中的数据将以查询字符串的方式发送给服务器
          console.log(data)
      },'json')
    })
    $('button').eq(1).click(function(){
        $.post('http://localhost:3000/json',{a:100,b:999},function(data){
           //第二个参数中的数据将以formData的格式发送给服务器
            console.log(data)
        })
    })
</script>
</html>

请求结果

在这里插入图片描述
在这里插入图片描述

jQuery通用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>send</button>
    <button>send post</button>
</body>
<script src="./jquery.js"></script>
<script>
    $('button').eq(0).click(function (){
        $.ajax({
            url:'http://localhost:3000/json',//请求路径
            type:'POST',//请求方式
            data:{//请求报文中所携带的数据
              name:'cdd',
              pass:'232sdffgs'
            },
            dataType:'json',//服务器响应的数据格式
            success:function(data){//发送请求成功的回调函数
                console.log(data)
            },
            timeout:2000,//设置超时时间
            error:function(){//发送请求错误的回调函数
                console.error('出错啦')
            },
            headers:{//设置请求头
                Authorization:'sswer2q423rfsdfsasf'
            }
        })
    })

</script>
</html>

在这里插入图片描述

5.使用axios发送请求

  • axios.get
    • 第一个参数是URL路径
    • 第二个参数是一个对象，其中
      • params对象，其中存放URL参数
      • headers对象，其中设置请求头信息
    • 最后基于promise在then中接收服务器的响应数据
  • axios.post
    • 第一个参数是URL路径
    • 第二个参数是一个对象，其中存放请求体数据
    • 第三个参数是一个对象，其中
      • params对象，其中存放URL参数
      • headers对象，其中设置请求头信息
    • 最后基于promise在then中接收服务器的响应数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<button class="btn1">send get</button>
<button class="btn2">send post</button>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document.querySelector('.btn1').addEventListener('click',function(){
        axios.get('http://localhost:3000/json',{
            params:{
                userId:2323,
                courseId:2323
            },headers:{
                Authorization:'43434dfdfdf'
            }
        }).then((res)=>{
            console.log(res)
        })

    })
    document.querySelector('.btn2').addEventListener('click',function(){
        axios.post('http://localhost:3000/json',{
            name:'admin',
            pass:'admin'
        },{
            params:{
                userId:2323,
                courseId:2323
            },headers:{
                Authorization:'43434dfdfdf',
                'Content-Type':'application/x-www-form-urlencoded'
            }
        }).then((res)=>{
            console.log(res)
        })

    })
</script>
</html>

axios通用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>send</button>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document.querySelector('button').onclick=function(){
        axios({
            url:'http://localhost:3000/json',//URL路径
            method:'POST',//请求方式
            params:{//URL参数
                userId:22,
                courseId:33
            },
            headers:{//设置请求头
                Authorization:'232dsdsdssd',
                'Content-Type':'application/x-www-form-urlencoded'
            },
            data:{//请求体数据
                name:'alice',
                pass:'cddalice'
            }
        }).then((res)=>{//发送成功后的回调函数
            console.log(res)
        })

    }
</script>
</html>

6.fetch发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>send</button>
</body>
<script>
    document.querySelector('button').onclick=function(){
        fetch('http://localhost:3000/json',{
            method:'POST',
            headers:{
                Authorization:'werw232323',
                'Content-Type':'application/x-www-form-urlencoded'
            },
            body:'name=admin&pass=admin'//请求体数据
        }).then(res=>{//此时res是一个promise对象，需要转换一下才能取值
            return res.json()
        }).then((res)=>{
            console.log(res)
        })
    }
</script>
</html>

7.跨域

1.Ajax同源策略

  • 同源：协议、域名和端口号必须完全相同
  • 同源策略是浏览器而定一种安全策略，违反同源策略就是跨域

2.如何解决跨域

  • jsonp解决跨域原理

    • ajax响应的返回结果是函数调用，而函数的实参就是我们想给客户端返回的结果数值，而这个函数必须先在客户端定义好

    • 原生jsonp实践

      • <!--前端代码-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>click</button>
<div></div>
</body>
<script>
   let btn= document.querySelector('button')
   let div=document.querySelector('div')
    function handle(data){
        btn.style.border='red';
        div.innerHTML=data.name
    }
    btn.onclick=function(){
        let script=document.createElement('script')//设置script标签
        script.src='http://localhost:3000/jsonp'//设置src属性
        document.body.appendChild(script);//将script标签嵌入文档
    }
</script>
</html>

      • //服务器代码
let express=require('express');
let app=express();
app.all('/jsonp',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')
    let user={
        name:'cdd',
        age:24,
        hobbies:'hiahiahihaiahiahia'
    }

    res.end(`handle(${JSON.stringify(user)})`);
})
app.listen(3000)

    • jQuery发送jsonp请求

      • URL地址之后必须加上一个?callback=?（固定格式），之后jQuery会自动在callback之后加上一个字符串，将作为函数名在后端使用

      • <!--前端代码-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>send</button>
<div class="inner"></div>
</body>
<script src="./jquery.js"></script>
<script>
    $('button').click(function(){
        $.getJSON('http://localhost:3000/jsonp2?callback=?',function(res){
            $('.inner').html(
                `姓名----${res.name}<br>
                 年龄----${res.age}`
            )
        })
    })

</script>
</html>

      • 后端接收callback参数，并发送回前端页面，jQuery会处理并返回res值

      • //服务器代码
let express=require('express');
let app=express();

app.all('/jsonp2',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')
    let user={
        name:'cdd',
        age:24,
        hobbies:'hiahiahihaiahiahia'
    }
    res.end(`${req.query.callback}(${JSON.stringify(user)})`);
})
app.listen(3000)
ajax基础知识
weixin_43713835的博客
11-06 273
1.基本语法 <script type="text/javascript"> // 1.创建ajax对象 var xhr = new XMLHttpRequest(); // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求 // 1)请求方式 2)请求地址 xhr.open('get', 'http://localhost:3000/first'); ...
通用的Ajax
11-22
通用的Ajax 用JS手写 也可让初学者更加了解AJAX
ajax 知识
m0_37899233的博客
10-18 222
ajax 使用到的技术： ajax （Asynchronous JavaScript And XML） 异步 JavaScript 和 XML ， 一种创建交互式网页应用的网页开发技术。 基于Web标准的XHTML+CSS的表示； 使用DOM（Document Object Model）进行动态显示和交互； 使用XML+XSLT进行数据交换； 使用XMLHttpRequest对服务器
(八)ajax封装和跨域
最新发布
m0_74350516的博客
02-26 1098
本文全面介绍 ajax 相关知识，涵盖原生 ajax 概念、特点及 HTTP 协议，阐述 node.js 和 express 框架搭建服务端。详细讲解原生 ajax、JQuery 及 axios 发送请求的实现方式，包括 get、post 等请求类型及处理。还深入探讨跨域问题，介绍同源策略，以及 JSONP 和 CORS 两种跨域解决方案。
AJAX知识
xinxiangyang的博客
07-14 208
1. ajax是什么? * asynchronous javascript and xml：异步的js和xml * 它能使用js访问服务器，而且是异步访问！ * 服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！ > text：纯文本 > xml：大家都熟悉！！！ > json：它
Ajax 知识点
qq_39451059的博客
12-18 238
1.Ajax概述 1.优点： 无页面刷新，用户体验好 2.请求与响应 请求：访问服务器端的任何一个程序都可以成为请求 响应：服务器接收请求，并根据请求的内容处理，将处理结果返回给客户端成为响应。 ajax模式在注册用户案例中也有2次请求和响应。 1.请求1和响应1.与传统模式一致 2.在用户名文本框上绑定失焦事件，一但失焦就会触发一次请求，将用户名发送后台程序，响应2：与传统模式一...
Ajax知识点
woai_mihoutao的博客
04-28 621
一、Ajax基础 1. 传统网站中存在的问题 网速慢的情况下,页面加载时间长,用户只能等待 表单提交后,如果一项内容不合格,需要重新填写所有表单内容 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间 2. Ajax概述 Ajax:标准读音['ei,dʒaeks]，中文音译:阿贾克斯 它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应田的体验。 3. Ajax的应用场景 页面上拉加载更多数据 列表数据无刷新分页（例如当点击某个网页的左边侧边栏时，只有右边的内容发生改
Ajax基础知识详解
08-31
本文主要介绍了Ajax基础知识。具有很好的参考价值，下面跟着小编一起来看下吧
ajax基础知识总结
08-08
学习ajax基础知识，让自己的前端技术更上一层，学会与后台交互
AJAX基础知识
11-20
### AJAX基础知识详解 #### 一、什么是AJAX？ AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它并非全新的编程语言或技术，而是对现有技术的一种创新...
HTTP报文及ajax基础知识
12-11
　起始行:请求起始行 响应起始行 　首部:请求首部 响应首部 通用首部(请求和响应都有的) 自定义首部 　主体:请求主体 响应主体 客户端传递给服务器端数据: 　请求URL后面问号传参的...Ajax : async javascript and xm
自己写的一套通用Ajax框架
weixin_33726313的博客
11-27 170
最近由于项目需要，专心研究了一下Ajax的相关程序设计，本来一开始想用Prototype或者jQuery等框架，后来发现其实用不到这些框架里面的那么多内容，强行使用的话只能拖累我网站的访问者，降低用户体验，因此决定自己写一套适合自己需求的Ajax代码库。 在这套Ajax代码库中，实现了如下的功能： 1、Ajax远程调用数据 2、通过Ajax异步提交Form表单...
关于ajax的知识点
小婷子最美的博客
01-18 546
关于ajax的知识点一、Ajax发展历史 1、历史起源1998年 微软公司 IE5 XMLHTTP（技术）2005年 谷歌 Gmail（邮箱）、谷歌地图 XMLHttpRequest （风靡一时）2、什么是Ajax1) Asynchronous ：异步2) JavaScript ：JS3) And ：和4) XML ：XML 所谓的Ajax就是基于Javascript+XML的异步请求 3、Aja
HTTP 消息结构
热门推荐
05-03 1万+
HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。一个HTTP"客户端"是一个应用程序（Web浏览器或其他任何客户端），通过连接到服务器达到向服务器发送一个或多个HTTP的请求的目的。一个HTTP"服务器"同样也是一个应用程序（通常是一个Web服务，如Apache Web服务器或IIS服务器等），通过接收客户端的请求并向客户端发送HTTP响应数据。
Ajax知识整理
攀登Fox的博客
09-26 220
目录一、Aajax基础1、概念2、使用2.1、XMLHttpRequest 对象2.2、使用步骤二、JSON介绍1、简介2、特征2.1、语法规则2.2、6种数据类型3、常见json解析器4、Jackson使用介绍4.1、在响应中通过 JSON 格式传递数据4.1.1、整体步骤4.1.2、示例4.2、在请求中通过 JSON 格式传递数据4.1.1、整体步骤4.1.2、示例4.3、工具类4.4、常见注解5、Jquery中Ajax5.1、$.ajax()5.1.1、示例5.1.2、提交数据格式说明5.1.2、响应
ajax知识整理
weixin_43992935的博客
04-22 519
一.认识Aajx 重要程度：***** 1.什么是Ajax 怎么读? 中文化：阿贾克斯 Ajax：Asynchronous javascript and xml，异步的js和xml。 是指一种创建交互式网页应用的网页开发技术。 Ajax，不是一个语言。是一系列技术的综合应用，（老技术，新应用）。 包括如下技术：  Html  Css  JavaScript  XMLHttpRequest对...
JavaScript语法与Ajax基础知识
JavaScript语法——数据类型-Ajax基础 ...JavaScript语法——数据类型和Ajax基础知识是非常重要的，它们是学习Ajax应用的基础。只有掌握了JavaScript基础知识和Ajax基础知识，才能更好地学习和应用Ajax技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值