JavaScript——Ajax基础二

最新推荐文章于 2020-10-23 23:23:24 发布

可芭乐

最新推荐文章于 2020-10-23 23:23:24 发布

阅读量269

点赞数

分类专栏： JavaScript基础文章标签： javascript ajax

本文链接：https://blog.csdn.net/a839371666/article/details/54934296

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

编写Ajax——1

创建Ajax对象
ActiveXObject(“Microsoft.XMLHTTP”)
XMLHttpRequest()
在IE6下不兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    window.onload = function (){
        var oBtn = document.getElementById('btn1');

        oBtn.onclick = function(){
            //创建AJAX对象
            if (window.XMLHttpRequest) {
                var oAjax = new XMLHttpRequest();
            } else {
                var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
            }

            alert(oAjax);
        }
    }
</script>
</head>
<body>
    <input type="button" id="btn1" value="读取" />
</body>
</html>

当if中使用的是XMLHttpRequest，那么就是一个没有定义的变量，在浏览器中会报错，但若使用的是window.XMLHttpRequest，那就是一个没有定义的属性，在浏览器中不会报错，只会underfined。

显示结果为object XMLHttpRequest
连接服务器
open（方法，文件名，异步传输）
同步与异步
同步：事件依次进行
异步：事件同时进行
发送请求
send()
接收返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    window.onload = function (){
        var oBtn = document.getElementById('btn1');

        oBtn.onclick = function(){
            //创建AJAX对象
            if (XMLHttpRequest) {
                var oAjax = new XMLHttpRequest();
            } else {
                var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //连接服务器
            oAjax.open('GET','a.txt?t=' + new Date().getTime(),true);

            //发送请求
            oAjax.send();

            //接收返回值
            oAjax.onreadystatechange = function(){
                //oAjax.readyState    可以知道浏览器与服务器进行到哪一步了
                if (oAjax.readyState == 4) //读取完成
                {
                    if (oAjax.status == 200) {
                        alert('成功' + oAjax.responseText);
                    } else {
                        alert('失败');
                    }
                }
            }
        }
    }
</script>
</head>
<body>
    <input type="button" id="btn1" value="读取" />
</body>
</html>

数字表示对象：
0 （未初始化）还没有调用open()方法；
1 （载入）已调用send()方法，正在发生请求；
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了
封装函数

function ajax(url, fnSucc, fnFaild){
    if (XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    } else {
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //连接服务器
    oAjax.open('GET',url,true);

    //发送请求
    oAjax.send();

    //接收返回值
    oAjax.onreadystatechange = function(){
        //oAjax.readyState    可以知道浏览器与服务器进行到哪一步了
        if (oAjax.readyState == 4) //读取完成
        {
            if (oAjax.status == 200) {
                fnSucc(oAjax.responseText);
            } else {
                if (fnFaild) {
                    fnFaild(oAjax.status);
                };
            }
        }
    }
}

Ajax数据

数据类型
什么叫做数据类型——英语、中文
XML、Json
字符集
所有文件字符集相同

可芭乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——Ajax基础二

编写Ajax——1创建Ajax对象 ActiveXObject(“Microsoft.XMLHTTP”) XMLHttpRequest() 在IE6下不兼容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javasc
复制链接

扫一扫