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的表单操作 简单计算器
Dec 29 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
windows实现npm和cnpm安装步骤
Oct 24 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
MySQL相关说明
2007/01/15 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
2020/04/27 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
对pandas中apply函数的用法详解
2018/04/10 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python字符串下标与切片及使用方法
2020/02/13 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
2014年接待工作总结
2014/11/26 职场文书
毕业论文致谢词
2015/05/14 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
python可视化大屏库big_screen示例详解
2021/11/23 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL