首页 > 代码库 > 正确而又严谨得ajax原生创建方式

正确而又严谨得ajax原生创建方式

2024-09-05 01:41:26   218人阅读

自己去封装一个xhr对象是一件比较麻烦的事情。其实也不麻烦，注意逻辑和一个ie6兼容方案（可无），和一个304 其他2开头的status都可以就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
document.onclick = function (){
    var xhr = null ;
    if(window.ActiveXObject){
        xhr = new ActiveXObject() ;
    }else if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status<300){
                console.log(1)
                control(xhr.responseText)
            }
        }else if(xhr.status == 304){
            control(xhr.responseText)
        }else{
　　　　　　　console.log("404 not found")
　　　　　}
    }

    function control(data){
        console.log(data)
    }
    xhr.open("get","test.php",true);
    xhr.send(null)
}
</script>
</html>

 呐 。。 这段代码没什么可以看的

知识点：

　　1 . 兼容ie6 7 的window.ActiveXObject ；

　　2 . 熟悉整个流程　创建xhr => xhr.onreadystatechange => xhr.readystate => xhr.status =>callback   创建好xhr和监听过程 然后open("get","url",true) 然后send(data)

 　  3 . 切记 1 . status不是必须200，只要2开头的都可以　　2 . status 304是一个好的征兆，304表示请求资源没有修改, 可以直接使用浏览器缓存.如果一个网站被搜索引擎抓取的次数以及频率越多那么他是越有利于排名的，但是如果你的网站出现太多的304，那么一定会降低搜索引擎的抓取频率以及次数，从而让自己的网站排名比别人落一步

 　　

 

正确而又严谨得ajax原生创建方式


联系
我们