js原生Ajax的封装和原理详解
原理及概念
AJAX即“AsynchronousJavascriptAndXML”（异步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=newwindow.XMLHttpRequest();
通过该实例化的对象向服务器
发出请求，等待服务器响应
服务器响应完成后客户端再处理
服务器端响应的数据。
Ajax请求服务器的过程中有5个状态
0：表示请求服务器之前
1：表示打开远程服务器链接对应open方法
2：表示向服务器发送数据对应send方法
3：表示服务器响应过程中并未结束
4：表示服务器响应完成
/**
*创建XMLHttpRequest对象
*@param_method请求方式:post||get
*@param_url远程服务器地址
*@param_async是否异步
*@param_parameter向服务器发送数据
*@param_callBack回调函数
*/
functionparameterDeal(_parameter){
var_sender="";
if(_parameterinstanceofObject){
for(varkin_parameter){
_sender+=k+"="+_parameter[k]+"&";
}
return_sender.replace(/\&$/g,"");
}else{
return_parameter;
}
}
functioncreateXMLHttpRequest(){
try{
returnnewwindow.XMLHttpRequest();
}catch(e){
try{
returnnewActiveXObject("MSXML2.XMLHTTP.6.0");
}catch(e){
try{
returnnewActiveXObject("MSXML2.XMLHTTP.3.0");
}catch(e){
try{
returnnewActiveXObject("MSXML2.XMLHTTP");
}catch(e){
try{
returnnewActiveXObject("Microsoft.XMLHTTP");
}catch(e){
thrownewError("该浏览器版本太低,已经被大部分市场淘汰,请升级!!!");
return;
}
}
}
}
}
}
functionajaxRequest(_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()函数，传入你想要的参数，就可以正常使用了。
此方法纯属个人封装，有更精简方法的朋友欢迎与我分享！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。