ajax_封装函数_升级_传递多个参数和传递一个参数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2>测试工具函数</h2>
<input class='get' type="button" value='测试get'>
<input class='post' type="button" value='测试post'>
<input class='ajax_test' type="button" value='测试ajax_test'>
<input class='ajax' type="button" value='测试ajax'>
<input class='json' type="button" value='获取json'>
<input class='xml' type="button" value='获取xml'>
</body>
</html>
<!-- 导入 js -->
<script src="./ajax.js"></script>
<!-- 自己的js -->
<script>
// get请求
document.querySelector('.get').onclick = function(){
// 直接调用 get方法
//function get(url, data, success)
get('../00.backData/01.backSendData.php','name=jack&friend=rose',function(data){
console.log(data);
})
} // post请求
document.querySelector('.post').onclick = function(){
// 直接调用 get方法
//function post(url, data, success)
post('../00.backData/01.backSendData.php','name=rose&friend=青椒',function(data){
alert(data);
})
} // ajax 自选get post
document.querySelector('.ajax_test').onclick = function(){
// ajax_test('../00.backData/01.backSendData.php','get','name=葫芦娃&food=胡萝卜',function(data){
// alert('葫芦娃');
// alert(data);
// })
ajax_test('../00.backData/01.backSendData.php','post','name=蛇精&food=爷爷',function(data){
alert('蛇精');
alert(data);
})
} // ajax 只传递一个参数
document.querySelector('.ajax').onclick = function(){
ajax({
type:'get',
data:'skill=爱吃西兰花和芹菜蹦蹦跳跳好可爱&name=兔子',
success:function(data){
document.body.innerHTML = data;
},
url:'../00.backData/01.backSendData.php'
});
} // 获取json
document.querySelector('.json').onclick = function(){
ajax({
type:'get',
url:'../00.backData/backJSON.php',
success:function(data){
console.log(data);
}
})
} // 获取 xml
document.querySelector('.xml').onclick = function(){
ajax({
type:'post',
url:'../00.backData/backXML.php',
success:function(data){
console.log(data);
}
})
}
</script>
JS封装：
/**
* ajax工具函数-get
* @param {*} url
* @param {*} data(key1=value1&key2=value2)
* @param {*} success
*/
function get(url, data, success) {
var xhr = new XMLHttpRequest();
if (data) {
url += '?';
url += data;
}
xhr.open('get', url);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
success(xhr.responseText);
}
}
xhr.send(null);
} /**
* ajax工具函数-post
* @param {*} url
* @param {*} data (key1=value1&key2=value2)
* @param {*} success
*/
function post(url, data, success) {
var xhr = new XMLHttpRequest();
xhr.open('post', url);
if (data) {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
success(xhr.responseText);
}
}
xhr.send(data);
} /**
* 参数越来越多之后 用户如果要传递参数 必须遵循
* @param {*} url
* @param {*} type
* @param {*} data
* @param {*} success
*/
function ajax_test(url, type, data, success) {
var xhr = new XMLHttpRequest();
// 如果是get 并且有数据
if (type == 'get' && data) {
url += '?';
url += data;
data = null; // 这样最后直接send data即可
}
xhr.open(type, url);
// post请求 并且有数据
if (type == 'post' && data) {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
success(xhr.responseText);
}
}
xhr.send(data);
} // 只传递一个参数
// 用户传入的是 对象
/*
键名
url
type
data
success
用户不需要记忆 参数的顺序 只需要记忆 参数的属性名即可
大部分的框架 都是这么做的
*/
function ajax(option) {
var xhr = new XMLHttpRequest();
// 如果是get 并且有数据
if (option.type == 'get' && option.data) {
option.url += '?';
option.url += option.data;
option.data = null; // 这样最后直接send data即可
}
xhr.open(option.type, option.url);
// post请求 并且有数据
if (option.type == 'post' && option.data) {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// option.success(xhr.responseText);
// console.log(xhr.getResponseHeader('Content-Type'));
var type = xhr.getResponseHeader('Content-Type');
// 是否为json
if (type.indexOf('json') != -1) {
option.success(JSON.parse(xhr.responseText));
}
// 是否为xml
else if (type.indexOf('xml') != -1) {
option.success(xhr.responseXML);
}
// 普通字符串
else {
option.success(xhr.responseText);
}
}
}
xhr.send(option.data);
} /*
总结
封装的目的
让我们把精力集中在逻辑
页面的交互效果
基础的部分不用每次都来一遍
封装的步骤
固定的部分 抽取
不固定的部分 作为参数
参数很多==>
使用对象 来优化
封装的好坏
功能能否正常执行
代码的简洁程度(可读性)
考虑的问题是否足够多,兼容性问题,异常处理
*/
ajax_封装函数_升级_传递多个参数和传递一个参数的更多相关文章
- ajax_封装函数_步骤1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- 宏定义中的##操作符和... and _ _VA_ARGS_ _
1.Preprocessor Glue: The ## Operator 预处理连接符:##操作符 Like the # operator, the ## operator can be used i ...
- JavaScript中DOM查询封装函数
在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...
- 关于Ajax请求的JS封装函数
每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下: 再来解释一下其中obj对象的参数形式: obj={ 'type':提交方式, get/post 'url' : 提交地址, ...
- Python-老男孩-01_基础_文件IO_函数_yield_三元_常用内置函数_反射_random_md5_序列化_正则表达式_time
Python2.7 缩进统一: 约定 常量 大写 , 变量 小写 判断一个变量在内存中的地址,也能看出是不是一个值 id()函数 >>> x = 'abc' >>&g ...
- Oracle学习总结_day03_day04_条件查询_排序_函数_子查询
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day03_条件查询_排序_函数 清空回收站: PUR ...
- BZOJ_1579_[Usaco2009 Feb]Revamping Trails 道路升级_分层图最短路
BZOJ_1579_[Usaco2009 Feb]Revamping Trails 道路升级_分层图最短路 Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M ...
- 安装_升级Eclipse插件
在线安装_升级Eclipse插件可以保证插件的完整性,并可自由选择最新版本.1.单击Eclipse的Help菜单,选择"Install New Software"菜单项2.单击&q ...
- ca71a_c++_指向函数的指针_通过指针调用函数txwtech
/*ca71a_c++_指向函数的指针_通过指针调用函数用typedef简化函数指针的定义简化前: bool(*pf)(const string&, const string &); ...
随机推荐
- No qualifying bean of type xxx' available 的一种解决方法
获取bean Class beanClass = Class.forName(event.className); FilterEvent filterEvent = (FilterEvent)Bean ...
- CSS3弹性盒模型flexbox布局
属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器.· box:将对象作为弹性伸缩盒显示. ...
- adb server version (31) doesn’t match this client (36); killing…
版权声明:蜜蜂采花酿蜂蜜,奶牛吃草产牛奶. https://blog.csdn.net/codehxy/article/details/52175186 案例1 报错信息如下 C:\Users\lin ...
- python中sort与sorted区别
1.sort()函数 (只对list有用) sort(...) L.sort(key = None,reverse=False) key = 函数 这个函数会从每个元素中提取一个用于比较的关键字.默认 ...
- DELPHI FMX 同时使用LONGTAP和TAP
在应用到管理图标时,如长按显示删除标志,单击取消删除标志.在FMX的手势管理中,只有长按LONGTAP,点击TAP则是单独的事件,不能在同事件中管理.在执行LONGTAP后,TAP也会被触发,解决方 ...
- 20180715-Java日期时间
import java.util.Date;public class DateDemo{ public static void main(String[] args){ //初始化Date对象 Dat ...
- CodeForces - Path Queries (并查集+离线查询)
题目:https://vjudge.net/contest/323699#problem/A 题意:给你一棵树,然后有m个查询,每次查询问一条路径最大边小于给定查询的数量 思路:首先我们看到,我们其实 ...
- spring boot中@ControllerAdvice的用法
@ControllerAdvice ,这是一个增强的 Controller.使用这个 Controller ,可以实现三个方面的功能: 全局异常处理 全局数据绑定 全局数据预处理 灵活使用这三个功能, ...
- jinjia2 模板学习
参考链接https://blog.csdn.net/langkew/article/details/51734423
- 多行文本溢出隐藏处理，兼容ie，火狐
问题 多行文本溢出隐藏,webkit内核浏览器如谷歌支持如下写法: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - ...