关于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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
chrome调试javascript详解
Oct 21 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 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
短波收音机简介
2021/03/01 无线电
php生成缩略图的类代码
2008/10/02 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php绘制圆形的方法
2015/01/24 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
Node.js编码规范
2014/07/14 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python字典改变value值方法总结
2019/06/21 Python
Python属性和内建属性实例解析
2020/01/14 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
keras中的backend.clip用法
2020/05/22 Python
python爬虫用mongodb的理由
2020/07/28 Python
jupyter 添加不同内核的操作
2021/02/06 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
学生出入校管理制度
2014/01/16 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
服务整改报告
2014/11/06 职场文书
投标承诺函范文
2015/01/21 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers