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 &); ...
随机推荐
- django之项目部署知识点
一:项目部署的框架 nginx和uWSGI在生产服务器上进行的部署 二:什么是nginx? nginx是一个web服务器. 什么是web服务器? web服务器则主要是让客户可以通过浏览器进行访问,处理 ...
- 英语单词deploy
来源——https://www.docker.com/ Leading companies rely on our container platform to build, manage and se ...
- 【2019 Multi-University Training Contest 6】
01: 02:https://www.cnblogs.com/myx12345/p/11650764.html 03: 04: 05:https://www.cnblogs.com/myx12345/ ...
- Java架构师/高并发/高可用/高扩展/性能优化/框架源码分析实战
https://ke.qq.com/course/401944?taid=3389721334391320
- Java Web学习笔记之---EL和JSTL
Java Web学习笔记之---EL和JSTL (一)EL (1)EL作用 Expression Language(表达式语言),目的是代替JSP页面中复杂的代码 (2)EL表达式 ${变量名} ( ...
- Linux CentOS7 安装docker
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口 ...
- Oracle 中 not exists (select 'X' ...) 的含义
select a.col1,a.col2 from temp1 a where not exists (select 'X' from temp2 b where b.col2 = a.col1);s ...
- chrome 手机端滑动列表的时候控制台会出现很多提示的解决办法
问题: Unable to preventDefault inside passive event listener 可以加入touch-action 属性,具体参照MDN, https://deve ...
- 不缓存JS
方法一:告诉浏览器不要缓存(不一定好使) <meta http-equiv="Pragma" content="no-cache"> <met ...
- 138、Tensorflow serving 实现模型的部署
将Tensorflow模型部署成Restful接口 下面是实现过程,整个操作都是在Linux上面实现的,因为Tensorflow Serving 目前还只支持Linux 这个意义真的是革命性的,因为从 ...