关于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 调整select 位置的函数
Feb 21 Javascript
jQuery的学习步骤
Feb 23 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
javascript 中的继承实例详解
May 05 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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网页标题中文乱码的有效解决方法
2014/03/05 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
python将回车作为输入内容的实例
2018/06/23 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python GUI模拟实现计算器
2020/06/22 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
党员干部承诺书
2014/03/25 职场文书
实习协议书范本
2014/04/22 职场文书
应届生面试求职信
2014/07/02 职场文书
领导班子四风表现材料
2014/08/23 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
同意离婚答辩状
2015/05/22 职场文书
回复函范文
2015/07/14 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书