使用jQuery发送GET请求

const result=document.getElementById("result");
$("button").eq(0).click(function(){
    $.get("http://127.0.0.1:8000/jQuery-server",{a:100,b:200},function(data){
     console.log(data)
     result.innerText=data.name
    },'json')

})

server.js

// jQuery服务
app.all('/jQuery-server',(require,response)=>{
      // 设置响应头
      response.setHeader('Access-Control-Allow-Origin','*');  //设置允许跨域
      response.setHeader('Access-Control-Allow-Headers','*');  //表示所有类型的头信息我都可以接受
      // response.send("hello jQuery");
      const data={
          name:"小太阳"
      };
      response.send(JSON.stringify(data))

  });

使用AJAX发送POST请求

   $("button").eq(1).click(function(){
        $.post("http://127.0.0.1:8000/jQuery-server",{a:100,b:200},function(data){
            console.log(data)
        })
    })

jQuery通用型AJAX

 $("button").eq(2).click(function(){
    $.ajax({
        // 请求地址
        url:"http://127.0.0.1:8000/jQuery-server",
        // 设置参数
        data:{a:1,b:2},
        // 请求类型
        type:"GET",
        // 响应体结果   把字符串转化成一个对象
        dataType:'JSON',
        // 成功回调
        success:function(data){
            console.log(data);
            result.innerText=data.name;   //获取name值
        },
        timeout:2000,
        // 失败回调
        error:function(){
            console.log("出错啦")
        }
    })
})

axsio发送AJAX请求

axios的AJAX请求文档：github.com/axios/axios…

数据返回和处理方式和jQuery不太一样，jQuery使用的是回调函数，axios基于的是 Promise。返回一个对象，data是一个响应体解析过后的结果自动转成一个对象

GET请求发送

const btn=document.querySelectorAll("button");
const result=document.getElementById("result");
  //    配置baseURL
axios.defaults.baseURL="http://127.0.0.1:8000"
btn[0].onclick=function(){
    axios.get("/axios-server",{
        params: {       //设置URl参数
        id: 12345,
        vip:2
        },
        // 设置请求头信息 
        headers:{
            name:"xiaotaiy",
            age:20
        }
    }).then(value=>{
        console.log(value)
        result.innerText=value.data.name
    })
}

发送POST请求

在POST请求中，第一个参数是URL，第二个参数是data（请求体），第三个参数是其他

btn[1].onclick=function(){
  // {user:"admin",id:"admin"}  请求体信息
  axios.post('/axios-server',{user:"admin",id:"admin"},
  {
      // 设置URL参数
      params:{
          id:12,
          vip:2
      },
      // 设置请求头信息
      headers:{
          name:"cai",
          age:22
      }
  })
}

AXIOS通用方式发送请求

btn[2].onclick=function(){
axios({
    method:"post",
    url:"/axios-server",
    params:{
        id:22,
        vip:33
    },
    headers:{
        name:"caicai",
        sge:18
    },
    data:{
        user:"admin",
        userID:"admin"
    }
}).then(response=>{
    console.log(response);
    result.innerText=response.data.name;
})
}

使用fetch()函数发送AJAX请求

fetch函数属于全局对象的，可以直接去调用，返回的结果是一个promise对象。接收两个参数，第一个是URL，第二个是可选的配置项。第一个参数除了可以写一个URL之外还可以写一个Request（请求）对象。

const btn= document.querySelector("button");
btn.onclick=function(){
    fetch("http://127.0.0.1:8000/fetch-server",{
        // 请求方法
        method:'POST',
        // 设置请求头
        headers:{
            name:"xiaocai"
        },
        // 设置请求体
        body:"user=admin&password=admin"
    }).then(response=>{
        // return response.text();   //返回文本 
        return response.json();         //返回json对象
    }).then(response=>{
        console.log(response)
    })
}

同源策略

所谓同源策略就是域名、端口号、协议必须完全相同，违背同源策略的就是跨域

AJAX在发送请求的时候是默认遵循同源策略的

如何解决跨域 JONSP

JSONP是一个非官方的跨域解决方案，只支持get请求

JSONP是怎么工作的：在网页有一些标签自身就支持跨域的，比如：img、link、iframe、script。JSONP就是用script标签发送请求的