Ajax请求的简单实例

服务器代码

返回的是json数据 {“id”:1,“name”:“aaabbb”}

Ajax代码

（1）原生的Ajax代码

<script>
	//1.创建对象
	const xhr=new XMLHttpRequest();
	xhr.responseType= 'json';
	//2.初始化  设置请求方法和url
	xhr.open('Get','http://localhost:8080/user?a=100');
	//3.发送
	xhr.send();
	//4.事件绑定处理返回结果
	//redaystate:0 1 2 3 4
	xhr.onreadystatechange = function(){
	    if(xhr.readyState === 4){
	        if(xhr.status === 200){
	            result.innerHTML=xhr.response.name;
	        }
	    }
	}
</script>

浏览器中点击按钮 处理结果：

（2）jquery库实现的Ajax代码

先导入jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

• get请求的代码

$.get('http://localhost:8080/user',{a:100},function(data){
         result.innerHTML=data.name;
})

• post请求的代码

// 第一个参数：url，第二个参数：请求的参数，第三个参数：回调，第四个参数是响应体类型
$.post('http://localhost:8080/user',{a:100},function(data){
         result.innerHTML=data.name;
},'json')

• 通用型方法

//此方法参数是一个对象,包含一些属性
$.ajax({
     //url
     url: 'http://localhost:8080/user',
     //参数
     data: {a:100},
     //请求类型
     type: 'GET',
     //成功的回调
     success: function(data){
        result.innerHTML=data.name;
     }
 })

浏览器中点击按钮 处理结果：

（3）Axios异步请求框架实现的Ajax代码

先导入axios

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.2/axios.min.js"></script>

• get请求的代码

//第一个参数是url，第二个参数是其他信息（请求参数信息，请求头信息..）
axios.get('http://localhost:8080/user',{
            params: {a:100},
            headers:{aa:22}
        }).then(value => {
            result.innerHTML=value.data.name;
        });

• post请求的代码

//第一个参数是url，第二个参数是请求体，第三个参数是其他信息（请求头信息..）
axios.post('http://localhost:8080/user',{
            username:'aaa',
            password:'123'
        },{
        	headers:{aa:22}
        }).then(value => {
            result.innerHTML=value.data.name;
        });

• 通用型方法

axios({
      //请求方法
      method: 'GET',
      //url
      url: 'http://localhost:8080/user',
      //请求参数
      params: {a:100}
 }).then(value => {
     result.innerHTML=value.data.name;
 });

浏览器中点击按钮 处理结果：

（4）fetch函数实现的Ajax代码

fetch('http://localhost:8080/user?a=100',{
            method: 'GET'
        }).then(value => {
        	//当服务器端返回的是json数据时
            return value.json();
        }).then(value => {
            result.innerHTML=value.name;
        });

浏览器中点击按钮 处理结果：

注意：发送Ajax请求必须是同源，即当前网页的url和ajax请求的目标资源的url之间，协议，域名，端口号必须完全相同。
跨域请求的解决方案有：jsonp或CORS。
其中CORS解决跨域：客户端还是发送Ajax请求，服务器端返回数据时要设置Access-Control-Allow-Orign响应头。