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

146 阅读 0 评论 97 点赞

我是靠谱客的博主俊秀煎蛋，最近开发中收集的这篇文章主要介绍js原生Ajax的封装和原理详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原理及概念

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()函数，传入你想要的参数，就可以正常使用了。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。