首页 > 其他分享> > 原生及JQuery方式使用ajax

原生及JQuery方式使用ajax

2020-08-31 19:32:03 作者：互联网

1.原生js实现Ajax方法：

// 封装ajax()方法  
function ajax(url,fnSucc,fnFaild){  
    //1、创建Ajax 对象  
    if(window.XMLHttpRequest)  
    {  
        var oAjax=new XMLHttpRequest();                     //声明 兼容除IE6外  所有主流浏览器  
    }  
    else  
    {  
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   //声明 兼容IE6   内置的 微软的 插件  
    }  
      
    //2、连接服务器(打开连接服务器)  
    //  open(method,url,async)  
    //  method ：请求的类型；GET 或 POST  
    //  url ：文件在服务器上的位置  
    //  async ：true（异步）或 false（同步）  
    oAjax.open('GET',url,true);  
      
    //3、发送请求  
    oAjax.send();  
      
    //4、接受请求  
    oAjax.onreadystatechange=function (){          //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。  
        /** readyState状态含义  
         *  0: 请求未初始化  
            1: 服务器连接已建立  
            2: 请求已接收  
            3: 请求处理中  
            4: 请求已完成，且响应已就绪  
         */  
        if(oAjax.readyState==4){  
            /** status  状态含义  
                200: "OK"    成功  
                404: 未找到页面  出错  
             */  
            if (oAjax.status==200) {  
                //alert('成功了！'+Ajax.readyState);   //responseXML  获得 XML 形式的响应数据。  
                fnSucc(oAjax.responseText);          //responseText 获得字符串形式的响应数据。  
            }   
            else{  
                //alert('失败了');  
                if(fnFaild){  
                    fnFaild  
                }  
            }  
        }  
    };  
}

ajax(url,fnSucc,fnFaild)函数参数介绍：
url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）
fnSucc:成功返回信息
fnFaild:失败返回信息

HTML页面使用方法代码如下:

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无标题文档</title>  
<script src="ajax.js"></script>  
<script>  
window.onload=function ()  
{  
    var oBtn=document.getElementById('btn1');  
      
    oBtn.onclick=function ()  
    {  //阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。getTime()是毫秒数  
        //第二种阻止缓存方法: 声明全部变量num = 0; 在路径后面加'aaa.txt?='+(num++) 递归  
        ajax('aaa.txt?t='+new Date().getTime(), function (str){  
            alert(str);  
        }, function (){  
            alert('失败');  
        });  
    };  
};  
</script>  
</head>  
   
<body>  
<input id="btn1" type="button" value="读取" />  
</body>  
</html>

2.jq方式实现Ajax方法：

$(document).ready(function(){ 
    $("#search").click(function(){ 
        $.ajax({ 
            type: "GET",     
            url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
            dataType: "json",
            success: function(data) {
                   if (data.success) { 
                $("#searchResult").html(data.msg);
            } else {
                $("#searchResult").html("出现错误：" + data.msg);
            }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });
    
    $("#save").click(function(){ 
        $.ajax({ 
            type: "POST",     
            url: "serverjson.php",
            data: {
                name: $("#staffName").val(), 
                number: $("#staffNumber").val(), 
                sex: $("#staffSex").val(), 
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) { 
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });
});

注：

type：类型，“POST”或者“GET”，默认为“GET”
url：发送请求的地址
data：是一个对象连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据包含HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”
success：是一个方法，请求成功后的回掉函数。传入返回后的数据，以及包含成功代码的字符串
error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

NOTES

标签：JQuery,原生,请求,function,oAjax,url,ajax,data
来源： https://www.cnblogs.com/cindycindy/p/13591337.html