var fnName = ‘myJsonp’ + Math.random().toString().replace(‘.’, ‘’);
// 它已经不是一个全局函数了
// 我们要想办法将它变成全局函数
window[fnName] = options.success;
// 为script标签添加src属性
script.src = options.url + ‘?callback=’ + fnName + params;
// 将script标签追加到页面中
document.body.appendChild(script);
// 为script标签添加onload事件
script.onload = function () {
document.body.removeChild(script);
}
}
我们也可以说是封装了 JSONP 函数,我们可以将 JSONP 抽离为 jsonp.js文件,这样我们在客户端就可以引入 jsonp.js 文件使用了
- 服务器端代码优化之 res.jsonp 方法。
服务器端接收客户端传递过来的函数名称,并且拼接函数调用,在函数调用的内部,我们还需要将真实的数据写在里面,如果数据是从数据库查出来的 json 对象,我们还需要先转换成 json 字符串,比较麻烦,express 框架给我们 res 下提供了 res.jsonp 方法
app.get(‘/better’,(req,res)=>{
res.jsonp({name:“lisi”,age:20})
})
CORS:全称为 Cross-origin resource sharing,即跨域资源共享,它允许浏览器向跨域服务器发送 Ajax 请求,克服了 Ajax 只能同源使用的限制。
同源政策是浏览器给予 Ajax 技术的限制,服务器端是不存在同源政策限制,服务器端可以直接访问非同源网站中的数据。
所以对于客户端来讲,如果要获取非同源网站中的数据,可以让自己的服务器端获取非同源网站中的数据,等到自己的服务器端获取到数据之后,自己网站的服务器端再将数据响应到客户端,这样就绕过了浏览器的同源政策限制。
我们开启两个服务器,一个端口是3000,另一个端口是3001
客户端代码如下:
- 客户端访问自己的服务器
点我发送请求
服务器3000端代码如下:
- 服务器端获取非同源网站的数据,需要引入第三方模块 request
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 向其他服务器端请求数据的模块
const request = require(‘request’);
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
app.get(‘/server’, (req, res) => {
request(‘http://localhost:3001/cross’, (err, response, body) => {
/**
-
第一个参数是请求地址
-
第二个参数是回调函数
*/
res.send(body);
})
});
// 监听端口
app.listen(3000);
服务器3001端的代码如下:
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
// 创建路由
app.get(‘/cross’, (req, res) => {
res.send(‘ok’)
});
// 监听端口
app.listen(3001);
origin: http://localhost:3000
Access-Control-Allow-Origin: ‘http://localhost:3000’
Access-Control-Allow-Origin: ‘*’
Node 服务器端设置响应头示例代码:
app.use((req, res, next) => {
res.header(‘Access-Control-Allow-Origin’, ‘*’);
res.header(‘Access-Control-Allow-Methods’, ‘GET, POST’);
next();
})
使用Ajax技术发送跨域请求时,默认情况下不会在请求中携带cookie信息。但是如果两台服务器都是我们自己的,我们想要实现跨域请求,需要在客户端和服务器端进行处理
在客户端 ajax 对象下有一个属性:
- withCredentials:指定在涉及到跨域请求时,是否携带cookie信息,默认值为false
在服务器端响应头中设置字段
- Access-Control-Allow-Credentials:true 允 许客户端发送请求时携带cookie
================================================================================
$.ajax()方法作用:发送 Ajax 请求
$.ajax({
type: ‘get’,
url: ‘http://www.example.com’,
data: { name: ‘zhangsan’, age: ‘20’ },
contentType: ‘application/x-www-form-urlencoded’,
beforeSend: function () {
return false
},
success: function (response) {},
error: function (xhr) {}
});
-
type:代表请求方式
-
url:代表请求地址
-
data:代表向服务器端发送的请求参数,它可以是一个对象,在内部会将其转化为参数字符串,除了传递对象以外,我们也可以传递字符串参数值,在内部都会将其转化为参数字符串进行发送
{
data: ‘name=zhangsan&age=20’
}
- contentType:告诉服务器端客户端要向服务器端传递的参数格式类型,默认是
application/x-www-form-urlencoded
,也就是 参数名 = 参数值,多个参数之间用 & 分隔的参数字符串,如果传递的是 json 格式的请求参数,需要将 contentType 进行如下替换
{
contentType: ‘application/json’
}
然后在 data 中传递 json 格式字符串,需要通过 JSON.stringify
将json对象转换为字符串
JSON.stringfy({ name: ‘zhangsan’, age: ‘20’ })
-
beforeSend:允许我们在请求发送之前做一些事,是一个函数,比如在请求发送之前我们可以对请求参数进行格式验证,格式不正确,
return false
请求便不会发送了 -
success:是一个函数,请求发送成功之后就会被调用,有一个形参,这个形参就是服务器端返回的数据
-
error:是一个函数,请求失败之后就会被调用,接收一个 ajax 对象,我们可以在对象中获取错误信息,并且根据错误信息做出错误处理
例如,点击按钮发送 ajax 请求,客户端代码如下:
发送请求
服务器端代码如下:
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
app.get(‘/base’, (req, res) => {
res.send({
name: ‘zhangsan’,
age: 30
})
});
// 监听端口
app.listen(3000);
如果我们是 post 请求方式:
客户端代码如下:
发送请求
服务器端代码如下:
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
app.post(‘/base’, (req, res) => {
res.send({
name: ‘zhaoliu’,
age: 35
})
});
// 监听端口
app.listen(3000);
若我们请求地址的协议,域名,端口都一样,我们请求地址url也可以省略,只用书写路由即可
发送请求
客户端代码如下:
发送请求
如果我们要传递json格式的字符串,
-
改变 contentType 为
application/json
-
需要通过
JSON.stringify
将json对象转换为字符串传递,请求成功服务器端响应回来 success 方法内部又会自动将 json字符串 转换为 json对象
客户端代码如下:
发送请求
作用:将表单中的数据自动拼接成 参数名 = 参数值且多个参数之间用&连接的字符串 类型的参数
var params = $(‘#form’).serialize();
// name=zhangsan&age=30
客户端代码如下:
此时我们将表单内容拼接成字符串类型的参数,但是如果我们需要将表单用户输入的内容转换为对象类型,jquery 并没有给我们封装,我们需要自己封装
视频讲解地址:https://www.bilibili.com/video/BV1ji4y1876Y?p=49
$.ajax({
url: ‘http://www.example.com’,
// 指定当前发送jsonp请求
dataType: ‘jsonp’,
// 修改callback参数名称
jsonp: ‘cb’,
// 指定函数名称
jsonCallback: ‘fnName’,
success: function (response) {}
})
-
dataType:
jsonp
表示指定当前发送jsonp请求 -
jsonp:
cb
表示修改callback参数名称(可选) -
jsonCallback:
fnName
表示指定函数名称(可选)
例如,客户端代码如下:
发送请求
服务器端路由如下:
app.get(‘/jsonp’, (req, res) => {
res.jsonp({
name: ‘lisi’,
age: 50
})
});
-
有的服务器端不是通过 callback 来接收客户端传递过来的函数名称,而是换成了简写 cb,这样我们就需要传递
jsonp:cb
-
jsonCallback:
fnName
表示指定函数名称,正常来说,请求成功后会调用 success 函数,但是如果我们不想调用它,我们也可以自己传递函数名字,然后在客户端自己准备好这个函数的定义部分
例如:客户端代码如下:
发送请求
服务器端路由如下:
app.get(‘/jsonp’, (req, res) => {
const cb = req.query.cb
const data = cb + “({name: ‘zhaoliu’})”
res.send(data);
});
2.6、 . g e t ( ) 、 .get()、 .get()、.post()方法概述
作用:$.get
方法用于发送get请求,$.post
方法用于发送post请求
$.get(‘http://www.example.com’, {name: ‘zhangsan’, age: 30}, function (response) {})
$.post(‘http://www.example.com’, {name: ‘lisi’, age: 22}, function (response) {})
例如:
发送请求
=================================================================================
这样的请求地址在使用上是没有问题的,但是语义比较混乱,例如:删除用户信息问号后面还要跟获取用户信息的 id,又比如删除用户有些人开发使用 remove、有的人开发使用 delete,这样就没有一套统一的请求地址。而 RESTful 就是为了解决这样的问题。
一套关于设计请求的规范。
我们看请求方式的设置如下:
-
GET请求方式: 获取数据
-
POST请求方式: 添加数据
-
PUT请求方式: 更新数据
-
DELETE请求方式: 删除数据
注意:传统的HTML表单是不支持 PUT请求方式 和DELETE请求方式的,但是在Ajax中是支持的
最后
这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档
祝大家早日进入大厂,拿到满意的薪资和职级~~~加油!!
感谢大家的支持!!
.log(response)
})
//$.post(‘/base’, function (response) {
// console.log(response)
//})
});
=================================================================================
这样的请求地址在使用上是没有问题的,但是语义比较混乱,例如:删除用户信息问号后面还要跟获取用户信息的 id,又比如删除用户有些人开发使用 remove、有的人开发使用 delete,这样就没有一套统一的请求地址。而 RESTful 就是为了解决这样的问题。
一套关于设计请求的规范。
我们看请求方式的设置如下:
-
GET请求方式: 获取数据
-
POST请求方式: 添加数据
-
PUT请求方式: 更新数据
-
DELETE请求方式: 删除数据
注意:传统的HTML表单是不支持 PUT请求方式 和DELETE请求方式的,但是在Ajax中是支持的
最后
这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档
祝大家早日进入大厂,拿到满意的薪资和职级~~~加油!!
感谢大家的支持!!
[外链图片转存中…(img-NzcTylOb-1721130735391)]