得到了就好好珍惜,得不到就不要了.
Ajax技术中的 $.get()封装
- $.get(var1,var2,var3,var4); 四个参数
- 参数一:请求的后端程序的地址
- 参数二:要发送到后端程序的数据,json 对象/js对象(推荐使用)或者也可以是字符串
- 参数三:当readyState == 4 的时候会触发一个函数,该函数中有一个参数,就是后端程序返回的数据
- 参数四:设置返回数据的类型: text(默认) json XML …
KaTeX parse error: Expected 'EOF', got '&' at position 25: …et.php','id=111&̲name=ldx',funct….get方法 进行了解下面进行封装
第一步 : 首先编写一个具体的案例,
- 具体案例:封装一个get方法,能够发送ajax请求,请求 1.PHP文件 , 并能够接收返回值
①. 使用原生js完成ajax请求过程
②. 定义$对象 , 再定义get成员方法
<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对象时的兼容性问题
<script>
// 设置兼容性问题
var $ = {
get: function() {
var xhr = this.createXhr(); // 调用下面的函数并进行实例化
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert(xhr.responseText);
}
}
xhr.open('get', './1.php');
xhr.send(null);
},
// 处理兼容性问题的方法
createXhr: function() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
return xmlhttp;
}
}
</script>
-
处理只能访问1.php文件的文件的问题。
思路: 定义get函数时设置形参,调用函数时传递实参① 修改get方法,设置参数1 — 请求的url地址
<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对象转为字符串
// 处理请求后台文件时无法发送数据
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;
}
一步一步进行...
<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,在方法体中使用函数形式调用,就相当于执行了一个函数
<!-- <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> -->
- 处理能够接收不同类型的返回值
① 在$.get方法声明时,设置参数4,判断参数4的值,如果是json则进行额外处理
<!-- <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> -->