fail 原生ajax_javascript实现原生ajax的几种方法

自从js有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但有时候为了追求简洁，可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢？下面和大家分享几种利用javascript实现原生ajax的方法。

首先实现ajax之前必须要创建一个 XMLHttpRequest 对象的。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject，具体方法如下：

var xmlHttp;

function createxmlHttpRequest(){

if(window.ActiveXObject){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest)

xmlHttp=new XMLHttpRequest();

}

(1)下面使用上面创建的xmlHttp实现最简单的ajax get请求：

function doGet(url){//注意在传参数值的时候最好使用encodeURI处理一下，防止乱码

createxmlHttpRequest();

xmlHttp.open("GET",url);

xmlHttp.send(null);

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4&&xmlHttp.status==200){

alert('success');

}else{

alert('fail');

}

}

}

(2)使用上面创建的xmlHttp实现最简单的ajax post请求：

function doPost(url,data){//注意在传参数值的时候最好使用encodeURI处理一下，防止乱码

createxmlHttpRequest();

xmlHttp.open("POST",url);

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttp.send(data);

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4&&xmlHttp.status==200){

alert('success');

}else{

alert('fail');

}

}

}

(3)下面再分享一个从网上看到的模拟jquery的$.ajax方法的封装：

var createAjax=function(){

var xhr=null;

try{//IE系列浏览器

xhr=new ActiveXObject("microsoft.xmlhttp");

}catch(e1){

try{//非IE浏览器

xhr=new XMLHttpRequest();

}catch(e2){

window.alert("您的浏览器不支持ajax，请更换！");

}

}

return xhr;

};

var ajax=function(conf){

var type=conf.type;//type参数,可选

var url=conf.url;//url参数，必填

var data=conf.data;//data参数可选，只有在post请求时需要

var dataType=conf.dataType;//datatype参数可选

var success=conf.success;//回调函数可选

if(type==null){//type参数可选，默认为get

type="get";

}

if(dataType==null){//dataType参数可选，默认为text

dataType="text";

}

var xhr=createAjax();

xhr.open(type,url,true);

if(type=="GET"||type=="get"){

xhr.send(null);

}else if(type=="POST"||type=="post"){

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

xhr.send(data);

}

xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200){

if(dataType=="text"||dataType=="TEXT"){

if(success!=null){//普通文本

success(xhr.responseText);

}

}else if(dataType=="xml"||dataType=="XML"){

if(success!=null){//接收xml文档

success(xhr.responseXML);

}

}else if(dataType=="json"||dataType=="JSON"){

if(success!=null){//将json字符串转换为js对象

success(eval("("+xhr.responseText+")"));

}

}

}

};

};

该方法使用也很简单，和jquery的$.ajax方法一样，不过没那么多的参数。仅仅是简单的实现了一些基本的ajax功能。使用方法如下：

ajax({

type:"post",//post或者get，非必须

url:"test.jsp",//必须的

data:"name=dipoo&info=good",//非必须

dataType:"json",//text/xml/json，非必须

success:function(data){//回调函数，非必须

alert(data.name);

}

});