ajax(三) ajax工作方式

最新推荐文章于 2022-09-07 21:17:45 发布

YUEXILIULI

最新推荐文章于 2022-09-07 21:17:45 发布

阅读量181

点赞数 1

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

本文链接：https://blog.csdn.net/YUEXILIULI/article/details/102534756

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ajax工作方式

一、创建对象
XMLHttpRequest 对象用于在后台与服务器交换数据。
可以：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

//1.创建Ajax对象
//非IE6
//加不加window，代表的是变量或属性
if (window.XMLHttpRequest)
{
        var oAjax = new XMLHttpRequest();
}
else
{//IE6
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}

二、连接服务器
open(方法,文件名,传输方式)
同步：多件事一起事情一个个来
异步：一件一件来多件事一起

 oAjax.open('Get','/Home/AAA',true);//true,异步

三、发送请求

oAjax.send();

四、接收数据
oAjax.readyState //浏览器和服务器，进行到哪一步了
0（未初始化）还没调用 open()方法
1（载入）已调用 send(）方法，正在发送请求
2（载入完成） send(）方法完成，已收到全部响应内容
3（解析）正在解析响应内容
4（完成）响应内容解析完成，可以在客户端调用了

oAjax.onreadystatechange = function () {
if (oAjax.readyState == 4)
{//读取完成
if (oAjax.status == 200)//成功
{
	alert('成功');
}
else 
{
    alert('失败');
}};};

完整代码：

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            oBtn.onclick = function () {
                //1.创建Ajax对象
                //非IE6
                //加不加window，代表的是变量或属性
                if (window.XMLHttpRequest)
                {
                    var oAjax = new XMLHttpRequest();
                }
                else
                {//IE6
                    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //alert(oAjax);
                //2.连接服务器
                //open(方法,文件名,传输方式)
                oAjax.open('Get','/Home/AAA',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)//成功
                        {
                            alert('成功');
                        }
                        else {
                            alert('失败');
                        }

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

YUEXILIULI

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax(三) ajax工作方式

ajax工作方式一、创建对象XMLHttpRequest 对象用于在后台与服务器交换数据。可以：在不重新加载页面的情况下更新网页在页面已加载后从服务器请求数据在页面已加载后从服务器接收数据在后台向服务器发送数据//1.创建Ajax对象//非IE6//加不加window，代表的是变量或属性if (window.XMLHttpRequest){ var oAja...
复制链接

扫一扫

专栏目录