原生及jq方式使用ajax

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对象

巴特西

原生及jq方式使用ajax

最新文章

热门文章