1.jQuery中使用Ajax
GET 和 POST 方法的区别：
1、发送的数据数量
在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
3、加入书签中
GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。
4、编码
在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。
<button style="background: rgb(219, 130, 13);">
点击自定义发送请求
</button>
<button style="background: rgb(13, 219, 75);">
点击get方法请求
</button>
<button style="background: rgb(10, 25, 236);">
点击post方法请求
</button>
<div id="result">
</div>
<script src="../jquery-3.4.1.js"></script>
<script>
console.log($.ajax)
//jquery之ajax自定义请求
$("button").eq(0).click(() => {
let data = { a:100,b:200 };
$.ajax({
//设置请求地址
url: 'http://192.168.0.102:8006/jquery-server',
//设置请求方法
type: 'get',
//设置请求参数
data,
//设置响应体结果
dataType: 'json',
//请求头信息
headers: {
c: 300,
d: 400
},
//请求成功回调
success: (data) => {
console.log(data)
},
//设置响应时间
timeout: '2000',
//请求失败回调
error: ()=>{
},
})
})
//jquery之ajax get请求
$('button').eq(1).click(() => {
/**
*get请求方法有4个参数：
*1.请求路径，
*2.请求携带数据，
*3.规定当请求成功时运行的函数额外的参数：data - 包含来自请求的结果数据,status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）,xhr - 包含 XMLHttpRequest 对象
*4.dataType: 规定预期的服务器响应的数据类型,
*"xml" - 一个 XML 文档
*"html" - HTML 作为纯文本
*"text" - 纯文本字符串
*"script" - 以 JavaScript 运行响应，并以纯文本返回
*"json" - 以 JSON 运行响应，并以 JavaScript 对象返回
*"jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调
**/
$.get('http://192.168.0.102:8006/jquery-server','',(data,status) =>{
console.log("数据: " + data + "\n状态: " + status)
console.log(data.name)
},'json')
})
//jquery之ajax post请求
$('button').eq(2).click(() => {
/**
* post请求方法有4个参数
* 1.请求路径，
* 2.请求携带数据，
* 3.规定当请求成功时运行的函数额外的参数：data - 包含来自请求的结果数据,status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）,xhr - 包含 XMLHttpRequest 对象
* 4.dataType: 规定预期的服务器响应的数据类型,
* "xml" - 一个 XML 文档
* "html" - HTML 作为纯文本
* "text" - 纯文本字符串
* "script" - 以 JavaScript 运行响应，并以纯文本返回
* "json" - 以 JSON 运行响应，并以 JavaScript 对象返回
* "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调
* */
$.post('http://192.168.0.102:8006/jquery-server',{a: 100,b: 200},(data,status) => {
console.log("数据: " + data + "\n状态: " + status)
console.log(data.age)
},'json')
})
</script>
//引用express模块
const express = require('express');
//实例化对象
const app = express();
//规划路由
//接受所有请求 如果设置自定义请求头需要在all事件接收
app.all('/jquery-server',(resquset,response)=>{
// console.log(response)
//设置允许自定义请求头
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
//设置传送数据 手动数据转json
let obj = {
name : 'asen',
age: '18',
}
obj = JSON.stringify(obj)
//send方法中只能传输 字符串 和 buffer（0,1组成的数据）
response.send(obj);
})
//监听服务启动
app.listen(8006,()=>{
console.log('jquery请求准备完毕')
})
2.axios中使用Ajax
axios自定义请求，post请求，get请求，请求配置
<body>
<button style="background: rgb(219, 130, 13)">点击自定义发送请求</button>
<button style="background: rgb(13, 219, 75)">点击get方法请求</button>
<button style="background: rgb(10, 25, 236)">点击post方法请求</button>
<div id="result"></div>
<!-- 引用axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const btn = document.querySelectorAll("button");
btn[0].addEventListener("click", () => {
/**
* axios自定义请求方法
* url：请求地址
* method：请求类型
* data：请求传参
* timeout：请求响应时间
* 因是基于promise库，所以用.then() 请求成功回调 .catch 请求失败回调
*/
axios({
url: "http://192.168.0.102:8007/axios-server",
method: "get",
data: {
a: 100,
c: 200
},
timeout: 3000,
}).then((data) => {
console.log(data)
}).catch((error) => {
console.log(error)
})
});
btn[1].addEventListener('click',() => {
/**
* axios——get请求 有两个参数
* 1.url：请求地址，
* 2.对象：设置get方法的请求配置
* */
axios.get("http://192.168.0.102:8007/axios-server",{
params:{
a: 100,
b: 200
},
timeout: 3000,
}).then((response) => {
console.log(response)
})
})
btn[2].addEventListener('click',() => {
/**
* axios——post请求 有三个参数
* 1.url：请求地址，
* 2.data：请求参数
* 3.对象：设置post方法的配置
* */
axios.post("http://192.168.0.102:8007/axios-server",
{
a: 300,
b: 200,
c: 100
},
{
headers: {
height:6000
},
timeout: 6000
}).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
})
</script>
</body>
<script>
// axios 请求配置
let obj = {
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get',
// default
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允许在向服务器发送前，修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},
// `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属：FormData, File, Blob
// - Node 专属： Stream
data: {
firstName: 'Fred'
},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
timeout: 1000,
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // default
// `adapter` 允许自定义处理请求，以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` 表示应该使用 HTTP 基础验证，并提供凭据
// 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
// `responseEncoding` indicates encoding to use for decoding responses
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // default
// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000,
// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0，将不会 follow 任何重定向
maxRedirects: 5, // default
// `socketPath` defines a UNIX Socket to be used in node.js.
// e.g. '/var/run/docker.sock' to send requests to the docker daemon.
// Only either `socketPath` or `proxy` can be specified.
// If both are specified, `socketPath` is used.
socketPath: null, // default
// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
// `keepAlive` 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' 定义代理服务器的主机名称和端口
// `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
// 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken` 指定用于取消请求的 cancel token
// （查看后面的 Cancellation 这节了解更多）
cancelToken: new CancelToken(function (cancel) {
})
}
</script>
3.fetch中使用Ajax
fetch是javascript提供的全局接口
<button style="background: rgb(219, 130, 13);">
点击fetch自定义发送请求
</button>
<div id="result">
</div>
<script>
/**
* Fetch API 提供了一个 JavaScript 接口，
* 用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。
* 它还提供了一个全局 fetch() 方法，
* 该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。
* Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。
* Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展请注意，
* fetch 规范与 jQuery.ajax() 主要有以下的不同：当接收到一个代表错误的 HTTP 状态码时，
* 从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。
* 相反，它会将 Promise 状态标记为 resolve （如果响应的 HTTP 状态码不在 200 - 299 的范围内，
* 则设置 resolve 返回值的 ok 属性为 false ），
* 仅当网络故障时或请求被阻止时，才会标记为 reject。
* fetch 不会发送跨域 cookies，除非你使用了 credentials 的初始化选项。
*
* Response.headers 只读包含此 Response 所关联的 Headers 对象。
* Response.ok 只读包含了一个布尔值，标示该 Response 成功（HTTP 状态码的范围在 200-299）。
* Response.redirected 只读 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。
* Response.status 只读 包含 Response 的状态码 （例如 200 表示成功）。
* Response.statusText 只读 包含了与该 Response 状态码一致的状态信息（例如，OK对应 200）。
* Response.type 只读 包含 Response 的类型（例如，basic、cors）。
* Response.url 只读 包含 Response 的URL。
* Response.useFinalURL 包含了一个布尔值，来标示这是否是该 Response 的最终 URL。
* Response 实现了 Body 接口，所以以下属性亦可用：
* Body.body (en-US) 只读一个简单的 getter，用于暴露一个 ReadableStream 类型的 body 内容。
* Body.bodyUsed (en-US) 只读包含了一个布尔值 (en-US)来标示该 Response 是否读取过 Body。
* 方法
* Response.clone() 创建一个 Response 对象的克隆。
* Response.error() 返回一个绑定了网络错误的新的 Response 对象。
* Response.redirect() 用另一个 URL 创建一个新的 Response。
* Response 实现了 Body 接口，所以以下方法同样可用：
* Body.arrayBuffer() (en-US)
* 读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 ArrayBuffer 格式的 Promise 对象。
* Body.blob() (en-US)
* 读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 Blob 格式的 Promise 对象。
* Body.formData() (en-US)
* 读取Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 FormData 格式的 Promise 对象。
* Body.json() (en-US)
* 读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 JSON 格式的 Promise 对象。
* Body.text() (en-US)
* 读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 USVString 格式的 Promise 对象。
* */
const btn = document.querySelector("button")
btn.addEventListener('click',()=>{
//注意：get的请求中请求体不能有body，需要改为post请求
fetch("http://192.168.0.102:8008/fetch-server",{
//设置请求方法
method: 'post',
//设置请求头
headers: {
name: 'admin',
password: 'admin',
},
//设置请求体
body: {
a: 100,
b: 200,
c: 300,
}
}).then(response => {
return response.json();
}).then(response => {
console.log(response)
})
})
</script>
//引用express模块
const express = require('express');
//实例化对象
const app = express();
//规划路由
//接受所有请求 如果设置自定义请求头需要在all事件接收
app.all('/fetch-server',(resquset,response)=>{
// console.log(response)
//设置允许自定义请求头
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
//设置传送数据 手动数据转json
let obj = {
name : 'asen',
age: '18',
}
obj = JSON.stringify(obj)
//send方法中只能传输 字符串 和 buffer（0,1组成的数据）
response.send(obj);
})
//监听服务启动
app.listen(8008,()=>{
console.log('fetch请求准备完毕')
})
