持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

4. jQuery中的AJAX

4.1 get 请求

$.get(url, [data], [callback], [type])

url:请求的URL 地址
data:请求携带的参数
callback:载入成功时回调函数
type:设置返回内容格式，xml, html, script, json, text, _default

4.2 post 请求

$.post(url, [data], [callback], [type])

url:请求的URL 地址
data:请求携带的参数
callback:载入成功时回调函数
type:设置返回内容格式，xml, html, script, json, text, _default

4.3 通用方法

$.ajax({ // url url: '<http://127.0.0.1:8000/jquery-server>',
// 参数 data: {a:100, b:200},
// 请求类型 type: 'GET', 
// 响应体结果 dataType: 'json',
// 成功的回调 success: function(data){console.log(data);}, 
// 超时时间 timeout: 2000, 
// 失败的回调 error: function(){console.log('出错拉~');}, 
// 头信息 headers: { c: 300, d: 400 } })

5. 跨域

5.1 同源策略

同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
同源：协议、域名、端口号必须完全相同
跨域：违背同源策略就是跨域

5.2 如何解决跨域

5.2.1 JSONP

1) JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get 请求。

2) JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用script 标签的跨域能力来发送请求的。

3) JSONP 的使用

1.动态的创建一个script 标签

var script = document.createElement("script");

2.设置script 的src，设置回调函数

script.src = "<http://localhost:3000/testAJAX?callback=abc>";
function abc(data) { alert(data.name); };

3.将script 添加到body 中

document.body.appendChild(script);

4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) { console.log("收到请求"); 
var callback = req.query.callback; 
var obj = { name:"孙悟空", age:18 } res.send(callback+"("+JSON.stringify(obj)+")"); });

4) jQuery 中的JSONP

5.2.2 CORS

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

1) CORS 怎么工作的？

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

2) CORS 的使用

主要是服务器端的设置：

 router.get("/testAJAX" , function (req , res) 
 { //通过res 来设置响应头，来允许跨域请求 
 //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000"); 
 res.set("Access-Control-Allow-Origin","*");
 res.send("testAJAX 返回的响应"); });

详解AJAX（三）