anyuan2002.com - vwin网

查找: 您的方位主页 > 电脑频道 > 编程代码 > 阅览资讯:Js原生Ajax的封装原理是什么?

Js原生Ajax的封装原理是什么?

vwin娱乐场
2017-06-29 20:10:04 来历:www.anyuan2002.com 【

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()函数,传入你想要的参数,就能够正常运用了。

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

以上便是本文的悉数内容,期望对咱们的学习有所协助,也期望咱们多多支撑vwin。


本文地址:http://www.anyuan2002.com/bcdm/89317.html
Tags: ajax 封装 原生
修改:vwin网
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部