cindycindy

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

分类:

技术点:

相关文章: