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. 浏览器允许的跨域请求的情形
<img src='跨域图片允许' />
<link href='跨域 CSS 允许' />
<script src='跨域 JS 允许'></script>
<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 发起异步请求
-
$.getJSON()
-
用途1: 使用
XHR
发起异步请求( 不能跨域 )$.getJSON('xx.php', doResponse)
-
用途2: 使用
JSONP
发起跨域请求$.getJSON('http://跨域地址/xxx.php?callback=?', doResponse)
-
-
$.ajax()
-
用途1: 使用
XHR
发起异步请求( 不能跨域 )$.ajax({})
-
用途2: 使用
JSONP
泛起跨域请求$.ajax({ dataType: 'jsonp' })
-