Ajax
1、原生Ajax
1、Ajax简介
Ajax全称为Asynchronous JavaScript And XML ，就是异步的JS和XML 通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据，AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
2、XML简介
XML可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML没有预定义标签，全是自定义标签，用来表示一些数据。
比如说我有一个学生数据：
name="孙悟空",age=18,gender="男";
用XML表示：
现在已经被JSON取代了
用JSON表示：
{"name":"孙悟空","age":18,"gender":"男"}
3、AJAX的特点
1、优点
（1）可以无需刷新页面与服务器端进行通信
（2）运行你根据用户事件来更新部分页面内容
2、缺点
（1）没有浏览历史，不能回退
（2）存在跨域问题（同源）
（3）SEO不友好
4、AJAX的使用
1、HTTP
HTTP（hypertext transport protocol）协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则
1、什么是Http协议
1、什么是协议？
协议就是指双方，或多方，相互约定好，大家都需要遵守的规则，叫协议
2、所谓Http协议就是指客户端和服务器之间通信时，发送的数据，需要遵守的规则，叫Http协议
3、Http协议中的数据又叫报文。
2、请求的Http协议格式
1、客户端给服务器发送数据叫请求
2、服务器给客户端回传数据叫响应
3、请求又分GET请求和POST请求两种。
1、GET请求
（1）请求行
*请求的方式 GET
*请求的资源路径[+?+请求参数]
*请求的协议的版本号 HTTP/1.1
（2）请求头
*key:value 组成，不同的键值对，表示不同的含义
2、POST请求
（1）请求行
*请求的方式 POST
*请求的资源路径[+?+请求参数]
*请求的协议的版本号
（2）请求头
*key:value 不同的请求头，有不同的含义
空行
（3）请求体
就是发送给服务器的数据
3、常用请求头的说明
Accept：表示客户端能够接受的数据类型
Accept—Language：表示客户端可以接收的语言类型
User-Agent：表示客户端浏览器的信息
Host：表示请求时的服务器ip和端口号
4、哪些是GET请求和POST请求？
GET请求有哪些？
1、form标签 method=get
2、a标签
3、link标签引入css
4、Script 标签引入js文件
5、img标签引入图片
6、iframe标签引入html页面
7、在浏览器地址栏中输入地址后回车
POST请求有哪些？
1、form标签 method=post
5、响应的HTTP协议格式
1、响应行
*响应的协议和版本号
*响应状态码
*响应状态描述符
2、响应头
*key:value 不同的响应头，有不同的含义
空行
3、响应体
*就是回传给客户端的数据
6、常用的响应码说明
200 表示请求成功
302 表示请求重定向
403 表示禁止
401 表示未授权
404 表示请求服务器已经收到了，但是你要的数据不存在（请求地址错误）
500 表示服务器已经收到请求，但是服务器内部错误（代码错误）
7、MIME类型说明
MIME是HTTP协议中的数据类型
MIME的英文全称是“Multipurpose Internet Mall Extensions”多功能Internet邮件扩充服务。MIME类型的格式是“大类型/小类型”，并与一种文件的扩展名相对应。
常见的MIME类型：
文件MIME类型超文本标记语言文本.html htm text/html普通文本.txt text/plainRTF文本.rtf application/trfGIF图形.gif image/gifJPEG图形.jpeg .jpg image/jpegau声音文件.au audio/baseMIDI音乐文件mid,.midi audio/midi,audio/x-midiRealAudio音乐文件.ra .ram audio/x-pn-realaudioMPEG文件.mpg .mpeg video/mpegAVI文件.avi video/x-msvideoGZIP文件.gz application/x-gzipTAR文件.tar application/x-tar
2、express框架
写一个简易的服务器
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/",(request,response)=>{
// 设置响应
response.send('HELLO EXPRESS')
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
3、get请求
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
4、post请求
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
5、json数据
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
7、服务器js代码重新启动问题
下载nodemon
npm install -g nodemon
运行
nodemon server.js
若遇到禁止运行脚本，请以管理员身份打开vscode
在终端运行
set-ExecutionPolicy RemoteSigned
8、ie浏览器缓存问题
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
9、请求超时与网络异常
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// json响应
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 针对ie缓存
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 延时响应
app.get("/delay",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
setTimeout(()=>{
// 设置响应体
response.send('延时响应');
},3000)
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
10、取消请求
11、重复请求问题
2、jQuery中的AJAX
1、jQuery发送AJAX请求
jQuery发送AJAX请求
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// json响应
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 针对ie缓存
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 延时响应
app.all("/delay",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
setTimeout(()=>{
// 设置响应体
response.send('延时响应');
},3000)
});
// jQuery服务
app.all("/jQuery-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
3、Axios中的AJAX
1、axios发送ajax请求
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// json响应
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 针对ie缓存
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 延时响应
app.all("/delay",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
setTimeout(()=>{
// 设置响应体
response.send('延时响应');
},3000)
});
// jQuery服务
app.all("/jQuery-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// axios服务
app.all("/axios-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
4、fetch中的AJAX
1、fetch发送ajax请求
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// json响应
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 针对ie缓存
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 延时响应
app.all("/delay",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
setTimeout(()=>{
// 设置响应体
response.send('延时响应');
},3000)
});
// jQuery服务
app.all("/jQuery-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// axios服务
app.all("/axios-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// fetch服务
app.all("/fetch-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
5、跨域
1、同源策略
同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略。
同源：协议、域名、端口号、必须完全相同
违背同源策略就是跨域
2、如何解决跨域
1、JSONP
1、JSONP是什么？
JSONP（JSON with Padding），是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来的，只支持get请求
2、JSONP怎么工作的？
在网页有一些标签天生具有跨域的能力，比如：img link iframe script
JSONP就是利用script标签的跨域能力来发送请求的
3、JSON的使用
1、动态的创建一个script标签
var script = document.createElement("script");
2、设置script的src，设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
原理
app.js
const data={
name:'xiaolin'
}
// console.log(data);
// 处理数据
/** function handle(data){
// 获取result元素
const result = document.getElementById('result');
result.innerHTML = data.name;
}
**/
handle(data);
server.js
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// json响应
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 针对ie缓存
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 延时响应
app.all("/delay",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
setTimeout(()=>{
// 设置响应体
response.send('延时响应');
},3000)
});
// jQuery服务
app.all("/jQuery-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// axios服务
app.all("/axios-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// fetch服务
app.all("/fetch-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// jsonp服务
app.all("/jsonp-server",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
name:'xiaolin'
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
案例
用户名：
server.js
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// json响应
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 针对ie缓存
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 延时响应
app.all("/delay",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
setTimeout(()=>{
// 设置响应体
response.send('延时响应');
},3000)
});
// jQuery服务
app.all("/jQuery-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// axios服务
app.all("/axios-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// fetch服务
app.all("/fetch-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// jsonp服务
app.all("/jsonp-server",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
name:'xiaolin'
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// 用户名检查是否存在
app.all("/check-username",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
exist:1,
msg:'用户名已经存在'
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
jQuery发送jsonp请求
server.js
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// json响应
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 针对ie缓存
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 延时响应
app.all("/delay",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
setTimeout(()=>{
// 设置响应体
response.send('延时响应');
},3000)
});
// jQuery服务
app.all("/jQuery-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// axios服务
app.all("/axios-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// fetch服务
app.all("/fetch-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// jsonp服务
app.all("/jsonp-server",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
name:'xiaolin'
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// 用户名检查是否存在
app.all("/check-username",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
exist:1,
msg:'用户名已经存在'
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// 用户名检查是否存在
app.all("/jQuery-jsonp",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
name:'xiaolin',
sno:20251104260
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 接收callback参数
let cb = request.query.callback;
// 返回结果
response.end(`${cb}(${str})`);
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
2、CORS
1、CORS是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解法方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，运行服务器声明哪些源站通过浏览器有权限访问哪些资源。
2、CORS如何工作？
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
3、CORS的使用
主要是服务器端的设置：
router.get("/testAJAX",function(req,res){
})
server.js
// 引入express
const express = require('express');
// 创建应用对象
// request是对请求报文的封装
// response是对响应报文的封装
const app = express();
// 创建路由规则
app.get("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO AJAX');
});
// 可以接收任意类型的请求
app.all("/server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应
response.send('HELLO AJAX POST');
});
// json响应
app.all("/json-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 响应头
response.setHeader('Access-Control-Allow-Headers',"*")
// 响应一个数据
const data = {
name:'xiaolin'
};
// 将对象转换为json字符串
let str = JSON.stringify(data);
// 设置响应
response.send(str);
});
// 针对ie缓存
app.get("/ie",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// 设置响应
response.send('HELLO IE');
});
// 延时响应
app.all("/delay",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
setTimeout(()=>{
// 设置响应体
response.send('延时响应');
},3000)
});
// jQuery服务
app.all("/jQuery-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// axios服务
app.all("/axios-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// fetch服务
app.all("/fetch-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader('Access-Control-Allow-Headers',"*")
// 设置响应体
// response.send('Hello jQuery AJAX');
const data = {name:'xiaolin'}
response.send(JSON.stringify(data));
});
// jsonp服务
app.all("/jsonp-server",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
name:'xiaolin'
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// 用户名检查是否存在
app.all("/check-username",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
exist:1,
msg:'用户名已经存在'
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// jQuery-jsonp
app.all("/jQuery-jsonp",(request,response)=>{
// response.send('console.log("hello jsonp")');
const data={
name:'xiaolin',
sno:20251104260
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 接收callback参数
let cb = request.query.callback;
// 返回结果
response.end(`${cb}(${str})`);
});
//CORS
app.all("/cors-server",(request,response)=>{
// 设置响应头 设置运行跨域
response.setHeader("Access-Control-Allow-Origin","*");
// response.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:5500");
response.setHeader("Access-Control-Allow-Headers","*");
response.setHeader("Access-Control-Allow-Method","*");
// 返回结果
response.send("Hello CORS");
});
// 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中.....");
})
参考链接
发表评论