【从0到1】重识前端之AJAX-阿里云开发者社区

开发者社区> 景凌凯> 正文

【从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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
express响应前端ajax请求
后端其实并不需要知道前端发起的请求是不是ajax,后端只需要响应请求即可.例子: 前端这样写: $('button').on('click', function(event) { event.
781 0
如何去设计前端框架能力?星巴克消息开放项目从0到1,从点到面的思考
# 如何去设计前端框架能力 - 双十二在星巴克消息开放支持点到面的思考 PS:本文会有点长,自己项目中总结和思考,看了本文希望对大家有帮助,**希望让业务分享更加有价值** 背景参考上一篇文章[手淘千牛IM即时通信 - 星巴克消息开放实践](https://www.atatech.org/articles/125468) ## 摘要 > 从满足星巴克项目需求单点出发,发散到从点到面的思考。
1969 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10076 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11888 0
前端必知词汇:Ajax
Ajax 即 “Asynchronous JavaScript And XML” (异步 JavaScript 和 XML) ,是指一种创建交互式网页应用的网页开发技术。Ajax 在浏览器与 Web 服务器之间使用异步数据传输 (HTTP 请求) ,这样就可使网页从服务器请求少量的信息,而不是整个页面。而传统的网页 (不使用 Ajax) 如果需要更新内容,必须重载整个网页页面。
187 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22400 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
景凌凯
有点尴尬唉 你要寻找的东西已经被吃掉啦!
47
文章
1366
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载