2_原生AJAX

本文主要是介绍2_原生AJAX，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、Asynchronous JavaScript And XML ，异步的JS和XML

可以在浏览器中向服务器发送异步请求，最大的优势在于无需刷新获取数据

2、AJAX的特点

2.1 优点

1. 无需刷新页面就可以和服务器进行通信
2. 允许根据用户事件来更新部分页面的内容

2.2  缺点

1. 没有浏览历史，不能回退
2. 存在跨域问题
3. SEO（Search Engine Optimization）不友好（搜索引擎优化不好，vue中怎么解决的来着，忘记了，需要再看一下）

3、AJAX的使用

3.1 核心对象

XMLHTTPRequest，　　AJAX所有操作均通过该对象进行

3.2 使用步骤

3.2.1GET

       btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // change  改变
            xhr.onreadystatechange = function(){
                //判断 (服务端返回了所有的结果)
                 //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{}
                }
            }
        }

3.2.2POST

 //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置类型与 URL
            xhr.open('POST', 'http://127.0.0.1:8000/server');

            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//固定写法
            xhr.setRequestHeader('name','atguigu');//自定义
            //3. 发送
            // xhr.send('a=100&b=200&c=300');   POST请求必须传参
            xhr.send('a:100&b:200&c:300');
            // xhr.send('1233211234567');
            
            //4. 事件绑定/接收响应
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });

4、AJAX请求状态

使用xhr.readyState 来查看当前请求状态

0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。

1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader() 设定HTTP

2: 表示 send()方法已经执行，并且头信息和状态码已经收到。

3: 表示正在接收服务器传来的 body 部分的数据。

4: 表示服务器数据已经完全接收，或者本次接收已经失败了

这篇关于2_原生AJAX的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！