ajax复习

最新推荐文章于 2022-02-18 16:26:32 发布

可了不得

最新推荐文章于 2022-02-18 16:26:32 发布

阅读量195

点赞数

分类专栏： javascript 文章标签： javascript ajax php xmlhttprequest 异步

本文链接：https://blog.csdn.net/yc2222/article/details/78552771

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

Ajax：Asynchronous JavaScript XML ,这一技术的核心是XMLHttpRequest对象（XHR），可以用一异步的方式从服务器取得更多的信息，可以不必刷新页面也能取得新数据，即使用XHR对象取得新数据，然后再通过DOM将数据插到页面中，ajax中虽然有xml的缩写，但是ajax和数据格式无关。

首先兼容性一直都是前端的头疼之事，在ajax中同样有对浏览器的判断IE7+。firefox，Opera，chrome，safari都支持原生的XHR对象：

    if(typeof XMLHttpRequest!="undefined"){
       return new XMLHttpRequest(); 
    }else if(typeof ActiveXObject!="undefined"){
        //....这里面有很多的版本选择，高级书上用的是一个数组存放

或者是用：

navigator.userAgent.indexof("MSIE")>=

userAgent可以给我们返回你使用的浏览器。

或者是：

    var xhr;
if(window.XMLHttpRequset){
    xhr=new XMLHttpRequest();
}else{
    xhr=new ActiveXObject("Microsoft.XMLHTTP")
}

其实之后写代码的时候大部分都是百度一下复制过来的，因为太长了又没什么用，再说了jquery中有$ajax函数直接都不用判断。

同步和异步之间差了一个ajax engine ，传统的http请求就是一个请求一个响应，二ajax方式多了一个引擎，客户端先把请求给引擎，有引擎去请求url（服务器上的资源），就是你干你的，我干我的。这样就实现了异步。

js的函数有很多也是异步的，这样就解决了我们js的阻塞。
接下来我们就是要打开url的连接调用一个open方法，他接受三个参数，要发送的请求类型，请求的url和表示是否异步发送请求的布尔值。现在并不是真正的发送，而是启动一个请求已备发送。之后写一个回调函数，意思是请求的url给我响应，收到响应之后第一步就是检查status属性，以用来确定相应已经成功返回，200就是成功的标志，接下来也要判断XHR对象的readystate属性，可取值是0,1,2,3,4，只要是readystate属性的值有一个值变成另一个值，都会触发一次readystatechange事件，我们一般就是判断一下是不是4，因为4是已经接受全部的响应数据，可以在客户端使用。最后我们要写send方法，这个方法要接收一个参数，即要作为请求主体发送的数据。get和post的参数不同。调用send之后请求就别分派到服务器上啦。

高级的书上说最好是先判断在写open方法（确保跨浏览器的兼容性），可是在我上学的时候老师所讲和一些教程都是用的先open，所以如果有阅读的人，请自行选择。

这里面一会儿会写一个例子，不过要知道php：正好也简单的复习一下php，动态网页编程技术，php是运行字啊web应用服务器上的，不可以双击运行，因为浏览器上没有解释php代码的解释器，只有js的解释器。web应用服务器就是web Application Server；

下面是一个简单的例子用来学习php和ajax的get方法：

<body>
<div id="msg"></div>
<input type="text" id="username" name="username">
<button id="validatebtn">用户名是否重复</button>
<script>
    window.onload = function () {
        document.getElementById("validatebtn").onclick = function () {

            //        ajax实现
            var xhr;
            //判断版本
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //xhropen
            var un = document.getElementById("username");
            var url = "validate.php?username=" +encodeURI(un.value);
            xhr.open("GET", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var obj=JSON.parse(xhr.responseText);
                    document.getElementById("msg").innerHTML=obj.msg;//现在获取了值之后
                    if(obj.flag==1){
                        document.getElementById("msg").style.color="red";
                    }else{
                        document.getElementById("msg").style.color="green";
                    }
                }
            }
            xhr.send(null);
        }

    }
</script>
</body>

echo urldecode($_REQUEST["username"]);
if($_REQUEST["username"]=="admin"){
    echo '{"msg":"用户名重复","flag":"1"}';
}else{echo '{"msg":"用户名可用","flag":"0"}';
}

现在是post的实现方法其中的html，php代码不变：

<script>
    window.onload = function () {
        document.getElementById("validatebtn").onclick = function () {

            //        ajax实现
            var xhr;
            //判断版本
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //xhropen
            var un = document.getElementById("username");
            var url = "validate.php" ;
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var obj=JSON.parse(xhr.responseText);
                    document.getElementById("msg").innerHTML=obj.msg;//现在获取了值之后
                    if(obj.flag==1){
                        document.getElementById("msg").style.color="red";
                    }else{
                        document.getElementById("msg").style.color="green";
                    }
                }
            }
            xhr.send("username="+encodeURI(un.value));
        }

    }
</script>

可了不得

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax复习

Ajax：Asynchronous JavaScript XML ,这一技术的核心是XMLHttpRequest对象（XHR），可以用一异步的方式从服务器取得更多的信息，可以不必刷新页面也能取得新数据，即使用XHR对象取得新数据，然后再通过DOM将数据插到页面中，ajax中虽然有xml的缩写，但是ajax和数据格式无关。首先兼容性一直都是前端的头疼之事，在ajax中同样有对浏览器的判断IE
复制链接

扫一扫