Got to cherish, do not get up.
$ .Get Ajax art () Package
- $ .Get (var1, var2, var3, var4); four parameters
- A parameter: a request address backend
- Two parameters: the data to be sent to the rear end of the program, the object JSON / js objects (recommended) or may be a string
- Parameters Three: When readyState == 4 triggers a function that has one parameter, the data returned by the back-end
- Four parameters: set the return data type: text (default) the XML ... JSON
Katex the parse error: the Expected 'the EOF', GOT '&' position AT 25: et.php ... ',' ID = 111 & name = LDX ', ... FUNCT .get encapsulation understanding the following method
The first step: First, write a specific case,
- Specific cases: a package a get method, able to send ajax request, the request 1.PHP file, and is capable of receiving a return value
① using native js ajax request to complete the process.
② $ define objects, and then get member defined method.
<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>
-
File handling 1.php can only access files.
Ideas: Set parameter defining the get function, the function call arguments passed① modification get method, set parameters 1 - url address request
<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>
- Data processing request can not be sent back file
ideas: the string of assembled objects js, after splicing url address request
$ .get ( '1.php', { "id": 1, "name": "zs"} , ...) -> 1.php id = 1 & name = zs?
essence: { "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>
- 4 == callback processing the readyState
① parameters are set in $ .get method 3, the method used in the body in the form of a function call, a function performed equivalent
<!-- <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> -->
- Processing is capable of receiving different types of return value
① When $ .get method declaration, setting 4, 4 parameter values of the parameters is determined, and if additional processing is performed 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> -->
Above is the complete package, but in fact it is to the specific needs of planning, step by step operation, in some places you might not think of what to do, but you should understand after reading about the same. Ended.
Here I attach the QQ: 2489757828 a problem, then we can explore with
my private blog: Lida Xuan