为什么ajax异步不利于SEO

推荐文档，见

https://blog.csdn.net/weixin_41975655/article/details/83149321

数据在服务端生成好，填充进入html模板，将完整的html内容(数据已经被装载)返回给用户浏览器展示；

异步ajax请求，动态加载请求数据，回调函数里面动态操作html内容；

搜索引擎(Google、Baidu...)爬取你的页面信息，建立全文检索，便于用户在 搜索引擎(百度一下) 检索定位你的网页(网站)；

搜索引擎蜘蛛定时爬取页面，获取到的基本是没有动态渲染数据的html静态页面，也就是说蜘蛛不会等待你ajax异步请求数据渲染页面完成，因为蜘蛛不知道你这个网站要多久才能渲染完成，蜘蛛不是浏览器，它不是实时等待的， 蜘蛛不执行ajax ( 用户操作则不同，因为用户进入网站，多少是会等待页面加载完成，然后看到完整的网页 )。

蜘蛛获取不到异步请求的页面数据，所以就算你这个网页最终会有 XX 关键字，而搜索引擎也不会针对 XX 关键字对你的网页进行收录建立索引；

一般没多大影响，对seo影响最大的是内容和外链。

只要内容好，搜索引擎和用户都喜欢，只要外链好质量高，对网站的权重提升效果就越好。

外链不太好控制，不过内容我们可以自己控制，主动的多创作优质内容，网站优化效果会慢慢起来的。

(异步的javascript和xml),ajax并不是一门新的技术，而是多种技术的组合（html,js,xml,css）用于快速的创建动态的网页，能够实现无刷新更新数据从而提高了用户体验

由客户端请求ajax引擎，在由ajax引擎请求服务器，服务器作出一系列的响应之后将结果返回给ajax引擎，由ajax引擎决定将这个结果写入到客户端的什么位置,从而实现了页面无刷新更新数据

XMLHttpReques

优点：能够减轻服务器的负担页面无刷新提高用户体验

缺点：不利于seo搜索引擎的优化

get和post是最常用的两种HTTP请求方法，前者用于获取数据，后者用于修改数据。来自 w3 的对比：

方法GET POST

后退按钮/刷新无害数据会被重新提交（浏览器应该告知用户数据会被重新提交）。

书签可收藏为书签不可收藏为书签

缓存能被缓存不能缓存

编码类型application/x-www-form-urlencodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。

历史参数保留在浏览器历史中。参数不会保存在浏览器历史中。

对数据长度的限制是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。无限制。

对数据类型的限制只允许 ASCII 字符。没有限制。也允许二进制数据。

安全性与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。

可见性数据在 URL 中对所有人都是可见的。数据不会显示在 URL 中。

注：关于URL 的长度是受限制的这一点是不对的，HTTP协议并没有限制URI的长度，具体的长度是由浏览器和系统来约束的。

     // 1 .创建Ajax对象

        let xhr = new XMLHttpRequest()

        console.log(xhr.readyState)//0 初始值

        // 2明确请求地址和请求方式,初始化请求

        // 请求方式有四种： GET,POST,PUT,DELETE 常用的

        // 请求直至包括： 真实的后台接口， 本地的JSON文件， 注意： 支持本地JSON文件只支持GET

        xhr.open('GET', './stus.json')

        console.log(xhr.readyState)//1  发送请求

        //3 发送请求

        xhr.send()

       4.  // 设置请求头信息，定义Content-Type的格式

            // application/x-www-form-urlencoded表示参数数据的格式是url格式

            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

            // application/json表示参数数据的格式是json格式

            xhr.setRequestHeader('Content-Type','application/json')

        // 5 注册一个onreadystatechange，监听回传的值

        xhr.onreadystatechange = function() {

            //readyState读取状态值变为2，表示请求发送成功

            //readyState读取状态值变为3，表示服务器成功接收到请求并开始响应

            //readyState读取状态值变为4，表示服务器响应完成

            console.log(xhr.readyState)

            // 请求已经完成

            if (xhr.readyState === 4) {

                // status响应状态码：200表示成功，404表示资源不存在，500是服务器错误

                if (xhr.status === 200) {

                    // JSON.parse()方法，用于将JSON格式的字符串转为js对象

                    let date = JSON.parse(xhr.responseText)

                    console.log(date)

                }

            }

        }

---