js原生Ajax的封装和原理详解


Posted in Javascript onMarch 11, 2017

原理及概念

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术。

动态网页:是指可以通过服务器语言结合数据库随时修改数据的网页。

静态网页,随着html代码的生成,页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。

AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

Ajax的优势

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

AJAX 可使因特网应用程序更小、更快,更友好。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。

AJAX 基于下列 Web 标准:

JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 标准已被良好定义,并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。

Web 应用程序较桌面应用程序有诸多优势;它们能够涉及广大的用户,它们更易安装及维护,也更易开发。

不过,因特网应用程序并不像传统的桌面应用程序那样完善且友好。

通过 AJAX,因特网应用程序可以变得更完善,更友好。

Ajax的异步

异步:是相对于同步而言的,我们学过的定时器也是异步的一种,也就是其他程序不需要等待定时器的代码全部执行完毕以后才能执行代码。因为定时器有可能是无限循环执行代码的,如果等待定时器执行完毕那么其他的代码将永远无法运行。所以异步编程就是相对于其他代码是独立完成的。也就是上面所说的ajax是独立于浏览器平台的。

Tip:事件也是异步执行的,事件是发生某件事情后才会执行代码的。
同步:我们之前所写的代码除了定时器和事件大部分都是同步执行的。也就是同一个代码块中都是从上到下执行的。

Ajax的工作原理

Ajax 核心对象XMLHttpRequest
var _hr=new window.XMLHttpRequest();
通过该实例化的对象向服务器
发出请求,等待服务器响应
服务器响应完成后客户端再处理
服务器端响应的数据。
Ajax请求服务器的过程中有5个状态
0:表示请求服务器之前
1:表示打开远程服务器链接对应open方法
2:表示向服务器发送数据对应send方法
3:表示服务器响应过程中并未结束
4:表示服务器响应完成

/**
 * 创建XMLHttpRequest对象
 * @param _method 请求方式: post||get
 * @param _url 远程服务器地址
 * @param _async 是否异步
 * @param _parameter 向服务器发送数据
 * @param _callBack 回调函数
 */
function parameterDeal(_parameter){
  var _sender="";
  if(_parameter instanceof Object){
    for(var k in _parameter){
      _sender+=k+"="+_parameter[k]+"&";
    }
    return _sender.replace(/\&$/g,"");
  }else{
    return _parameter;
  }
}
function createXMLHttpRequest(){
  try{
    return new window.XMLHttpRequest();
  }catch(e){
    try{
      return new ActiveXObject("MSXML2.XMLHTTP.6.0");
    }catch(e){
      try{
        return new ActiveXObject("MSXML2.XMLHTTP.3.0");
      }catch(e){
        try{
          return new ActiveXObject("MSXML2.XMLHTTP");
        }catch(e){
          try{
            return new ActiveXObject("Microsoft.XMLHTTP");
          }catch(e){
            throw new Error("该浏览器版本太低,已经被大部分市场淘汰,请升级!!!");
            return;
          }
        }
      }
    }
  }
}
function ajaxRequest(_method,_url,_async,_parameter,_callBack){
  var _ajax=createXMLHttpRequest();
  if(_ajax){
    _ajax.onreadystatechange=function(){
      if(_ajax.readyState==4 && _ajax.status==200){
        _callBack(_ajax.responseText);
      }
    }
    _ajax.open(_method,_url,_async);
    _ajax.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
    _ajax.send(parameterDeal(_parameter));
  }
}

这是封装好了的原生Ajax,在使用的过程中,只需要新建一个js文件,将这段代码放进去,什么都不要改,在HTML页面引入之后,调用 ajaxRequest()函数,传入你想要的参数,就可以正常使用了。

此方法纯属个人封装,有更精简方法的朋友欢迎与我分享!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
理解JS事件循环
Jan 07 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 #Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 #Javascript
基于Bootstrap框架实现图片切换
Mar 10 #Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 #Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 #Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 #Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 #Javascript
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php不用正则验证真假身份证
2013/11/06 PHP
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
Python3数字求和的实例
2019/02/19 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
爱情检讨书大全
2014/01/21 职场文书
小学语文国培感言
2014/03/04 职场文书
煤矿安全协议书
2014/08/20 职场文书
先进典型发言材料
2014/12/30 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
《社戏》教学反思
2016/02/22 职场文书
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python