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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
js document.write()使用介绍
2014/02/21 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
微信小程序实现滚动消息通知
2018/02/02 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Django小白教程之Django用户注册与登录
2016/04/22 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
银行出纳岗位职责
2013/11/25 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
死者家属慰问信
2015/03/24 职场文书
经营场所证明范本
2015/06/19 职场文书
Python基础详解之邮件处理
2021/04/28 Python
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript