Ajax前后端交互利器详解(二)

2401_84152308

于 2024-04-30 16:43:52 发布

阅读量555

点赞数 16

分类专栏：程序员文章标签： ajax 交互前端

本文链接：https://blog.csdn.net/2401_84152308/article/details/138350488

版权

程序员专栏收录该内容

186 篇文章 0 订阅

订阅专栏

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！

在非同源服务器端进行接收客户端传递的函数名称

// 引入express框架

const express = require(‘express’);

// 路径处理模块

const path = require(‘path’);

// 创建web服务器

const app = express();

// 静态资源访问服务功能

app.use(express.static(path.join(__dirname, ‘public’)));

// 创建路由

app.get(‘/better’, (req, res) => {

// 接收客户端传递过来的函数的名称

const fnName = req.query.callback;

// 将函数名称对应的函数调用代码返回给客户端

const result = fnName + ‘({“name”: “张三”})’;

res.send(result);

});

// 监听端口

app.listen(3001);

在这里插入图片描述

我们将函数名称进行改变为f1，也使得 callback 的值改变为f1

在这里插入图片描述

封装 jsonp 函数，方便请求发送

function jsonp (options) {

// 动态创建script标签

var script = document.createElement(‘script’);

// 拼接字符串的变量

var params = ‘’;

for (var attr in options.data) {

params += ‘&’ + attr + ‘=’ + options.data[attr];

}

// myJsonp0124741

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})

})

1.6、CORS跨域资源共享

CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

1.7、访问非同源数据服务器端

同源政策是浏览器给予 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);

在这里插入图片描述

6.6 CORS跨域资源共享

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();

})

6.9 withCredentials属性

使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。但是如果两台服务器都是我们自己的，我们想要实现跨域请求，需要在客户端和服务器端进行处理

在客户端 ajax 对象下有一个属性：

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false

在服务器端响应头中设置字段

Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie

2、jQuery中的Ajax

================================================================================

2.1、$.ajax()方法概述

$.ajax()方法作用：发送 Ajax 请求

2.2、发送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({

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({

age: 35

})

});

// 监听端口

app.listen(3000);

在这里插入图片描述

若我们请求地址的协议，域名，端口都一样，我们请求地址url也可以省略,只用书写路由即可

发送请求

2.3、$.ajax方法传递请求参数

客户端代码如下：

发送请求

在这里插入图片描述

如果我们要传递json格式的字符串，

改变 contentType 为 application/json
需要通过 JSON.stringify 将json对象转换为字符串传递，请求成功服务器端响应回来 success 方法内部又会自动将 json字符串转换为 json对象

客户端代码如下：

发送请求

在这里插入图片描述

2.4、serialize方法

作用：将表单中的数据自动拼接成参数名 = 参数值且多个参数之间用&连接的字符串类型的参数

var params = $(‘#form’).serialize();

// name=zhangsan&age=30

客户端代码如下：

在这里插入图片描述

此时我们将表单内容拼接成字符串类型的参数，但是如果我们需要将表单用户输入的内容转换为对象类型，jquery 并没有给我们封装，我们需要自己封装

视频讲解地址：https://www.bilibili.com/video/BV1ji4y1876Y?p=49

2.5、发送jsonp请求

$.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({

age: 50

})

});

在这里插入图片描述

有的服务器端不是通过 callback 来接收客户端传递过来的函数名称，而是换成了简写 cb，这样我们就需要传递 jsonp:cb
jsonCallback：fnName 表示指定函数名称，正常来说，请求成功后会调用 success 函数，但是如果我们不想调用它，我们也可以自己传递函数名字，然后在客户端自己准备好这个函数的定义部分

例如：客户端代码如下：

发送请求

服务器端路由如下：

总结

蚂蚁面试比较重视基础，所以Java那些基本功一定要扎实。蚂蚁的工作环境还是挺赞的，因为我面的是稳定性保障部门，还有许多单独的小组，什么三年1班，很有青春的感觉。面试官基本水平都比较高，基本都P7以上，除了基础还问了不少架构设计方面的问题，收获还是挺大的。

经历这次面试我还通过一些渠道发现了需要大厂真实面试主要有：蚂蚁金服、拼多多、阿里云、百度、唯品会、携程、丰巢科技、乐信、软通动力、OPPO、银盛支付、中国平安等初，中级，高级Java面试题集合，附带超详细答案，希望能帮助到大家。

蚂蚁金服5面，总结了49个面试题，遇到的面试官都是P7级别以上

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！
](https://img-blog.csdnimg.cn/cc648efb135343d7a272a3e6348a3775.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55Sf5ZG95piv5pyJ5YWJ55qE,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

有的服务器端不是通过 callback 来接收客户端传递过来的函数名称，而是换成了简写 cb，这样我们就需要传递 jsonp:cb
jsonCallback：fnName 表示指定函数名称，正常来说，请求成功后会调用 success 函数，但是如果我们不想调用它，我们也可以自己传递函数名字，然后在客户端自己准备好这个函数的定义部分

例如：客户端代码如下：

发送请求

服务器端路由如下：

总结

[外链图片转存中…(img-wGBd8mNz-1714466540904)]

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！

2401_84152308

关注

16
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
Ajax前后端交互利器详解(二)

蚂蚁面试比较重视基础，所以Java那些基本功一定要扎实。蚂蚁的工作环境还是挺赞的，因为我面的是稳定性保障部门，还有许多单独的小组，什么三年1班，很有青春的感觉。面试官基本水平都比较高，基本都P7以上，除了基础还问了不少架构设计方面的问题，收获还是挺大的。经历这次面试我还通过一些渠道发现了需要大厂真实面试主要有：蚂蚁金服、拼多多、阿里云、百度、唯品会、携程、丰巢科技、乐信、软通动力、OPPO、银盛支付、中国平安等初，中级，高级Java面试题集合，附带超详细答案，希望能帮助到大家。
复制链接

扫一扫