ajax的使用步骤

最新推荐文章于 2022-09-12 20:02:04 发布

catchRun

最新推荐文章于 2022-09-12 20:02:04 发布

阅读量527

点赞数

文章标签： ajax xmlhttprequest

本文链接：https://blog.csdn.net/catchRun/article/details/78389004

版权

ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）; 是指一种创建交互式网页应用的网页开发技术。下面为大家介绍使用ajax的基本步骤。

1、创建XMLHttpRequest对象

	var xhr = new XMLHttpRequest();

2、准备发送

	xhr.open();

3、执行发送

	xhr.send();

4、指定回调函数

	xhr.onreadystatechange = functiion(){};

下面以一个post请求小案例为例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>post请求案例</title>
    <script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var uname = document.getElementById('username').value;
            var pw = document.getElementById('password').value;

            // 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();//标准
            }else{
                xhr = new ActiveXObject("Microsoft. XMLHTTP");//IE6
            }
            // readyState=0表示xhr对象创建完成
           
            // 2、准备发送
            /*
            参数一：请求方式（get获取数据；post提交数据）
            参数二：请求地址
            参数三：同步或者异步标志位，默认是true表示异步，false表示同步
            
            post请求参数通过send传递，不需要通过encodeURI()转码
            必须设置请求头信息
            */
            var param = 'username='+uname+'&password='+pw;
            xhr.open('post','04post.php',true);
            // 3、执行发送动作
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(param);//post请求参数在这里传递，并且不需要转码
            // 4、指定回调函数
            // readyState=1表示已经发送了请求
        
            // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
            xhr.onreadystatechange = function(){
                /*
                readyState:
                2 浏览器已经收到了服务器响应的数据
                3 正在解析数据
                4 数据已经解析完成，可以使用了
                */
            
                // 4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的
                if(xhr.readyState == 4){
                    // http的常见状态码
                    /*
                    200表示响应成功
                    404没有找到请求的资源
                    500服务器端错误
                    */
                    // 200表示服务器返回的数据是正常的，不是200的话表示数据是错误的
                    if(xhr.status == 200){
                        // 这里的200表示数据是正常的
                        alert(xhr.responseText);
                        // xhr.responseXML
                    }
                }
            }
            
        }
    }
    </script>
</head>

<body>
    <form>
        用户名：
        <input type="text" name="username" id="username"><span id="info"></span>
        <br> 密码：
        <input type="text" name="password" id="password">
        <input type="button" value="登录" id="btn">
    </form>
</body>

</html>

get请求方式案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>get请求案例</title>
    <script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var uname = document.getElementById('username').value;
            var pw = document.getElementById('password').value;

            // 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();//标准
            }else{
                xhr = new ActiveXObject("Microsoft");//IE6
            }
            // 2、准备发送
            /*
            参数一：请求方式（get获取数据；post提交数据）
            参数二：请求地址
            参数三：同步或者异步标志位，默认是true表示异步，false表示同步

            如果是get请求那么请求参数必须在url中传递
            encodeURI()用来对中文参数进行编码，防止乱码
            */
            var param = 'username='+uname+'&password='+pw;
            xhr.open('get','03get.php?'+encodeURI(param),true);
            // 3、执行发送动作
            xhr.send(null);//get请求这里需要添加null参数
            // 4、指定回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        alert(xhr.responseText);
                    }
                }
            }
            
        }
    }
    </script>
</head>

<body>
    <form>
        用户名：
        <input type="text" name="username" id="username"><span id="info"></span>
        <br> 密码：
        <input type="text" name="password" id="password">
        <input type="button" value="登录" id="btn">
    </form>
</body>

</html>

以上就是ajax的使用几个基本步骤，如有不同看法欢迎前来讨论！

catchRun

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
ajax的使用步骤

ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）; 是指一种创建交互式网页应用的网页开发技术。下面为大家介绍使用ajax的基本步骤。1、创建XMLHttpRequest对象2、准备发送3、执行发送4、指定回调函数
复制链接

扫一扫