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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
中止javascript执行的方法
Feb 14 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 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
Zend Guard使用指南及问题处理
2015/01/07 PHP
php简单实现MVC
2015/02/05 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python逆序打印各位数字的方法
2018/06/25 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
Python实现像awk一样分割字符串
2020/09/15 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
销售类个人求职信范文
2013/09/25 职场文书
室内设计实习自我鉴定
2013/09/25 职场文书
演讲稿怎么写
2014/01/07 职场文书
运动会开幕式解说词
2014/02/05 职场文书
自主招生教师推荐信
2014/05/10 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android