尚硅谷ajax学习记录（二）

一、jQuery发送ajax请求

<script crossorign="anonymous" src="....."></script>
//发送请求  四个参数
$.get('http://127.0.0.1:8000/jquery-server',{a:100, b:200},function()=>{data
	console.log(data);
},'json')

二、jQuery通用方法发送ajax请求

常用设置

$.ajax({
   url:'http://127.0.0.1:8000/server',
   //参数
   data:{a:100, b:200},
   //请求类型
   type:'GET',
   //响应体结果
   dataType:'json',
   //成功的回调
   success:function(data){

   },
   //超时时间
   timeout:2000,
   error:fucntion(){
     console.log('出错')
   }
   //头信息
   headers:{
     c:300,
     d:400
   }
 })

三、Axios发送ajax请求

常用设置

btns[0].onclick = function(){
  //GET请求
  axios.get('/axios-server',{
    //url参数
    params:{
      id:100,
      vip:7
    },
    //请求头信息
    headers:{
      name:'atguigu',
      age:20
    }
  })

• axios函数发送ajax请求

axios({
 //请求方法
 method:'POST',
 //url
 url:'axios-server',
 //url参数
 params:{
   vip:10,
   level:30
 },
 //头信息
 headers:{
   a:100,
   b:200
 },
 //请求体参数
 data:{
   username:'admin',
   password:'admin'
 }
}).then(response=>{
 console.log(response);
 //响应状态码
 console.log(response.status);
 //响应状态字符串
 console.log(response.statusText);;
 //响应头信息
 console.log(response.headers);
 //响应体
 console.log(response.data)
})

• fetch函数发送ajax请求

fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
  //请求方法
  method:'POST',
  //请求头
  headers:{
    name:'atguigu'
  },
  //请求体
  body:'username=admin&password=admin'
}).then(response=>{
  // return response.text();
  return response.json()
}).then(response=>{
  console.log(response)
})

四、跨域

1.同源策略

• 同源： 协议、域名、端口号 必须完全相同。
• 违背同源策略就是跨域。

2.如何解决跨域

• jsonp解决

返回结果为一个函数调用，函数参数为返回结果数据

//jsonp服务
app.all('/jsonp-server',(request,response)=>{
    const data = {
        name:'xiaoming'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`)
})

//需要在前端定义函数

<script>
  function handle(data){
    // .....处理数据
  }
</script>
<script src="http://127.0.0.1/jsonp-server"></script>

3.jsonp实践

4.jQuery发送jsonp请求

$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callbacck=?',function(data){

})

接收callback参数

let cb = request.query.callback

五、CORS（跨域资源共享）

1.CORS是什么？

CORS（Cross-OriginResourceSharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

2.CORS怎么工作的？

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。

• 设置响应头

response.setHeader("ACCESS-Control-Allow-Origin","*");   
response.setHeader("ACCESS-Control-Allow-Header","*"); 
response.setHeader("ACCESS-Control-Allow-Method","*");