Ajax技术中的 $.get()封装
$.get(var1,var2,var3,var4); 四个参数
参数一:请求的后端程序的地址
参数二:要发送到后端程序的数据,json 对象/js对象(推荐使用)或者也可以是字符串
参数三:当readyState == 4 的时候会触发一个函数,该函数中有一个参数,就是后端程序返回的数据
参数四:设置返回数据的类型: text(默认) json XML …
1
2
3
4$.get('./get.php','id=111&name=ldx',function(msg){
console.log(msg); // 返回的数据
},'json');
此为演示$.get方法 进行了解下面进行封装
第一步 : 首先编写一个具体的案例,
具体案例:封装一个get方法,能够发送ajax请求,请求 1.PHP文件 , 并能够接收返回值
①. 使用原生js完成ajax请求过程
②. 定义$对象 , 再定义get成员方法
1
2
3
4
5
6
7
8
9
10
11
12<script>
// 编写一个普通程序
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert(xhr.responseText);
}
}
xhr.open('get', './1.php');
xhr.send(null);
</script>
相信你能看的懂,看不懂的话可以辞职,换工作了.
通过分析上面的代码,一共发现了五个问题
- 在创建XMLHttpRequest对象是,没有处理兼容问题
- 访问地址只是一个地址,不灵活
- 无法灵活的向后端进行参数发送
- 前端无法灵活接收后端返回的数据
- 返回类型单一,只能使用字符串
2. 处理创建XMLHttpRequest对象时的兼容性问题
1 | <script> |
处理只能访问1.php文件的文件的问题。
思路: 定义get函数时设置形参，调用函数时传递实参① 修改get方法，设置参数1 — 请求的url地址
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<script>
// 设置文件访问问题,因为只能访问一个页面
var $ = {
get: function(url) { // 将这里的参数改为 url 进行传参
var xhr = this.createXhr();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert(xhr.responseText);
}
}
xhr.open('get', url); // 准备ajax请求的这里也需要改一下
xhr.send(null);
},
// 处理兼容性问题
createXhr: function() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
return xmlhttp;
},
}
$.get( './1.php'); // 在调用的时候讲文件路劲以参数的形式传入
</script>处理请求后台文件时无法发送数据
思路: 将js对象组装为字符串，拼接在请求的url地址之后$.get(‘1.php’, {“id”:1, “name”:”zs”} , ….) –> 1.php?id=1&name=zs
本质: {“id”:1, “name”:”zs”} —> id=1&name=zs
① 封装params方法，将js对象转为字符串
1
2
3
4
5
6
7
8
9
10
11// 处理请求后台文件时无法发送数据
params: function(obj) {
// 定义一个空字符串,进行下面的拼接
var str = '';
for (var key in obj) {
str += key + '=' + obj[key] + '&'; //id=1&name=zs$
}
// 在循环之后将字符串最后一个多出来的 & 删除
str = str.slice(0, -1);
return str;
}一步一步进行…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<script>
// 处理请求后台文件时无法发送数据 使用拼接字符串的方法
var $ = {
get: function(url, js_obj) {
var xhr = this.createXhr();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert(xhr.responseText);
}
} // 在get方法中调用发送数据的方法
var str = this.params(js_obj); // 调用方法并进行传参 会将传入的数据进行处理
url = url + '?' + str;// 将处理完的数据与url进行拼接进行传参
xhr.open('get', url);
xhr.send(null);
},
// 处理兼容性问题
createXhr: function() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
return xmlhttp;
},
// 处理请求后台文件时无法发送数据
params: function(obj) {
// 定义一个空字符串,进行下面的拼接
var str = '';
for (var key in obj) {
str += key + '=' + obj[key] + '&';
} // 在循环之后将字符串最后一个多出来的 & 删除
str = str.slice(0, -1);
return str;
},
}
$.get('./1.php'); // 在调用的时候讲文件路劲以参数的形式传入
</script>处理readyState==4时的回调函数
① 在$.get方法中设置参数3，在方法体中使用函数形式调用，就相当于执行了一个函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<!-- <script>
// 处理请求后台文件时无法发送数据 使用拼接字符串的方法
var $ = {
get: function(url, js_obj) {
var xhr = this.createXhr();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert(xhr.responseText);
}
} // 在get方法中调用发送数据的方法
var str = this.params(js_obj); // 调用方法并进行传参 会将传入的数据进行处理
url = url + '?' + str;// 将处理完的数据与url进行拼接进行传参
xhr.open('get', url);
xhr.send(null);
},
// 处理兼容性问题
createXhr: function() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
return xmlhttp;
},
// 处理请求后台文件时无法发送数据
params: function(obj) {
// 定义一个空字符串,进行下面的拼接
var str = '';
for (var key in obj) {
str += key + '=' + obj[key] + '&';
} // 在循环之后将字符串最后一个多出来的 & 删除
str = str.slice(0, -1);
return str;
},
}
$.get('./1.php'); // 在调用的时候讲文件路劲以参数的形式传入
</script> -->
6. 处理能够接收不同类型的返回值
① 在$.get方法声明时，设置参数4，判断参数4的值，如果是json则进行额外处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!-- <script>
// 处理能够接受不同类型的返回值 在get方法中进行判断
var $ = {
get: function(url, js_obj, success, datatype) {
var xhr = this.createXhr();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var result = xhr.responseText; // 返回值是一个字符串
if (datatype == 'json') {
result = JSON.parse(result);
}
success(result);
}
} // 在get方法中调用发送数据的方法
var str = this.params(js_obj); // 调用方法并进行传参 会将传入的数据进行处理
url = url + '?' + str; // 将处理完的数据与url进行拼接进行传参
xhr.open('get', url);
xhr.send(null);
},
// 处理兼容性问题
createXhr: function() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
return xmlhttp;
},
// 处理请求后台文件时无法发送数据
params: function(obj) {
// 定义一个空字符串,进行下面的拼接
var str = '';
for (var key in obj) {
str += key + '=' + obj[key] + '&';
} // 在循环之后将字符串最后一个多出来的 & 删除
str = str.slice(0, -1);
return str;
}
}
$.get('./2.php', {
"name": 'qw',
"age": 12
}, function(data) {
alert(data);
},
'text')
</script> -->
上面就是封装完成了 ,其实呢就是对具体需求进行规划,一步一步进行操作,有的地方你可能会想不到该怎样做,但是你看完之后应该会理解的差不多.结束了.