关于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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
摘自百度的图片轮换效果代码
Nov 19 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
JS实现商品筛选功能
Aug 19 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
layui中table表头样式修改方法
2018/08/15 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python列表生成器的循环技巧分享
2015/03/06 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
党员自我评价分享
2013/12/13 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
网吧温馨提示
2015/07/17 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python