几种javascript实现原生ajax的方法

来源：动视网责编：小采时间：2020-11-27 20:11:14

几种javascript实现原生ajax的方法

几种javascript实现原生ajax的方法:在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。自从js有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但有时候为了追求简洁，可

推荐度：

点击下载本文 文档为doc格式

导读几种javascript实现原生ajax的方法:在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。自从js有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但有时候为了追求简洁，可

在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。自从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();
}

下面使用上面创建的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');
}
}
}

使用上面创建的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');
}
}
}

下面再分享一个从网上看到的模拟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);
 }
});

以上这几种javascript实现原生ajax的方法你们学会了吗？希望对大家有帮助。

几种javascript实现原生ajax的方法

推荐度：

点击下载本文 文档为doc格式

标签： js 几种 javascript

热门焦点

几种javascript实现原生ajax的方法

几种javascript实现原生ajax的方法

几种javascript实现原生ajax的方法

最新推荐

猜你喜欢

热门推荐