$.getScript(), $.getJSON(), ajax 跨域

326 阅读1分钟

1. jquery 中 ajax 操作封装的函数 -- $.getScript()

  • 语法:

    • $.getScript(URL, [data], [function (response, status) {}])
  • 作用含义:

    • 向指定的 URL 发起异步的 GET 请求, 请求参数放在 URL 后面; 服务器给出了成功的响应会自动执行 eval(XHR.responseText)
  • 使用限制

    • 要求服务器必须返回 application/javascript 类型的数据, 即使不是, 也会强制调用 eval(XHR.responseText) 进行执行; 而 $.get() 可以实现同样的功能, 却可以根据服务器端的响应头来决定是否调用 eval()

2. jquery 中 ajax 操作封装的函数 -- $.getJSON

  • 语法:

    • $.getJSON(URL, [data], [function (response, status, XHR) {}])
  • 作用含义:

    • 向指定的 URL 发起异步的 GET 请求, 请求参数放在 URL 后面; 服务器给出了成功的响应会自动执行 JSON.parse(XHR.responseText)
  • 使用限制:

    • 要求服务器端必选返回 application/json 类型的数据, 即使不是, 也会强制调用 JSON.parse(XHR.responseText) 进行执行; 而 $.get() 可以实现同样的功能, 却可以根据服务器端的响应头来决定是否调用 JSON.parse()

强调: $(selector).load(), $.get(), $.post(), $.getScript(), $.getJSON() 只能处理成功的响应消息, 如果服务器端返回了错误的消息( Ex: 404 ), 上述的 5 个函数不会有任何的错误提示 -> 因为没有相关的回调函数

3. 跨域

3.1. 跨域的定义

Cross Domain Request, 从一个资源请求另一个资源, 二者所在的请求地址不同 / 域名不同 / 端口号不同 / 请求协议不同 就会形成跨域

3.2. 浏览器允许的跨域请求的情形
  1. <img src='跨域图片允许' />
  2. <link href='跨域 CSS 允许' />
  3. <script src='跨域 JS 允许'></script>
  4. <iframe src='允许跨域访问'></iframe>
3.3. 浏览器禁止跨域访问的情形
  • XHR -> 浏览器基于安全考虑, 禁用了 XHR 的跨域请求( 其实服务器给出了响应消息, 但浏览器不让使用 )
3.4. 解决浏览器的 XHR 跨域请求限制方案
  • 修改响应消息头部 -> 添加 Access-Control-Allow-Origin 头部
  • 使用 JSONP
  • 其实还有很多方案
3.5. JSOP 详解
  • JSON: JavaScript Object Notation, 一种字符串数据格式

  • JSONP: JSON with Padding, 填充式 JSON, 与 JSON 是两码事, 是一种使用 JSON 数据的方式

    • JSONP 是专用于解决 XHR 跨域的一种手段, 基本原理: 使用动态创建的一个 script 标签代替 XHR 发起异步请求, 要求服务器必须返回 application/javascript 类型的数据, 立即在客户端执行 -> 要执行的函数体在客户端浏览器中声明

      • Ex:

        • 客户端
         // 准备回调函数
         function callbackFn(data) {
           console.log('服务器返回数据' + data)
         }
         // 创建动态 script 标签
         let dynamicScript = document.createElement('script')
         dynamicScript.src = "http://xxxxx.php"
         dynamicScript.async = true
         document.head.appendChild(dynamicScript)
        
        • 服务器端

           header('Content-Type: application/javascript; charset=UTF-8');
           $cb = $_REQUEST['callback'];
           $str = '{"name": "lcy", "age": 18}';
           echo $cb.'('.$str.')'
          
3.5.1. jquery 中如何使用 JSONP 发起异步请求
  1. $.getJSON()

    • 用途1: 使用 XHR 发起异步请求( 不能跨域 )

      • $.getJSON('xx.php', doResponse)
    • 用途2: 使用 JSONP 发起跨域请求

      • $.getJSON('http://跨域地址/xxx.php?callback=?', doResponse)
  2. $.ajax()

    • 用途1: 使用 XHR 发起异步请求( 不能跨域 )

      • $.ajax({})
    • 用途2: 使用 JSONP 泛起跨域请求

      • $.ajax({ dataType: 'jsonp' })