Ajax请求的使用

AJAX介绍

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

1.XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

2.常用请求使用

2.1使用get发送无参请求

<button onclick="getData()">获取数据</button>
<script>
    function getData(){
        // 发送请求
        // 1.使用XMLHttpRequest创建一个实例
        var request=new XMLHttpRequest();
        // 2.使用open方法设置和服务器的交互信息
        request.open('get','https://api.muxiaoguo.cn/api/lishijr');
        // 3.设置requestHeader()
        // 在AJAX中，如果需要像HTML表单那样POST数据，需要使用setRequestHeader()方法来添加HTTP头
        // 4.send()--设置发送的数据，开始和服务器端交互
        // 调用send()之后，请求就会发送到服务器
        request.send();

        // 获取响应，注册事件
        request.onreadystatechange=function(){
            if(request.readyState===4&&request.status===200){
                // console.log(request.responseText);
                var res=JSON.parse(request.responseText);
                console.log(res);
                // 根据数据添加对应的节点
                for(var arrIndex in res.data){
                    // 创建一个节点
                    var p=document.createElement('p');
                    p.innerHTML=res.data[arrIndex].title;
                    document.body.appendChild(p);
                }
            }
        }
}
</script>

2.2使用get发送有参请求

<!-- 在头部引入qs序列化工具，本地引入或在线引入 -->
<script src="./qs.js"></script>

<button onclick="getParams()">获取有参get请求</button>
<script>
    function getParams(){
        var request=new XMLHttpRequest();
        var params = {
            city: '苏州',
            type: 1
        };
        // 参数序列化 要先引入QS序列化工具
        var qs=Qs;
        // 将参数拼接到url后面
        request.open('get', 'https://api.muxiaoguo.cn/api/tianqi?' + qs.stringify(params));
        // 发送请求
        request.send();
        // 获取响应
        request.onreadystatechange=function(){
            if(request.readyState===4&&request.status===200){
                // console.log(request.responseText);
                var res=JSON.parse(request.responseText);
                console.log(res);
            }
        }
	}
</script>

2.3使用post发送无参请求

<button onclick="postNo()">post无参请求</button>
<script>
    function postNo(){
        var request=new XMLHttpRequest();
        request.open('post','https://api.muxiaoguo.cn/api/Gushici');
        request.send();
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                console.log(request);
            }
        }
}
</script>

2.4使用post发送有参请求

<button onclick="login()">登录</button>
<script>
    function login(){
        var request=new XMLHttpRequest();
        request.open('post','http://47.100.26.102:8888/user/login');
        var params={
            password:'123321',
            username:'admin1'
        };
    	// 设置请求头
        // 登录接口Content-type为json格式
        request.setRequestHeader('Content-type','application/json','charset=utf-8');
    	// 参数放在send()方法中
        request.send(JSON.stringify(params));
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                console.log(request.responseText);
            }
        }
}
</script>

// 常用的数据格式(编码可带可不带)
// 1.发送json格式数据
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
// 2.发送表单数据
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
// 3.发送纯文本(不指定Content-type时，此是默认值)
request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');
// 4.发送html文本
request.setRequestHeader('Content-type', 'text/html; charset=utf-8');

2.5使用jQuery发送请求

var baseURL='http://47.100.26.102:7788';
var user={
    username:'admin',
    password:'123456'
};
$('.login').click(function(){
    $.ajax({
        // 请求路径
        url:baseURL+'/user/login',
        // 请求方式
        method:'post',
        // 请求携带的参数
        data:JSON.stringify(user),
        // 设置请求头
        headers:{
            // 设置json
            'Content-Type':'application/json'
        },
        // 成功的回调函数
        success:function(res){
            console.log(res);
        },
        // 失败的回调函数
        error:function(err){
            console.log(err);
        }
    });
}