ajax请求的使用

1.1 什么是ajax

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

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>