原生js封装a和jQurey版ajax介绍
一.为什么要封装?
发现很多地方都要用ajax请求，但是大部分代码都是一样的，所以根据封装的思想，相同的代码封装成函数，在需要用的地方来调用,这样会很方便.
二.js封装ajax过程:
1.先了解结构代码和后台代码:
结构:
后台:
3.开始封装函数
//开始封装函数
function ajax(params){
/* * params.type:请求方式
* params.url：请求路径
* params.data:提交给服务器的数据
* params.success: 响应完成时调用的回调函数
* params.dataType: 用来告诉我响应体是什么类型的，我就帮你转成对应的对象 */
//1.创建请求对象
var xhr=new XMLHttpRequest();
//不管你传过来的是大写还是小写.统一先转换成小写
params.type=params.type.toLowerCase();
//判断请求体是不是get并且有写值,如果是的话拼接url
if(params.type=="get"&& params.data!=undefined){
params.url+="?"+params.data;
}
//2.设置请求行
xhr.open(params.type,params.url)
//判断是不是get请求,是的话不需要第3步的设置请求头,直接发送请求
if(params.type=="get"){
//4.发送请求
xhr.send();
}else{//说明是post请求
//3.需要设置请求头,这句话很长,直接复制就好
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//4.发送请求,在方法里面加上要提交给服务器的数据
xhr.send(params.data);
}
//5.监听响应完成事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//这里写响应完成事件
/*考虑到之前的封装有一个问题:我希望如果我告诉你响应体是JSON，
你就自动帮我做转换，我告诉你是XML，你也帮我转成XML
解决办法:在回调函数后面又多加一个参数叫res
具体做法:
1.在响应完成那里，先声明一个变量res = xhr.resonseText;
2.判断dataType是否等于JSON,如果是把res重新赋值为转换为JSON对象的值;
3.继续判断(else if)dataType是否等于XML，如果是，
把res重新赋值为转换为XML对象的值;
4.调用回调函数，传入res
*/
//先默认赋值为字符串的响应体
var res =xhr.responseText;
if(params.dataType=="json"){
//按JSON方法来转换成js对象
res=JSON.parse(xhr.responseText);
}else if(params.dataType=="xml"){
var parser=new DOMParser();
res=parser.parseFromString(xhr.responseText,'text/xml');
/*上面两句话的补充说明:后台传入的是xml数据,如果直接用xhr.responseXML拿不到
响应体,这时就我们需要转换
天气预报案例演示:
console.log(xhr.responseXML);//得到null,因为XML的数据我们无法直接获取
响应体,这时我们需要手动转换
//这时候我们就需要自己手动把它转成XML对象
//第一步:创建一个文档转换对象
var parser = new DOMParser();
//第二步:把响应体转成xml对象
var xml = parser.parseFromString(xhr.responseText,'text/xml');
console.log(xml);//打印<resp>...<resp>,即成功得到xml对象
*/
}
params.success(res);//函数调用
}
}
}
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
4.函数调用:
//按钮点击事件
document.getElementById('btn').onclick = function () {
//调用函数
ajax({
type: "get",
url: "getJSON.php",
dataType: "json",
success: function (obj) {//回调函数,需要执行的响应体事件代码写在这里就好
console.log(obj);//成功拿到后台的传过来的数据,{name: "jack", age: 16}
}
})
}
1
2
3
4
5
6
7
8
9
10
11
12
三.jQuery中的ajax
jQuery中用来发ajax请求的方法，跟我们封装的方法类似，但是功能更强大.
使用语法:
//里面传入一个对象
$.ajax({
//请求网址
url: './data.php',
//请求类型
type: 'post',
//服务器响应数据类型，如果是跨域，可以改成jsonp
dataType: 'json',
//发送给服务器的数据（请求体）,如果是get请求数据写在url,如果是post才写data属性
data: { id: 1 },
//回调函数：响应回来调用的函数
success: function (data) {
console.log(data)
},
//请求失败触发
error: function (err) {
console.log(err)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
另外, $.get()：跟上面一样的，只是不用写type属性，因为它就是发get请求的;
$.post()：跟上面一样的，只是不用写type属性，因为它就是发post请求的.
四.jQuery里面的表单序列化
特点：能找到这个表单下面所有带name属性的表单元素（file除外），能把它们自动拼接成key=value形式的字符串，key就是它们的name，value就是它们自己输入的内容或者选择的内容.
使用案例:
<script>
$('#btn').click(function(){
/*表单的序列化，它能找到这个表单下面所有带name属性的表单元素(文件是拿不到的)，
并取到它们的值，做成key=value形式的字符串，key是它们的name，
值就是它们输入或者选中的内容*/
var res = $('form').serialize();
console.log(res);
});
</script>
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo