ajax 的基础原理(ajax的工作原理)
toyiye 2024-09-19 04:46 3 浏览 0 评论
ajax 英文全称 Asynchronous JavaScript and XML , 也就是异步的 javascript 和 xml。
可以这么说 ajax 给了web 新的生命力,如果没有ajax,web的体验是非常的差的,以前我们知道是桌面软件的时代,现在是互联网的时代,未来计算机可能就安装一个浏览器就行了,不用安装客户端,通过接口和服务器通讯实现操作的目的,ajax起了很大的作用,如果像以前的form表单提交那样的通讯体验多差,所以ajax技术给了javascript 新的生命。当然现在html5 里面新的websocket 也是很牛逼的一个存在
重点 :ajax原理和XmlHttpRequest对象(官网上找)
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起,来看看它的工作原理。
首先,我们先来看看XMLHttpRequest这个对象的属性。
它的属性有:
- onreadystatechange 每次状态改变所触发事件的事件处理程序。
- responseText 从服务器进程返回数据的字符串形式。
- responseXML 从服务器进程返回的DOM兼容的文档数据对象。
- status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
- status Text 伴随状态码的字符串信息
- readyState 对象状态值
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法) 1 (初始化) 对象已建立,尚未调用send方法 2 (发送数据) send方法已调用,但是当前的状态及http头未知 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误, 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
这是我多年前封装的ajax函数
function ajax(obj) { var parameter={ //参数的对象。 url:obj.url, //地址 success:obj.success, //传回来的函数 method:obj.method || "get", //方式 name:obj.data || null, //传进的数据 bool:obj.bool|| true, // boolean值同步异步 type:obj.type || "", //数据类型 fail:obj.fail || function(){} //失败的函数 } var ajax=new XMLHttpRequest(); //声明这个函数 if(parameter.method=="get"){ //get方法的传输数据 if(parameter.name){ parameter.url+="?"+encodeURI(parameter.data);//传送数据的时候 } ajax.open("get",parameter.url,parameter.bool); //地址传输 ajax.send(); //发送 }else if(parameter.method=="post"){ //这是post方法 ajax.open("post",parameter.url,parameter.bool); ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //传输数据的时候有个请求头的存在。 ajax.send(parameter.data); //传输数据 } ajax.onload?ajax.onload=fn:ajax.onreadystatechange=fn; //ie浏览器跟fireFox第一个函数 function fn(){ if(ajax.readyState==4){ //状态码 if(200<=ajax.status&&ajax.status<=207){ var str=(parameter.type=="xml")?ajax.responseXML:((parameter.type=="json")?(new Function("","return"+ajax.responseText))():ajax.responseText); //判断数据类型 parameter.success&¶meter.success(str); }else{ // 出错 parameter.fail&¶meter.fail(ajax.status); } } } } // 特别注意的是obj.data数据是name=name&data&data而不是json格式的数据。
当然这个是最简陋的一个ajax的封装了,在实际的项目中只能说勉强可用吧!
像类似jquery和axios 那么强大还是要进一步来封装。
函数完善:
// header 部分的补充(可以按照自己的需求来完成) ajax.setRequestHeader() // 设置请求头信息 ajax.getRequestHeader() // 获得请求头信息 ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 标准的表单格式 ajax.setRequestHeader('Content-Type','Content-type: application/json; charset=utf-8'); // 最常使用的json 格式 // 中断请求 XMLHttpRequest 方法有 ajax.abort() 方法来中断跟服务器的请求,实际上也是中断服务器连接,可能服务器已经工作了。
三、XMLHttpRequest对象的属性
XMLHttpRequest对象的属性有哪些?有些什么用?
属性名
作用
readyState
只读属性,用于表示XMLHttpRequest请求的当前状态,有五个数字(0,1,2,3,4);0:表示已经创建了XMLHttpRequest对象,但是open方法还未被调用;1:表示已调用open方法,但还未调用send方法(请求还未被发送出去),此时可以对请求的header进行设定(setRequestHeader方法);2:send方法已调用,数据已发送,并且服务器接收到了请求;3:表示服务器正在传输数据;4:数据传输完成;该方法一般在onreadystatechange事件中进行查看
status
只读属性,表示本次请求的状态,只返回一个数字,常用的有如下几个状态码:200:OK(正常访问);301:Moved Permanently(永久移动);302:Moved temporarily(暂时移动);304:Not Modified(未修改);307:Temporary Redirect(暂时重定向);401:Unauthorized (未授权);403:Forbidden(禁止访问);404:Not Found(未找到该网址);500:Internal Server Error (找到网址但服务器发生错误);
statusText
与status属性类似,返回本次请求的状态,不同点在于,status只返回一个数字,而该属性返回数字和状态解析
responseType
可通过对该属性赋值来指定接收的数据类型,默认为字符串,有如下几种数据类型:text:以字符串形式接收数据;json:以json对象形式接收数据;blob:blob对象;ArrayBuffer:ArrayBuffer对象;
responseresponseTextresponseXML
三者都是服务器返回的数据,如果数据不完整或者获取失败,它们的值就为null;不同点:response返回的是数据的主体部分,可以为任何类型(数组,json,XML,字符串等);responseText返回从服务器接收到的字符串;responseXML返回从服务器接收到的Document对象,若返回的数据不能解析为XML或者HTML格式,那该属性的值为null,该值返回的数据会被直接解析DOM;
timeout
该属性用以设置发送请求后多少毫秒后未接到回应就自动终止请求,0为无时间限制,默认值为0,可通过在open方法后send方法前对其进行赋值来制定
withCredentials
该属性制定跨域请求时,个人的cookie信息是否附带进请求herder中,默认为false(不携带cookie),可通过对其进行赋值来制定
四、XMLHttpRequest对象的方法
方法名
作用
open
类比:拨打电话时的拨号行为,确定拨打(连接)的目标;open方法用以设置请求的参数,常用的有三个参数:第一个参数:请求的类型(常用get或者post);第二个参数是接口名和:这里要分两种情况:get请求时:接口名+请求参数(键值对形式);post请求时:只需要接口名;第三个参数:一个布尔值,指定是否异步(true为异步,false为同步,通常为true,默认为true);第四和第五个参数:填写用于认证的用户名和密码;
send
类比:拨打电话时,填写好电话号码后按拨打键(发送请求);send方法用以发送HTTP请求,需要在open方法调用后调用;参数分两种形式:get:get请求时无参数;post:post请求时参数为请求参数(键值对形式)
setRequestHeader
类比:填好电话号码后,想好是用人工接听还是机器人接听,再拨打电话(这个比喻不是很恰当);setRequestHeader方法用以设置请求的header部分,用以指定数据发送的格式,调用必须在open方法后,send方法前;常用实例:setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
abort
类比:拨打电话后把电话给挂了;abort方法用以中断已经发出的AJAX请求;可以用这个方法来防止用户重复点击造成的发送重复请求的问题;
getResponseHeader和getAllResponseHeaders
类比:打印我的通话清单(getResponseHeader为通话清单的指定信息,getAllResponseHeaders为通话清单的所有信息);getResponseHeader和getAllResponseHeaders之间的不同点:getResponseHeader接收一个参数,该参数为需要返回的回应头部信息;getAllResponseHeader无需参数,返回所有的回应头信息;
overrideMimeType
用以将从服务器转换回来的二进制信息转换为文本信息,该方法已被responseText属性代替
五、XMLHttpRequest对象的事件以及对应的事件监听接口
事件名
接口名
作用
readyStateChange(请求状态改变事件)
onreadystatechange
当readyState属性的值发生变化时,就会触发readyStateChange,可以对onreadystatechange指定函数来监控readyState的值;注:通常来说,一次交互中,readyState的值会发生五次变化,也就是说会触发五次readyStateChange事件
abort(请求被中断事件)
onabort
通过onabort事件接口,可指定当请求被中断时的具体措施
error(请求发生错误事件)
onerror
通过onerror事件接口,可指定当请求出错时的具体措施
load(请求完成,数据传输完毕事件)
onload
通过onload事件接口,可指定当数据传输完毕的具体措施
loadend(请求已完成事件)
onloaded
abort、error和load这三个事件的触发都会另外触发loadend事件,表示请求已完成,但成功与否未知
对应属性timeout
ontimeout
可通过ontimeout接口指定当用户请求超时的措施
progress(文件上传事件)
onprogress
可通过对onprogress接口指定措施来监控文件上传的进度
参考文献:
作者:大春春
链接:https://www.jianshu.com/p/94c12c6bfbe6
來源:简书
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)