• 原生AJAX

     👨‍💻个人主页：@微微的猪食小窝
    欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
    本文由 微微的猪食小窝 原创

     1、AJAX 简介

    AJAX 全称为Asynchronous Javascript And XML,就是异步的JS 和 XML.
    通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新的获取数据.
    AJAX不是新的编程语言,而是一种将现有标准组合在一起使用的新方式.
     

     如何创建一个原生的ajax 

    上代码！！！ 

    1.  
    2. //第一步  先城建一个ajax的核心 XMLHttpRequest
    3. let xhr = new XMLHttpRequerst();
    4. //第二步  使用open 创建请求 第一个参数是请求方式 第二个是请求的地址  第三个是同步或者异步
    5. xhr.open('GET',"https://www.baidu.com",false)
    6. //如果是post请求  必须要写请求头
    7. xhr.setRequestHeader('') //设置请求头
    8. //第三步  为xhr.onreadystatechange  设置监听事件
    9. xhr.onreadystatechange = function(){
    10.     if(xhr.readyState == 4) {
    11.     if(xhr.status == 200){
    12.     alert(xhr.responseTwxt)
    13. //readyState  0 请求未初始化  刚刚实例化XMLHttpRequest
    14. //readyState  1 客户端与服务器建立链接  调用open方法
    15. //readyState  2 请求已经被接收
    16. //readyState  3 请求正在处理中
    17. //readyState  4 请求成功
    18.             }
    19.        }
    20. }
    21. // 第四步 发送请求数据  调用send 发送请求 如果不需要参数就写一个null
    22. xhr.send(null)
    23.

    携带参数的Ajax请求 

    1、get请求

    1. const xhr = new XMLHttpRequest()
    2. // 参数拼接在url后面
    3. xhr.open("GET","http://www.baidu.com?a=1&b=2")
    4. xhr.send()

    2、post请求

    1. const xhr = new XMLHttpRequest()
    2. xhr.open("GET","http://www.baidu.com")
    3. // 参数作为send函数的实参传递
    4. xhr.send("a=1&b=2")

     Ajax处理超时和网络异常

    处理超时

    1. const xhr = new XMLHttpRequest()
    2. // 设置超时时间
    3. xhr.timeout = 2000
    4. // 设置超时后的回调
    5. xhr.ontimeout = function(){
    6. 	alert('请求超时！')
    7. }
    8. xhr.open("GET","http://www.baidu.com")
    9. xhr.send()

     处理网络异常

    1. const xhr = new XMLHttpRequest()
    2. // 设置出现网络异常后的回调函数
    3. xhr.onerror = function(){
    4. 	alret("网络异常！")
    5. }
    6. xhr.open("GET","http://www.baidu.com")
    7. xhr.send()

     取消请求

    取消请求：abort()函数

    1. <body>
    2.     <button>发送请求</button>
    3.     <button>取消请求</button>
    4. </body>
    5. <script>
    6. 	// 获取按钮
    7.     const btns = document.getElementsByTagName('button')
    8.     // 创建xhr对象
    9.     let xhr = new XMLHttpRequest()
    10.     // 绑定点击函数
    11.     btns[0].onclick = function(){
    12.         xhr.open('GET','http://127.0.0.1:8000/server')
    13.         xhr.send("111")
    14.     }
    15.     btns[1].onclick = function(){
    16.     	// 取消请求
    17.         xhr.abort()
    18.     }
    19. </script>

    2、Ajax的特点

    优点

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

    缺点

    • 没有浏览历史，不能回退
    • 存在跨域问题（同源）
    • SEO不友好，网页中的内容爬虫爬不到

    3、http常见的状态码  

    (代码上的200 就是状态码 表示成功)

    • 100—199  请求正在处理中
    • 200—299  一般都是表示成功 
    • 300—399  表示重定向
    • 400—499  资源找不到 客户端报错
    • 500—599  服务器内部报错

    4、跨域问题


    为什么会出现跨域
    出现跨域问题是由于同源策略的限制。

    同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

    同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。
     

    什么是跨域

    当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

    5、解决跨域

    jsonp

    script标签天生具有跨域能力，通过向页面中添加一个新的script标签来向服务器发送请求，服务器返回一个函数调用，要返回的数据作为这个函数的实参。

     页面：

    1. <body>
    2.     <button>点击获取数据</button>
    3.     <p></p>
    4.     <script>
    5.         // 获取button和p
    6.         const btn = document.getElementsByTagName('button')[0]
    7.         const p = document.getElementsByTagName('p')[0]
    8.  
    9.         // 声明handle函数
    10.         function handle(data){
    11.             p.innerHTML = data.msg
    12.         }
    13.  
    14.         // 绑定单击事件
    15.         btn.onclick = function(){
    16.             // 创建一个新的script标签
    17.             const script = document.createElement('script')
    18.             // 设置src属性，即要请求的服务器地址
    19.             script.src = 'http://127.0.0.1:9000/test'
    20.             // 将新的script标签放入页面中，即发送请求
    21.             document.body.appendChild(script)
    22.         }
    23.     </script>
    24. </body>

     服务器：

    1. // 引入express
    2. const express = require('express')
    3.  
    4. // 创建应用对象
    5. const app = express()
    6.  
    7. // 创建路由规则
    8. app.all('/test',(request,response)=>{
    9.     const data = {msg:'hello!'}
    10.     let str = JSON.stringify(data)
    11.     // 设置响应体，返回一个函数调用，将要返回的数据作为实参
    12.     response.send(`handle(${str})`)
    13. })
    14.  
    15. // 监听端口，启动服务
    16. app.listen(9000,()=>{
    17.     console.log('服务已启动，正在监听9000...')
    18. })

     

    6、CORS


    跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。

    跨源资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

    设置CORS

    1. app.all('/cors',(request,response)=>{
    2.     // 设置响应头
    3.     response.setHeader('Access-Control-Allow-Origin','*')
    4.     response.send('hello,CORS')
    5. })

     🌸欢迎关注我的博客：来和我一起成长吧
    🥇往期精彩好文：

    📢【CEAC 之《.NET程序设计工程师》】

    📢【CEAC 之《企业信息化管理》】
    📢【ASP.NET(C#) 面试总结面试题大全】

    📢【Vue·高频前端面试题汇总】

    你们的点赞👍 收藏⭐ 留言📝 关注✅
    是我持续创作，输出优质内容的最大动力！
    谢谢

  • 相关阅读:
    人工原理复习题
    微服务架构的可观察性设计模式
    AI绘画Stable Diffusion XL 可商用模型！写实艺术时尚摄影级真实感大模型推荐（附模型下载）
    Java项目如何实现限流？
    Vue项目实战之人力资源平台系统（六）角色管理模块
    手把手教你在Ubuntu22.04 上安装 Vivado、HLS、Vitis 2022.2版本
    【Leetcode】964. Least Operators to Express Number
    基于 Docker 快速使用远程（云）数据库
    【滤波跟踪】基于变分贝叶斯卡尔曼滤波器实现目标跟踪附matlab代码
    ASP.NET Core 分层服务注入思想实现
  • 原文地址：https://blog.csdn.net/m0_56366948/article/details/127955630