关于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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
javascript下IE与FF兼容函数收集
Sep 17 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
flexible.js实现移动端rem适配方案
Apr 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
实例讲解React 组件
2020/07/07 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
django 自定义用户user模型的三种方法
2014/11/18 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
餐厅销售主管职责范本
2014/02/19 职场文书
书香校园建设方案
2014/05/02 职场文书
人力资源求职信
2014/05/25 职场文书
地理科学专业自荐信
2014/09/01 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
三国演义读书笔记
2015/06/25 职场文书
新年祝酒词大全
2015/08/11 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis
Javascript设计模式之原型模式详细
2021/10/05 Javascript
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记