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

Posted 白与小寒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了正确而又严谨得ajax原生创建方式相关的知识，希望对你有一定的参考价值。

自己去封装一个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原生创建方式的主要内容，如果未能解决你的问题，请参考以下文章

原生ajax

原生Ajax书写

Ajax 片段元标记 - Googlebot 未读取页面内容

原生AJAX请求实例教程

Ajax 是啥? 如何创建一个Ajax？

原生JavaScript第八篇