Ajax 캡슐화 이해
- coldplay.xixi앞으로
- 2020-09-19 17:01:091723검색
관련 학습 권장 사항: ajax
머리말
이전 기사에서는 ajax의 원리, 기능 및 구현에 대해 설명했습니다. 하지만 그들은 ajax 요청과 응답 작업만 구현합니다. 브라우저와 서버 사이에 요청과 응답이 하나만 있는 것은 아닙니다. 100개의 요청과 응답을 추가하면 유사한 코드를 100번 작성해야 합니까?
이 글은 여러 Ajax를 보내는 방법에 대한 문제를 해결하기 위한 것입니다. ajax에 대해 모르신다면 저의 지난 글 "Understanding ajax"을 주의 깊게 읽어보시면 이 글의 내용을 약 5분 안에 보실 수 있습니다.
이 문서에서는 실제로 함수에 대해 설명합니다. 다음을 살펴보겠습니다.
캡슐화 아이디어
여러 요청을 보내는 작업은 동일합니다. 여러 요청을 작성하면 중복된 코드가 발생합니다. 코드 중복을 피하기 위해 함수 개념을 사용하여 Ajax 작업 코드를 함수로 캡슐화할 수 있습니다. 서로 다른 요청 함수에 의해 전달되는 매개변수는 모두 다릅니다. Ajax 요청을 여러 번 보내려면 캡슐화된 함수를 호출하면 됩니다.
Ajax 함수 캡슐화의 기본 구현
앞서 언급한 것처럼 함수를 사용하여 ajax를 캡슐화한 다음 ajax 구현의 4단계를 함수에 넣은 다음 함수를 호출합니다. 전달되는 매개변수가 많기 때문에 매개변수는 다음과 같습니다. 개체 옵션으로 표시됩니다. 이 객체에는 요청 메서드, 요청 주소, 요청이 성공적으로 전송된 후 트리거되는 요청 처리 기능이 포함됩니다.
아래 예시를 살펴보겠습니다. 코드에서 ajax 작업은 ajax 함수로 캡슐화되고 ajax 함수가 호출되며 매개 변수가 전달됩니다. xht에서 onload 이벤트가 트리거된 후 성공 함수가 호출되고 해당 내용 xhr.responsetext가 인쇄됩니다. 콘솔에.
function ajax(options) {
var xhr = new XMLHttpRequest();
xhr.open(options.type, options.url);
xhr.send();
xhr.onload = function () {
options.success(xhr.responsetext);
}
}
ajax({
type: 'get',
url: 'http://www.example.com',
success: function (data) {
console.log(data);
}
})复制代码요청 매개변수 캡슐화
위 코드는 기본 캡슐화를 구현합니다. 다음으로, 이전 글에서는 요청 매개변수를 전송하는 post 메소드와 get 메소드를 소개했습니다. 요청 메소드도 다른 위치에 배치됩니다. 예를 들어 get 메소드는 url 뒤에 연결되고 post 메소드는 send 메소드 내에 배치됩니다. ajax 메소드의 실제 매개변수 객체에 data 속성을 추가하는데, data 속성 값이 요청 매개변수입니다.
for-in 루프를 사용하여 ajax 함수의 요청 매개변수를 연결하고 요청 매개변수에서 중복된 &를 제거하세요. 그런 다음 요청 유형을 판단합니다. get 요청인 경우 url 뒤에 방금 연결한 매개변수를 연결하고, post 요청인 경우 매개변수를 send 메서드에 넣고 아래의 setRequestHeader 메서드를 사용합니다. 요청 매개변수 형식을 설정하는 xhr 개체입니다.
코드는 다음과 같습니다.
var xhr = new XMLHttpRequest();
// 拼接请求参数的变量
var params = '';
// 循环用户传递进来的对象格式参数 for (var attr in options.data) {
// 将参数转换为字符串格式
params += attr + '=' + options.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// 判断请求方式 if (options.type == 'get') {
options.url = options.url + '?' + params;
}
// 配置ajax对象
xhr.open(options.type,options.url);
// 如果请求方式为post if (options.type == 'post') {
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 向服务器端传递请求参数
xhr.send(params);
}else {
// 发送请求
xhr.send();
}
xhr.onload = function () {
options.success(xhr.responsetext);
}
ajax({
type: 'get',
url: 'http://www.example.com',
data: {
name:'linglong',
age:20
},
success: function (data) {
console.log(data);
}
})复制代码최종 버전 패키징
처음 두 번의 워밍업에 들어간 후 Ajax 패키지의 최종 버전을 직접 살펴보세요. Ultimate Edition 패키지는 다음 문제를 해결합니다.
- 서버 반환 데이터 형식 처리
- 브라우저 요청 매개변수 형식 처리
- 상태 코드가 200이 아닐 때 호출 실패 기능
- 중복성을 줄이기 위해 기본 매개변수 설정
이것은 코드의 최종 버전입니다. 코드 성적인 설명 뒤에 구체적인 지침이 있어야 합니다.
최종 버전 코드 분석:
기본 매개변수를 설정하여 중복성을 줄입니다.
- ajax 함수에서 기본 매개변수 개체를 설정합니다. ajax 함수를 호출할 때 매개변수를 전달할 때 함수에 기본 매개변수를 추가해야 하는 이유는 무엇입니까? 최종 분석에서는 코드 중복을 방지하기 위한 것입니다. 여러 개의 ajax 객체가 생성되면 동일한 매개변수가 전달될 수 있습니다. 호출 시 특정 매개변수 옵션만 전달하고 옵션이 기본 매개변수 기본값을 재정의하도록 합니다. 함수 내에서 기본값을 사용하면 이 문제를 완벽하게 해결할 수 있습니다. Object.sign(defaults, options)은 기본값이 옵션을 재정의하도록 하는 것입니다.
var defaults = { type: 'get',
url: '',
data: {},
header: { 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);复制代码Object.signal 메소드
보충: Object.할당 메소드
여기에 이 글에 충분한 코드가 있습니다. 자세한 내용은 공식 문서를 읽어보세요
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }复制代码创建ajax对象，拼接请求参数
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 拼接请求参数的变量
var params = '';
// 循环用户传递进来的对象格式参数 for (var attr in defaults.data) {
// 将参数转换为字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);复制代码浏览器请求参数格式的处理
- 判断请求方式是get合适post。如果是get就将请求参数拼接到请求地址后面，再配置ajax对象，用send方法发送请求；如果是post就先配置ajax对象，然后判断请求参数的数据类型，如果是json类型就把数据类型转换成字符串处理，如果是application/x-www-form-urlencoded就直用send方法向服务器传递普通请求参数发送请求。
if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 如果请求方式为post if (defaults.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
var contentType = defaults.header['Content-Type']
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(defaults.data))
}else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
}else {
// 发送请求
xhr.send();
}复制代码服务器返回数据格式的处理
4.当请求发送成功，就会触发onload事件，执行函数。我们要对服务器响应的数据进行格式判断，用getResponseHeader方法获取响应头的数据，Content-Type是响应头的属性名称。如果响应头中包含application/json这个字符，就说明响应的是json对象，但是传输的时候是字符串形式传输，所以用json下的parse方法转字符串为对象。 如果http的状态码是200就说明客户端发来的请求在服务器端得到了正确的处理。调用success函数，否则调用错伏处理函数。
xhr.onload = function () {
// xhr.getResponseHeader()
// 获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText;
// 如果响应类型中包含applicaition/json if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
// 当http状态码等于200的时候 if (xhr.status == 200) {
// 请求成功 调用处理成功情况的函数
defaults.success(responseText, xhr);
}else {
// 请求失败 调用处理失败情况的函数
defaults.error(responseText, xhr);
}
}
}复制代码完整的封装代码贴出来，如下所示：
<script type="text/javascript"> function ajax (options) {
// 存储的是默认值
var defaults = { type: 'get',
url: '',
data: {},
header: { 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 拼接请求参数的变量
var params = '';
// 循环用户传递进来的对象格式参数 for (var attr in defaults.data) {
// 将参数转换为字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// 判断请求方式 if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 如果请求方式为post if (defaults.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
var contentType = defaults.header['Content-Type']
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(defaults.data))
}else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
}else {
// 发送请求
xhr.send();
}
// 监听xhr对象下面的onload事件
// 当xhr对象接收完响应数据后触发
xhr.onload = function () {
// xhr.getResponseHeader()
// 获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText;
// 如果响应类型中包含applicaition/json if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
// 当http状态码等于200的时候 if (xhr.status == 200) {
// 请求成功 调用处理成功情况的函数
defaults.success(responseText, xhr);
}else {
// 请求失败 调用处理失败情况的函数
defaults.error(responseText, xhr);
}
}
}
ajax({ type: 'post',
// 请求地址
url: 'http://localhost:3000/responseData',
success: function (data) {
console.log('这里是success函数');
console.log(data)
}
})
</script>复制代码文章结束
ok，到此封装ajax函数完毕，为什么要封装，减少使用多个ajax请求的时候代码冗余。把代码用函数封装起来使用的时候调用函数就可。封装ajax函数要考虑到以下几点：
- 请求方式(get)，请求参数要与地址拼接后放到open方法中。
- 请求方式post，请求参数类型是json数据类型，要将json转字符串后放到send方法中。
- 对服务器响应处理时获取响应头中的响应数据格式。
- 响应的格式是json对象，处理响应结果要将字符串转json对象。
- 设置ajax函数的默认参数减少代码冗余。
其他相关学习推荐：javascript
위 내용은 Ajax 캡슐화 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!