实现原生ajax的几种方法,javascript实现原生ajax的
分类:美高梅游戏官网网站

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

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

ajax原生态的写法现在己经很少见了,大家都是直接使用jquery的ajax,因为jquery提供了大量的ajax方法,使用简单方便快捷了,下面我还是给各位提供一些ajax原生态写法。

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

var xmlHttp; 

function createxmlHttpRequest()

 { 

if (window.ActiveXObject) { 

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

else if 

(window.XMLHttpRequest)

 { 

xmlHttp=new XMLHttpRequest(); 

}

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

复制代码 代码如下:

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

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

var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}

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'); 

 

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

(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'); 

复制代码

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');
}
}
}

var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
    xmlHttp=new XMLHttpRequest();

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

 

复制代码 代码如下:

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

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');
}
}
}

 

您可能感兴趣的文章:

  • 原生js实现ajax方法(超简单)
  • 详谈 Jquery Ajax异步处理Json数据.
  • AJAX跨域请求json数据的实现方法
  • 用ajax动态加载需要的js文件
  • 原生 JS Ajax,GET和POST 请求实例代码
  • js每隔5分钟执行一次ajax请求的实现方法
  • JavaScript读二进制文件并用ajax传输二进制流的方法
  • js实现简单实用的AJAX完整实例
  • ajax的json传值方式在jsp页面中的应用
  • 纯js封装的ajax功能函数与用法示例

 代码如下

复制代码

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');
        }
    }

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

 

 代码如下

复制代码

 

var createAjax = function(){
    var xhr=null;
    try {
        xhr=new ActiveXObject("microsoft.xmlhttp"); // IE系列浏览器
    } catch(e1) {
        try{
            xhr=new XMLHttpRequest(); // 非IE浏览器
        } 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){
                    success(xhr.responseXML); // 接收xml文档
                }
            } else if (dataType=="json" || dataType=="JSON"){
                if (success != null) {
                    success(eval("("+xhr.responseText+")")); //将json字符串转换为js对象
                }
            }
        }
    };
}; 

该方法使用也很简单,和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);
    }
});

...

本文由美高梅网址发布于美高梅游戏官网网站,转载请注明出处:实现原生ajax的几种方法,javascript实现原生ajax的

上一篇:非常实用的jquery版表单验证,实现密码框的显示 下一篇:javascript跨浏览器事件框架,js实例代码
猜你喜欢
热门排行
精彩图文