不会吧,不会吧,不愧是Ajax,jQuery Ajax啊 微信小程序 使用 fly接口请求框架 面试经常会被问到的节流和防抖,一分钟理解 回流与重绘(浏览器渲染原理) Vue笔记:插槽的使用 初学Qt不会样式表怎么办,打包好的Qt样式表一键生成送给你。 javascript从入门到跑路-----小文的js学习笔记(23)------函数式编程----ForEach、filter、Reduce和Map 聚焦教育行业AI+大数据,「三盟科技」完成B1轮上亿元人民币融资 聚焦教育行业AI+大数据,“三盟科技”完成B1轮上亿元人民币融资 郭宇:28岁“退休程序员” 中信建投智信物联网灵活配置混合C基金最新净值跌幅达1.67% 中信建投智信物联网灵活配置混合A基金最新净值跌幅达1.66% 大数据透视A股复苏:盈利触底反弹 现金流大幅转正 大数据透视A股复苏:盈利触底反弹,现金流大幅转正,产能扩张提速,经营效率显著改善 观赛人数同增12.1%,大数据揭秘中超逆势飘红原因 物联网的银河,华为的桨,少年的歌 大数据显示:长沙互联网人工作满意度、幸福感指数全国第二 日本NHK电视台:贵阳利用大数据产业发展乡村经济和货物运输业 卡奥斯COSMOPlat首发国家质量基础设施物联网平台,打造行业新生态 趣互联:从自助设备SaaS系统+物联网硬件切入线下无人零售市场 苏宁基于 ClickHouse 的大数据全链路监控实践 浪潮下的大数据中心,BAT已从用户变成玩家 威胜信息:能源物联网领航者,竞争力突出、中报逆势增长 新手请进:每个Python程序员都应该知道的10个缩写词 谈谈对于IIc的理解 《信息处理技术》20春期末考试 第十一届蓝桥杯大赛第二次模拟(软件类)真题 +总结(2020年4月,C++描述) Android权限(多个权限申请) virtuoso IC61 教育免费工艺库NCSU 配置问题 浅谈Android MVP openlayers加载Mapbox底图 用大数据为顾客“画像”帮小企业互联网转型 政务上云 服务在线(大数据观察) 大数据“杀熟”?明令禁止!《在线旅游经营服务管理暂行规定》10月起施行 大数据助力福州工程项目提质增速 中国电信:物联网用户突破2亿 Spring Cloud 里 Eureka 什么是微服务及微服务的特点 简历:第一章:技术亮点如何写 记录一个架构师的成长之路【持续更新中...】 MySQL sql语句中变量应用 Unity中加载Texture2D不断消耗内存的问题 mysql-8.0.21安装教程 游戏设计模式——中介者模式(Mediator) 拼多多笔试:最大士兵问题 京东2021校园招聘笔试(8.27编程部分)——数据开发工程师(数列变换A了9%) 电信物联网用户超2亿助大湾区产业数字化升级 中科创达携手宝时得启动全球物联网平台战略 单例模式:她真的很简单吗? Apache 网页与安全优化(网页压缩--缓存--防盗链等) 【解决方法】PHP Composer - Fatal error: Allowed memory size of xxx bytes exhausted
您的位置:首页 >大数据 >

不会吧,不会吧,不愧是Ajax,jQuery Ajax啊

Ajax and jQuery Ajax

我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互。不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春笋,需要我们具备持续的学习能力才能更好的完成工作。
本文主要介绍原生Ajax和jQuery Ajax的使用。能够实现AJAX功能的还有两种现在比较流行的技术,Axios、Fetch。
好了,废话不多说,开始进入正题。

在这里插入图片描述


简单说一下这四者的区别吧:
Ajax:

全称Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。

jquery Ajax:

是 jQuery 底层 AJAX 实现。简单易用的高层实现,$.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。jQuery ajax - ajax() 方法

Axios:

axios不是原生JS的,需要进行安装,它不但可以在客户端使用,也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于Promise对象的。特性:从浏览器中创建 XMLHttpRequests、从 node.js 创建 http 请求、支持 Promise API、拦截请求和响应等。Axios 中文文档传送门

Fetch:

Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。Fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的Promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。

一、什么是Ajax

Ajax是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助。简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验,较少网络数据的传输量。同时,由于AJAX请求获取的是数据而不是HTML文档,因此它也节省了网络带宽,让互联网用户的网络冲浪体验变得更加顺畅。

二、Ajax原理是什么

在这里插入图片描述

三、原生Ajax怎么写

创建一个ajax请求,依赖一个xhr对象

var xhr;if (window.XMLHttpRequest) { // 兼容IE7+, Firefox, Chrome, Opera, Safarixhr = new XMLHttpRequest();} else { // 兼容 IE6, IE5 xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

监听xhr对象的状态

 xhr.onreadystatechange = function() { if (xhr.readyState == 4) {if (xhr.status == 200) {console.log(xhr.responseText);} }}
 汇总XHR的属性和方法及事件 【属性】 • xhr.response 响应主体内容 • xhr.responseText 响应主体的内容是字符串(JSON或者XML格式字符串都可以) • xhr.responseXML 响应主体的内容是XML文档 • xhr.status 返回的HTTP状态码 • xhr.statusText 状态码的描述 • xhr.timeout 设置请求超时的时间 • xhr.withCredentials 在跨域请求中是否允许携带证书(携带COOKIE) 【方法】 • xhr.abort() 强制中断AJAX请求 • xhr.getAllResponseHeaders() 获取所有响应头的信息 • xhr.getResponseHeader([key]) 获取KEY对应的响应头信息例如:xhr.getResponseHeader( "date") 就是在获取响应中的服务器时间 • xhr.open() 打开URL请求 • xhr.overrideMimeType() 重写MIME类型 • xhr.send() 发送AJAX请求 • xhr.setRequestHeader() 设置请求头

建立连接
GET请求实例:

xhr.open("GET", "tologon.php?username=" + input.value, true);xhr.send(null);
xhr.open(method,url,async);method:请求的类型;GET 或 POSTurl:文件在服务器上的位置,如果是get请求,参数已?号开头下载地址后面async:true(异步)或 false(同步)xhr.send(string);post请求时才使用字符串参数,否则不用带参数。

POST请求实例:

 xhr.open("POST", "Topost.php", true); // 设置一个请求头,post请求在发送之前,得把post请求的参数格式指定一下 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 发送 post请求的参数写在send中 // key1=value1&key2=value2 xhr.send("uname=" + uname.value);

四、jQuery Ajax怎么写

jQuery Ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持。

注意:JQuery 1.9版本版本以下不支持大文件请求

post请求实例

 $.ajax({type: "POST",url: "jq.php",//请求的媒体类型contentType: "application/json;charset=UTF-8",data: {"username": $("input").val(),"score": 100},success: function(data) {console.log(data)},error: function(err) {console.log(err)}})

type:请求方式 (“POST” 或 “GET”), 默认为 “GET”。
data:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
success:请求成功后的回调函数。
error:请求失败时调用此函数。
链接: jQuery ajax - ajax() 方法.

五、什么是readyState?

readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值,分别为0~4,每个值代表了不同的含义

0:未初始化 – 尚未调用.open()方法;1:启动 – 已经调用.open()方法,但尚未调用.send()方法;2:发送 – 已经调用.send()方法,但尚未接收到响应;3:接收 – 已经接收到部分响应数据;4:完成 – 已经接收到全部响应数据,而且已经可以在客户端使用了;

六、什么是status?

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

如果有错误和语义不明确的地方,欢迎评论指出,你的点赞和收藏和关注是对作者原创的最好支持

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。