jQuery（五）Ajax、跨域

目录

一、Ajax

二、跨域

一、Ajax

$.ajax({url:"服务器端接口地址",type:"get或post", //请求类型data:{ //如果没有参数&＃xff0c;可省略参数名: 参数值,... : ...},dataType:"json", //自动调用JSON.parse()将服务器端返回的json字符串转化为内存中直接可用的数组或对象//若服务器端返回的不是json字符串&＃xff0c;则可以省略success:function(result){ //回调函数&＃xff0c;请求响应成功后自动触发&＃xff0c;形参result自动接住已经编译后的响应结果对象//因为ajax是异步的&＃xff0c;所以希望在请求成功后才能执行的代码必须写在success内部}
})


举例&＃xff1a;使用ajax请求云服务器接口中的数据&＃xff1b;

二、跨域

        一个域名下网站中的网页&＃xff0c;去请求另一个域名下网站中的资源&＃xff0c;就是跨域。

1. 可以跨域的元素或程序

        这是因为浏览器中都有一个 CORS 策略/同源策略&＃xff08;Cross Origin Resources Sharing&＃xff09;&＃xff1a;浏览器默认只允许当前网页中的 Ajax 请求使用自己网站的资源&＃xff0c;不允许 ajax 请求使用其他域名返回的数据。        

        具体方法是&＃xff1a;浏览器自动检查每个响应回来的结果数据的来源地址&＃xff0c;用数据的来源地址与当前网页所在的地址比较&＃xff0c;如果发现来源地址与网页所在的地址不一致&＃xff0c;则禁止网页使用其他来源的数据。

4. 解决跨域问题

        CORS 方式&＃xff0c;请服务器端篡改数据的来源地址&＃xff0c;强行与客户端地址保持一致&＃xff0c;骗过浏览器的 cors 策略&＃xff0c;使得 cors 策略允许数据进入程序使用。格式如下&＃xff1a;

//node.js中
res.writeHead(200,{ //先写请求头部... : ...,"Access-Control-Allow-Origin":"客户端网页所在地址"});
res.write(JSON.stringify(响应结果)) //再写响应结果
res.end(); //发送


在以上例子中&＃xff0c;只需在服务器端添加一句话即可&＃xff0c;

再次使用 ajax 发送跨域请求&＃xff0c;结果如下&＃xff1a;

5. 前后端分离

        在开发中前端一个项目&＃xff0c;后端一个项目&＃xff0c;前后端项目独立运行&＃xff0c;这样可以避免互相影响。在后端中可以通过中间件来解决重复写接口的问题&＃xff1a;

        a. 安装 npm i -save cors

        b. 在 nodejs express 项目的 app.js 中:

var cors&＃61;require("cors"); //引入cors中间件
var app&＃61;express();
app.use(cors({origin:[ "http://127.0.0.1:5500", "其它允许跨域的客户端地址",... ]
}))

Javascript jQuery 终。