Ajax工作原理和原生JS的ajax封装
前言:
之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的。甚至可以说,是ajax带来了前端这个行业。当然,历史并不能说明当下,曾经的辉煌也会有尘埃落定的时候,但对ajax而言,似乎并不如此。
正文:
一,定义:Asynchronous JavaScript and XML,意思是异步JS和XML;
解释下异步,异步是相对于同步来说的,同步即同时进行(累积多了就排队,一个一个执行,必须等上一个结束,才能到下一个),而异步就是执行到我了,我去旁边继续执行等结果,后面排队的继续不用等我结果出来再执行。
这是对于ajax的特点来设计的,因为ajax对后端数据的请求需要时间,而这个时间不利用起来就是浪费。当然,如果必须要等前一个的结果怎么办,这就使用到JS中的重要部分——回调函数了,其实回调在JS中应用很多,只是我们对它没有概念而已,像点击事件执行的就是回调(先绑定事件,只有在点击发生时,才会执行)。那么ajax也一样,先请求数据,只有在状态改变时才会执行接下来的(这个状态包括请求成功和请求失败)。
二,ajax特点:AJAX 是一种用于创建快速动态网页的技术,对网页的某部分进行更新,不用刷新整个网页。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
三,ajax工作原理:先上一张图,ajax实现的就是浏览器和服务器之间的数据交互
(图片转载自https://www.cnblogs.com/ygj0930/p/6126542.html)
四,ajax的核心:
—XMLHTTPRequest对象,(是对象,就有属性和方法)
—常用的方法:open("method", "url", "async"),
method表示通过什么方式进行服务器访问,包括get和post;
url表示访问服务器的地址;
async表示是否异步,包括true和false(注意:true表示异步)。
send(content),
content表示向服务器发送的数据。
—常用的属性:先看一下简单的代码
1 var xhr = new XMLHTTPRequest(); 2 3 xhr.open("method", "url", "async"); 4 5 xhr.send(null); 6 7 xhr.onreadystatechange = function(){ 8 9 if(xhr.readystate == 4){ 10 11 if(xhr.status == 200){ 12 13 console.log(xhr.responseText) 14 15 } 16 17 } 18 }
下面进行说明:
1. 向服务器请求状态的阶段:
onreadystatechange表示请求状态改变的事件触发器,
readystate表示请求状态,4表示完成,具体如下表:
2. 服务器反馈阶段:
status表示http请求状态码,200表示成功,具体如下表:
3. 服务器反馈的内容:(数据)
responseText表示响应返回的文本,具体如下表:
(图片转载自https://blog.csdn.net/limuzi13/article/details/53636830?utm_source=itdadao&utm_medium=referral)
五、原生JS的ajax封装
function ajax(){ var ajaxData = { type: (arguments[0].type || "GET").toUpperCase(), url: arguments[0].url || "", async: arguments[0].async || "true", data: arguments[0].data || null, dataType: arguments[0].dataType || "json", contentType: arguments[0].contentType || "application/x-www-form-urlencoded; charset=utf-8", beforeSend: arguments[0].beforeSend || function(){}, success: arguments[0].success || function(){}, error: arguments[0].error || function(){} } ajaxData.beforeSend() var xhr = createxmlHttpRequest(); xhr.responseType=ajaxData.dataType; xhr.open(ajaxData.type,ajaxData.url,ajaxData.async); xhr.setRequestHeader("Content-Type",ajaxData.contentType); xhr.send(convertData(ajaxData.data)); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if(xhr.status == 200){ ajaxData.success(xhr.response) }else{ ajaxData.error() } } } } function createxmlHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } function convertData(data){ if( typeof data === 'object' ){ var convertResult = "" ; for(var c in data){ convertResult+= c + "=" + data[c] + "&"; } convertResult=convertResult.substring(0,convertResult.length-1) return convertResult; }else{ return data; } }ajax({ type:"POST", url:"ajax.php", dataType:"json", data:{"name":"abc","age":123,"id":"456" }, beforeSend:function(){ //some js code }, success:function(msg){ console.log(msg) }, error:function(){ console.log("error") } })
几点说明:
IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用: var oAjax = new XMLHttpRequest();
IE6及其之前的版本中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。使用下面的语句创建: var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器;POST 请求中,在发送数据之前,要设置表单提交的内容类型;
//可以以下步骤代替上面的open、setRequestHeader、send三行,此处对GET和POST做了很好的区分var params = {};for(var key in ajaxData.data){params.push(key + "=" + ajaxData.data[key]);}var sendData = params.join("&");if(ajaxData.type.toUpperCase() == "GET"){xhr.open(ajaxData.type, ajaxData.url + "?" + sendData, ajaxData.async);xhr.send(null);}else{xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");xhr.send(sendData);}
结语:
暂时先写到这里,名字只能叫“ajax工作原理”,本来想写“原生JS的ajax和jQuery的ajax”的,先到这儿吧。
转载于:https://www.cnblogs.com/nangezi/p/9034054.html
Ajax工作原理和原生JS的ajax封装相关推荐
- 原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
- java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法 作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
- 原生ajax请求并渲染,原生js的ajax数据渲染
ajax应用不只是页面功能的提升,也是性能优化的一种方式. 兼容这块的话就是其ajax对象,在ie和其他浏览器的不同,那么现在基本上w3c已经给出了兼容的写法 var xmlhttp; if(wind ...
- 原生ajax的post方法,原生js实现ajax及get post方法
ajax原生实现,含 post与get方法.原码如下: /* * ajax * type === GET: data格式 name=baukh&age=29 * type === POST: ...
- ajax简介跟优点讲解,简要总结ajax工作原理及优缺点
虽然在实际的项目中使用多种ajax请求,但就其工作原理,优缺点尚未深入总结, 参考:http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137 ...
- 原生js的Ajax实例
与jQuery不同,原生js的ajax的实现相比来说复杂一些,因为jquery中的$.ajax()方法已经把js的实现封装起来,使用起来更加方便.但是,原生js的实现过程,对于理解ajax,好像更清晰 ...
- 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)...
一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...
- 了解ajax工作原理及手写ajax
1.ajax工作原理 工作原理: 创建XMLHttpRequest对象,发送异步请求,提供网页加载后在后台与服务器进行通信的方法,可在不刷新页面的情况下获得新数据 2.手写ajax原生代码 手写原生a ...
- AJAX工作原理及其优缺点 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页
参考文章:https://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html AJAX工作原理及其优缺点 1.什么是AJAX? AJ ...
最新文章
- poj3171(dp + 线段树)
- tensorflow官网视频教程
- C语言BFS算法的实现(附完整源码)
- 作为IT面试官,我如何考核计算机专业毕业生?作为培训班老师,我又如何提升他们?...
- Jquery 禁用元素的所有属性
- 可信知识实证在UGC时代情报应用中的思考与探索
- android 9宫格输入法,Android/WP原生九宫格输入法对比_诺基亚 Lumia 925_手机iOS频道-中关村在线...
- 设计师学习HTML/CSS之路-08
- 【AAAI2021】自动跨主题作文属性评分
- 如何用4K YouTube转换视频为MP3,同时设置成MP3桌面播放器?
- Caffe+CUDA8.0+CuDNNv5.1+OpenCV3.1+Ubuntu14.04 配置参考文献 以及 常见编译问题总结
- 看拉扎维《模拟CMOS集成电路设计》的一些总结和思考(三)——单级放大器
- ac3168无线网卡驱动下载_REALTEK芯片无线网卡最新驱动!支持到10.15
- 发到微信的apk文件变成apk.1,如何安装,解决办法
- 社交网络崛起带来口碑营销的复兴
- python处理smap level2c 数据---根据 iqc_flag进行数据质量控制(二进制十进制)
- rrpp协议如何修改_RRPP单环
- html 多张图片自动滚动,JS实现图片的不间断连续滚动的简单实例
- Yii实战开发大型商城项目视频教程
- 浏览器小知识之谷歌(Google Chrome)浏览器