Ajax的基础使用

最新推荐文章于 2024-09-03 01:23:13 发布

枫叶&情缘

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量159

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45791806/article/details/106192588

版权

JavaScript 专栏收录该内容

71 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>

</body>
<script>
//ajax的兼容性
if (window.XMLHttpRequest) {
    //创建Ajax对象
    var oAjax = new XMLHttpRequest();
} else {
    //ie6
    var oAjax = new ActiveXobject('Microsoft.XMLHTTP');
}
//2、连接服务器
//open(方法，文件名，异步传出)
//'文件名?t='+new Date().getTime();制止浏览器缓存
oAjax.open('GET','文件名?t='+new Date().getTime(),true);
//3、发送请求
oAjax.send();
//4、接收返回
oAjax.onreadystatechange=function () {
    //oAjax.readyState// 浏览器和服务器，进行哪一步了 
    //0------(未初始化)还没有调用open()方法
    //1------(载入)已调用send()方法，正在发送请求
    //2------(载入完成)send()方法完成，已收到全部响应内容
    //3------(解析)正在解析响应内容
    //4------(完成)响应内容解析完成，可以在客户端调用了
    if (oAjax.readyState == 4) {//读取完成
        if (oAjax.status == 200) {//200----成功
            //成功
            //oAjax.responseText服务器返回的内容
        }else{
            //失败
        }
    }
};
//调用ajax
ajax('文件名',function (str){
    console.log(str);
})
</script>
</html>

Ajax的简易封装

function ajax(url,fnSucc,fnFaild) {
    //ajax的兼容性
if (window.XMLHttpRequest) {
    //创建Ajax对象
    var oAjax = new XMLHttpRequest();
} else {
    //ie6
    var oAjax = new ActiveXobject('Microsoft.XMLHTTP');
}
//2、连接服务器
//open(方法，文件名，异步传出)
//'文件名?t='+new Date().getTime();制止浏览器缓存
oAjax.open('GET',url,true);
//3、发送请求
oAjax.send();
//4、接收返回
oAjax.onreadystatechange=function () {
    //oAjax.readyState// 浏览器和服务器，进行哪一步了 
    //0------(未初始化)还没有调用open()方法
    //1------(载入)已调用send()方法，正在发送请求
    //2------(载入完成)send()方法完成，已收到全部响应内容
    //3------(解析)正在解析响应内容
    //4------(完成)响应内容解析完成，可以在客户端调用了
    if (oAjax.readyState == 4) {//读取完成
        if (oAjax.status == 200) {//200----成功
            //成功
            //oAjax.responseText服务器返回的内容
            fnSucc(oAjax.responseText);
        }else{
            //失败
            if(fnFaild){
                fnFaild(oAjax.status);
            }
        }
    }
}
}