欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AJAX之原生ajax

程序员文章站 2022-07-12 19:10:07
...

AJAX(Asynchronous JavaScript And XML)即异步javascript和xml,并不是一门语言,而是一种用于创建快速动态网页的技术。无需重新加载整个网页的情况下,即可更新部分网页。

原生ajax的四步操作:
* 创建核心对象
* 使用核心对象打开服务器之间的连接
* 发送请求
* 注册监听,监听浏览器的响应
核心对象类: XMLHTTPRequest
open(请求方式,请求的地址,是否需要异步)
send(请求体)
onreadystatechange:监听事件,它会在核心对象的状态发生改变的时候自动被调用
readyState:当前核心对象的状态,取值范围为1~4,4表示服务器相应结束
status:服务器响应的状态码,只有当服务器响应结束之后才会有,200表示请求成功
responseText:获取服务器响应的响应体
现在来看看原生ajax怎么写吧:

1.get方法
<script type="text/javascript">
    window.onload = function(){
        //获取按钮标签对象
        var btn = document.getElementById("btn");
        //绑定事件
        btn.onclick = function(){
            //请求数据
            //1.创建请求核心对象
            var xhr = null; //处理兼容问题

            //异常处理:try-catch
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.与服务器建立连接
            //get的特点:将数据拼接到url中
            //请求方式,请求的服务器地址,是否需要异步
            //注意:如果数据中有中文,则向服务器发送之前需要进行编码【字符类型 的数据转化为字节类型的数据】
            xhr.open("get", "http://localhost/ajaxGet.php?usr=" + encodeURI("示例") + "&age=20&pwd=abc123", true);

            //3.发送连接请求
            xhr.send();

            //4.监听,监听服务器的响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        alert("数据请求成功!");
                        alert(xhr.responseText);
                    }else{
                        alert("数据请求失败!");
                    }
                }
            }
        }
    }
</script>
2.post方法
<script type="text/javascript">
    window.onload = function(){
        //获取按钮标签对象
        var btn = document.getElementById("btn");
        //给按钮绑定事件
        btn.onclick = function(){
            //请求数据
            //1.创建请求核心对象
            //处理兼容问题
            var = xhr = null; //处理兼容问题

            //异常处理
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2.与服务器建立连接
            //请求方式,请求的服务器地址,是否需要异步
            //注意:如果数据中有中文,则向服务器发送之前需要进行编码【字符类型的数据转换为字节类型的数据】
            xhr.open("post", "http://localhost/ajaxpost.php", true);
            //3.发送连接请求
            //设置数据的编码格式,固定写法【请求头】
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            //设置需要发送的数据【请求体】
            var str = "user=leesoar&age=20&pwd=123";
            xhr.send(str);
            //4.监听,监听服务器的响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        alert("数据请求成功!");
                        alert(xhr.responseText);
                    }else{
                        alert("数据请求失败!");
                    }
                }
            }
        }
    }
</script>
相关标签: Web AJAX