ajax请求的基本使用

Ajax原生的实现方式

xhr = new XMLHttpRequest() : 通过new它可以创建一个ajax对象【兼容IE需要创建ActiveXObject】

2.1、方法(函数)
　　xhr.open(methodType,methodUrl,isSys) -> 准备请求的方式与路径
　　methodType:请求的方式(GET/POST)
　　methodUrl:请求的路径
　　isSys:是否异步(默认为true)
　　xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
　　设置请求头的一个类型，如果是POST请求，一定要加这一句，才可以把数据传到后台
　　位置:open之后，send之前
　　xhr.send(varBody) -> 发送请求
　　varBody:POST请求传参(key=value&key=value&…)
2.2、 属性
xhr.status -> 请求状态(200代表成功)
xhr.readyState -> 响应状态(4代表响应完成)
xhr.responseText -> 获取返回的数据(字符串)

原生js编写ajax请求的步骤:

1.创建一个核心对象 XMLHttpRequest

2.编写一个回调函数

3.编写请求方式和请求的路径(open操作)

4.发送请求(send操作)

Ajax状态码
从Ajax对象（xhr）创建开始，它的所有操作都被监听
　　xhr本身是有一个状态的概念，这个状态:readyState
　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
　　1 (初始化) 对象已建立，尚未调用send方法
　　2 (发送数据) send方法已调用，但是当前的状态及http头未知
　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
　　4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
　　*/

Ajax的基本使用

<script>
        document.querySelector('#btn').onclick = function () {
            //ajax向服务器发请求要依赖XMLHttpRequest对象,
            //这个对象一开始是没有的,要实例化出来一个
             //1.创建ajax对象
            var xhr = new XMLHttpRequest();
            //2.规定请求的方式和请求的地址
            xhr.open('get', 'https://autumnfish.cn/api/joke');
             //3.注册回调函数
            xhr.onload = function () {
                //请求响应成功后执行
                document.write(xhr.response);
            }
            //4.发送请求
            xhr.send();
        }
    </script>

Ajax-get请求

<script>
    //ajax-get传递参数
    //请求的地址?参数名=传递的数据 
    //1.创建xhr对象
    var xhr = new XMLHttpRequest();
    //2.设置请求方式和地址(?key=value)
    xhr.open('get','https://autumnfish.cn/api/hero/simple?name=霞');
    //3.注册回调函数
    xhr.onload = function(){
       document.write(xhr.response);
    }
     //4.发送请求
    xhr.send();
</script>

Ajax-post请求

<script>
 		//1.创建xhr对象
        var xhr = new XMLHttpRequest();
        //2.设置请求方式和请求地址
        xhr.open('post','https://autumnfish.cn/api/user/register');
        //3.设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //4.注册回调函数
        xhr.onload = function(){
            document.write(xhr.response);
        }
        //5.发送请求(传递的数据通过send()方法来发送)
        xhr.send('key=value');
 </script>

使用jQuery来发送ajax请求

<script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $.ajax({
            	// 1 请求方式 post或者get
                type:'get',
                // 2 请求地址
                url:'https://autumnfish.cn/api/cq/page',
                //3 参数
                data:{
                    query:'女',
                    pageNum:2,
                    pageSize:5
                },
                // 4 回调函数
                success:function(backData){
                    console.log(backData);
                }
            });
        });
    </script>