jquery中的ajax 请求的步骤？怎么解决跨域

发表于 | 分类于

jquery 中ajax 请求的步骤

AJAX 技术

即Asychronous Javascript And XML ,AJAX 并非是一门新的语言 而是对现有的技术的综合利用

  • 本质 上是 HTTP协议的基础上以异步的方式通过js的XMLHttpRequest对象与服务器进行通信

  • 作用 ： 可以在页面不刷新的情况下，请求服务器，局部更新页面的数据

    $.ajax()

    参数列表

参数名称 描述 取值 示例
url 接口地址 url:'01.index'
type 请求方式 get/post type:’get’
timeout 超时时间 单位毫秒 timeout：2000
dataType 服务器返回的格式 json/xml/text（默认） data:”json”
data 发送的请求数据 对象 data:{name:'zs',age:18}
beforeSend 调用前的回调函数 function(){} beforeSend:function(){console.log('发送前的数据')}
success 成功的回调函数 function(info){} success:function(info){console.log(info)}
error 失败的回调函数 function(error){} error:function(data){console.log('发送失败')}
complete 完成后的回调函数 function(){} complete:function(){} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$.ajax({
    type:"get/post",//请求类型
  	url:'01.php',//请求地址
  	data:{
    name:'zs',
  	age:18
},//请求数据
  dataType:'text',
  timeout:2000,//设置超时时间
  beforeSend:function(){
      console.log("发送前的数据");
  },
  success:function(info){
      console.log(info);
  },
  error:function(error){
      console.log(error);
  },
  complete:function(){
      console.log("请求完成");
  }
  
})

怎么解决跨域问题

在跨域的情况下，不能发送 ajax请求 （不能使用XMLHttpRequest 对象发送请求，会被浏览器限制）就算你将dataType 设置为jsonp，仍然不能使用XMLHttpRequest 对象发送请求，而是使用其他的方式来请求的服务器

//这种方式 叫JSONP json with padding 用json 进行填充

跨域的情况下 不能使用XMLHttpRequest 对象

jsonp 的原理

本质是上是使用了script标签上的src 属性请求的服务器

  1. 前端要准备好一个已经定义好的函数

  2. 用script标签 把方法名字传递给后台

  3. 后台向获取的方法名中 填充json数据，并且会返回 已经拼接好 数据的 方法调用say({“name”:”zs”})

  4. 前端接受到后台返回的方法调用，会立即当做js执行 就会拿到数据

    • jsonp的注意点
    • jsonp 只能发送 GET请求
    • jsonp 需要前后台配合完成

    跨域

    跨域能请求图片

    1
    2
    3
    4
    5
    6
    7
    8
    9

    // 跨域请求图片
    <img src="http://user.jpg" alt="">
    //跨域能请求js文件
    <script src='http://www.test.com/cross/corss.js'></script>

    <!--标签的src link属性 具备跨域请求资源的能力-->
    <!--src 可以跨域请求后台的处理程序-->
    <script src="http://www.test.com/cross/corss">

    ​