【Ajax 04】同源异域、异域Cookie

it2024-08-10 44

forgFormat 上传文件进度条：

JSONP非同源问题解决：

方案1：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function fn(){ console.log("前端的调用。"); } </script>  <script src="http://localhost:3030/test"> </script> </body> </html>

↑将 JSON 数据作为填充内容（在服务器中将 JSON数据作为填充内容）

方案2：

方案3：

↑由于跨域仅仅是对 ajax 的限制，所以可以让自己的服务器A去请求服务器B 的内容，然后返回给客户端。

JSONP 优化：

目前是：请求在一访问 HTML 的时候就发送

修改目标：可以控制请求，在点击button的时候发送

修改方案：想发送请求的时候使用 javaScript 动态创建 Script 标签，然后追加到 HTML 页面中。

<button id="btn">点我发送请求</button> </button> <script type = "text/javascript"> var btn = document.getElementById('btn'); btn.onclick = function(){ //创建 Script 标签 document.createElement(script); script.src = "http://localhost:3030/test"; document.body.appendChild(script); } </script>

目标：执行结束之后，在内部将按钮删掉

script.onload = function(){ document.body.removeChild(script); }

目标：客户端将函数的名字作为参数发送给服务器端，服务器端直接接收名字并执行。

script.src = "http://localhost:3030/test?callback=fn";

服务器端代码:

//服务器端代码 app.get('/test',(req,res)=>{ //接收传递过来的函数名称 const fnName = req.query.callback; //执行这个函数参数是：({name:张三}) const result = fnName + '({name:张三})'; res.send(result); });

目标：将代码封装，在日后使用 JSONP 的时候只需要调用此函数就行

//省略

目标：将名称与url相关联

目标：随机生成函数名

//省略 //变成全局函数( window 代表全局作用域 -- 给 window 下面添加属性fn2，这个属性就是一个函数) var fnName = 'myJsonp' + Math.random().toString().replace('.',''); window[fnName] = options.success; script.src = options.url + "?callback = " + fnName; //若是名字相同，则后加载的函数会覆盖之前加载的

Cookie：

↓客户端和服务器端没有记忆性 – 会瞬时遗忘:

↓使用 Cookie 在客户端和服务器端留下一个 “身份证”:

withCredentials 属性 //使用 Ajax 时，默认不携带 Cookie withCredentials：指定在涉及到跨域请求时，是否携带Cookie，默认：false Access-Control-Allow-Credentials: true 允许客户端发送请求时携带Cookie

使用Cookie 需要在服务器端和前端都进行设置。

$.ajax( ) 方法概述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bXXqUcA4-1603262439098)(/Users/hsk/Library/Application Support/typora-user-images/截屏2020-10-21上午11.45.48.png)]

配置 Ajax 的请求

$.ajax({ type:'get',//请求方式 get/post url:'http://www.example.com',//服务器地址 //数据对象会被转换成 'name=zzhangsan&age=20,也可以直接写=号的这种 data:{name:'zhangsan',age:'20'}, //数据格式，可以改成json，JSONstringify（{name:'zhangsan',age:'20'}） contentType:'application/x-www-form-relencoded', //发送前执行 beforeSend:function(){ return false //比如说一直转圈圈的加载图片 }, //请求返回参数成功以后就被调用 success:function(response){}, error:function(xhr){} });

如果服务器返回的是 JSON 字符串，那么这个方法会自动转换成 JSON 对象

可以自动转换类型比如 JSON字符串 => JSON 等

$.ajax

$.ajax('#btn').on('click',function(){ $.ajax({ // 请求方式 type:'get', url:'http://localhost:3000/base', success:function(response){ // response 为服务器端返回的数据 //方法内部会自动将 JSON 字符串转换为 JSON 对象 console.log(response); }， error:function(xhr){ console.log(xhr); } }) })

↑如果协议地址一样，那么前面的一样的都可以省略

向服务器发送数据需要加入

$.ajax 传递数据的三种方式

$.ajax('#btn').on('click',function(){ $.ajax({ // 请求方式 type:'get', url:'http://localhost:3000/base', // 增加的----------------------Data---------------------- data:{ name:'zhangsan', age:22 }, //---------------------------另一种方式------------------ data:'name=wangwu&age=20', //------------------------------------------------------ success:function(response){ // response 为服务器端返回的数据 //方法内部会自动将 JSON 字符串转换为 JSON 对象 console.log(response); }， error:function(xhr){ console.log(xhr); } }) })

不添加contenrType的时候，默认是’application/x-www-form-urlencoded‘

写上contentType:'application/json’之后，只能换种方式来写。

var params = {name:'wangwu',age:29}, $.ajax('#btn').on('click',function(){ $.ajax({ // 请求方式 type:'get', url:'http://localhost:3000/base', data:JSON.stringify(params), success:function(response){ // response 为服务器端返回的数据 //方法内部会自动将 JSON 字符串转换为 JSON 对象 console.log(response); }， error:function(xhr){ console.log(xhr); } }) })

brforeSend

一般被用在加载/对用户输入的验证上面

beforeSend:function(){ return false; // 表示不发送 }

向服务器端传递函数名字的参数名称

客户端：src=“/js/jquery.min.js?callback”

服务器：const callback = req.query.cb

const data = callback+"({name:‘zhangsan’})"

#jsonpCallback:‘callback’

这样请求成功之后就会默认使用 callback 方法而不是 success()

$.get(‘urlAddress’,{name:‘zhangsan’,age:30},function(response){ })

$.post(‘urlAddress’,{name:‘zhangsan’,age:30},function(response){ })

$('#btn').on('click',function(){ // GET 方式请求 $.get('/base','name=zhangsan&age=30',function(response){ console.log(response) })； // POST 方式请求 (无 Data) $.post('/base',function(response){ console.log(response) })； // POST 方式请求 $.post('/base',{name:'zhangan',age:39},function(response){ console.log(response) })； });

最新回复(0)