【从0到1】重识前端之AJAX

简介: 简介 AJAX asynchronized javascript and XML(异步的javascript XML数据) AJAX = 异步 JavaScript 和 XML。由来: 在ajax发明之初,主要用于请求XML数据,但是随着技术发展,ajax请求传输的数据格式逐渐被JSON格式替代,但是名字还是ajax区别: ajax是一种前端开发的请求方法,ajax请求和普通的页面请求最大的区别是:  1,发起方式不同,普通的页面请求通过点击a标签,表单提交,或直接在地址栏输入url地址回车发起,而ajax请求通过页面中的js代码发起。

简介

AJAX

asynchronized javascript and XML(异步的javascript XML数据)

AJAX = 异步 JavaScript 和 XML。

由来:

在ajax发明之初,主要用于请求XML数据,但是随着技术发展,ajax请求传输的数据格式逐渐被JSON格式替代,但是名字还是ajax

区别:

ajax是一种前端开发的请求方法,ajax请求和普通的页面请求最大的区别是:
 1,发起方式不同,普通的页面请求通过点击a标签,表单提交,或直接在地址栏输入url地址回车发起,而ajax请求通过页面中的js代码发起。
 2,普通的页面请求,浏览器在收到响应时,会直接在页面中打开响应数据,而ajax请求浏览器在收到响应后,会将收到的数据交给本页面的js代码进行处理,而页面不发生跳转。(所以说ajax请求是非跳转式请求)


//---------------点击页面按钮btn1发送请求------------------------------
const btn1 = document.getElementById("btn1");
    
    btn1.onclick = e=>{
        // XMLHttpRequest类,用于发起ajax请求。
        // 1,创建xhr对象。
        const xhr = new XMLHttpRequest();
        
        // 2, xhr对象的.onreadystatechange事件,当请求状态发生变化时触发。
        // xhr对象刚创建成功时处于初始状态。设置了请求地址、请求方式和请求数据时,变为就绪状态。请求发出之后,变为等待状态,收到响应之后,变为完成状态。
        xhr.onreadystatechange = e=>{
            // xhr对象的readyState属性表示当前请求的状态,为4时是完成状态。
            if(e.target.readyState==4){
                // xhr的responseText属性表示请求到的数据。
                const data = JSON.parse(xhr.responseText);
                console.log(data);

            }
        }
        
        //3,设置请求方式和请求地址
        xhr.open("POST","/test");

        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        
        //4,设置请求数据(请求体的数据)并发送。
        xhr.send("name=sunhuayu&age=23");
    }



第一种方式

 // jquery的ajax请求支持promise
        $.post("/test",{name:"sun",age:11})
        .then(res=>{
            console.log(res);
        })
        .catch(err=>{
            console.log(err);
        });
        
    

第二种方式

 // $.get用于发起一个请求方式为get的ajax请求。参数和POST请求一样。
        $.get("/get-test")
        .then(res=>{
            console.log(res);
        });
        

第三种方式

// $.ajax,用于发起一个可以高度自定义的ajax请求。
        $.ajax({
            method:"POST",
            url:"/test",
            data:{name:"sun"},
            success(res){
                console.log(res);
            },
            error(err){
                console.log(err);
            }
        });
        

 4,ajax全局配置

   // ajax全局配置,参数和$.ajax方法的对象一样,通过全局配置设置的内容会作用到页面中所有的ajax请求。
        $.ajaxSetup({
            error(err){
                alert("您的网络异常");
            }
        });     




我的个人博客:http://www.eotodo.com


目录
相关文章
|
JSON 前端开发 数据格式
ajax请求解析json数据渲染在前端界面
ajax请求解析json数据渲染在前端界面
66 0
|
JSON 前端开发 数据格式
【前端统计图】echart多条折线图ajax请求json数据
【前端统计图】echart多条折线图ajax请求json数据
55 0
|
JSON 前端开发 数据格式
【前端统计图】echart折线图ajax请求json数据
【前端统计图】echart折线图ajax请求json数据
73 0
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
620 0
|
前端开发 JavaScript
前端——JavaScript获取系统时间以及通过ajax获取服务器时间
前端——JavaScript获取系统时间以及通过ajax获取服务器时间
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
87 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
80 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
74 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
56 0
|
前端开发
ajax返回数据进行for双循环实现前端html渲染数据的解决方案
ajax返回数据进行for双循环实现前端html渲染数据的解决方案
183 0

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    智能编码在前端研发的创新应用
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目