关于Ajax的原理以及代码封装详解


Posted in Javascript onSeptember 08, 2017

前言

其实AJAX内部实现并不麻烦,主要通过一个叫XMLHttpRequest的对象,而这个对象在现有的浏览器均被支持。

可以说,它是整个AJAX实现的基础,是浏览器用于后台与服务器交换数据的对象,有了它,才有了AJAX,也便有了部分页面刷新的艺术!

本文主要给大家介绍了关于Ajax原理以及代码封装的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

示例代码

var xmlhttp;
if (window.XMLHttpRequest) {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp = new XMLHttpRequest();
} else {
 // code for IE6, IE5 
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
  // to do...
 }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

步骤:

1、创建。

创建 XMLHttpRequest 对象的语法:

var = new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

var = new ActiveXObject("Microsoft.XMLHTTP");

2、连接和发送。

2.1、open()函数的三个参数:请求方式、请求地址、是否异步请求

2.2、GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器

2.3、POST 请求中,在发送数据之前,要设置表单提交的内容类型

2.3、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码,实际上在参数列表key=value的形式中,key 和 value 都需要进行编码,因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 v=xx 的字符串,这样是为了拒绝缓存,每次都直接请求到服务器上。

3、接收。

3.1、接收到响应后,响应的数据会自动填充XHR对象,相关属性如下

responseText:响应返回的主体内容,为字符串类型;

responseXML:如果响应的内容类型是 "text/xml" 或 "application/xml",这个属性中将保存着相应的xml 数据,是 XML 对应的 document 类型;

status:响应的HTTP状态码;

statusText:HTTP状态的说明

3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段,这个属性的值如下

0 --> 未初始化,尚未调用open()方法;

1 --> 启动,调用了open()方法,未调用send()方法;

2 --> 发送,已经调用了send()方法,未接收到响应;

3 --> 接收,已经接收到部分响应数据;

4 --> 完成,已经接收到全部响应数据;

只要 readyState 的值变化,就会调用 readystatechange 事件,(其实为了逻辑上通顺,可以把readystatechange放到send之后,因为send时请求服务器,会进行网络通信,需要时间,在send之后指定readystatechange事件处理程序也是可以的,我一般都是这样用,但为了规范和跨浏览器兼容性,还是在open之前进行指定吧)。

3.3、在readystatechange事件中,先判断响应是否接收完成,然后判断服务器是否成功处理请求,xhr.status 是状态码,状态码以2开头的都是成功,304表示从缓存中获取,上面的代码在每次请求的时候都加入了随机数,所以不会从缓存中取值,故该状态不需判断。

封装ajax方法:

ajax({  
  url: "./test.php",
  type: "POST",      
  data: { name: "abc", age: 18 },   
  dataType: "json",  
  success: function (response, xml) {   
   // 执行成功回调  
  },  
  fail: function (status) {   
   // 执行失败回调  
  }
 });
  
  function ajax(options) { 
   options = options || {}; 
   options.type = (options.type || "GET").toUpperCase();  
   options.dataType = options.dataType || "json";  
   var params = formatParams(options.data);    
   
   // 创建对象  
   if (window.XMLHttpRequest) {   
    var xhr = new XMLHttpRequest(); 
   } else {   
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');  
   } 
   
   //接收 - 第三步
   xhr.onreadystatechange = function () {   
    if (xhr.readyState == 4) {    
     var status = xhr.status;    
     if (status >= 200 && status < 300) {     
      options.success && options.success(xhr.responseText,xhr.responseXML);    
     } else {     
      options.fail && options.fail(status);    
     }   
    }
   }  
    
   //连接 和 发送 - 第二步 
   if (options.type == "GET") {   
    xhr.open("GET", options.url + "?" + params, true);   
    xhr.send(null);  
   } else if (options.type == "POST") {   
    xhr.open("POST", options.url, true);   
    //设置表单提交时的内容类型   
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);  
   }  
   
   //格式化参数 
   function formatParams(data) { 
    var arr = [];  
    for (var name in data) {   
     arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); 
    }  
    arr.push(("v=" + Math.random()).replace(".",""));  
    return arr.join("&"); 
   }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery一般方法介绍 入门参考
Jun 21 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
js实现随机数小游戏
Jun 28 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
vue父子组件的嵌套的示例代码
Sep 08 #Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
通过button将form表单的数据提交到action层的实例
Sep 08 #Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 #Javascript
JavaScript实现图片拖曳效果
Sep 08 #Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 #Javascript
javascript将list转换成树状结构的实例
Sep 08 #Javascript
You might like
php 图片上添加透明度渐变的效果
2009/06/29 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
Javascript面向对象编程
2012/03/18 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python生成密码库功能示例
2017/05/23 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
Linux操作面试题
2012/05/16 面试题
高中学校对照检查材料
2014/08/31 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python