实现方法

原生的JS实现方法

GET请求

<script>
    document.querySelector('input').onclick = function(){
    //查找input标签并添加点击事件
        var xhr = new XMLHttpRequest();
        //创建异步对象
        xhr.open('get','URL?name='+value);
        //添加请求方式为get，URL为请求的地址(get请求数据写在URL后面)
        xhr.onreadystatechange = function(){
        //设置回调函数
            if (xhr.readyState==4&&xhr.status==200) {
            //readyState==4表示请求完成，数据都获取到了，status==200表示请求的页面一定存在
             console.log(xhr.responseText);
             //获取数据
                }
            }
        xhr.send(null);
        //请求发送主体，get请求为空或者写null
    }
</script>

POST请求

<script>
    document.querySelector('input').onclick = function () {
        //查找input标签并添加点击事件
        var xhr = new XMLHttpRequest();
        //创建异步对象
        xhr.open('post', 'URL');
        //添加请求方式为post，URL为请求的地址
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        //设置请求头(将Content-type的值设置为application/x-www-form-urlencoded才能实现提交数据)
        xhr.onreadystatechange = function () {
            //设置回调函数
            if (xhr.readyState == 4 && xhr.status == 200) {
                //readyState==4表示请求完成，数据都获取到了，status==200表示请求的页面一定存在
                console.log(xhr.responseText);
                //获取数据
            }
        }
        xhr.send('name='+value);
        //请求发送主体，post请求数据写在发送主体中，若无发送的数据则为null
    }
</script>

JQeury实现方法

$.ajax()
语法：$.ajax({键值对});

$.ajax({
	url:"xxx", // 请求路径
	type:"POST", //请求方式
	//data:"username=xxx&age=xxx",//请求参数
	data:{"username":"xxx","age"=xxx},
	success:function (data){
		alert(data)
	},//响应成功后的回调函数
	error:function(){
		alert("出错了！")
	},//如果请求响应出现错误，会执行的回调函数
	dataType:"text"//设置接收到的响应数据的格式
});