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 &); ...
随机推荐
- Windows系统中，循环运行.bat/.exe等文件
一.创建循环运行的run-everySecond.vbs文件[双击次文件即可启动运行] dim a set a=CreateObject("Wscript.Shell") Do # ...
- RabbitMQ走过的坑，发送的消息是乱码
发送的消息在可视化界面中是乱码,如图: 看见这个content_tpye没有,是不是很奇怪,就是这个坑,设置下就行,看代码: @Bean Jackson2JsonMessageConverter me ...
- 三星GT S7562 PIN 解锁方法
三星GT S7562 PIN 解锁方法 请认真阅读完下文再进行操作,操作基本安全,请保证你手机电池有电续航超过1小时 首先把内存开和电话卡取出(以防万一数据丢失) 关机状态下: 同时按音量上下键 加 ...
- final、finally、 finalize区别
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11444366.html final final可以用来修饰类.方法.变量,分别有不同的意义,final ...
- python——解释型语言
编程语言分三大类 : 低级语言 . 汇编语言 . 高级语言. 现代计算机都是基于 图灵机模型 制造的. 因此计算机的内部只能接受二进制数据.而用二进制代码 0 1 描述的指令叫 ...
- HDU6668 Polynomial（模拟）
HDU6668 Polynomial 顺序遍历找出最高次幂项的系数 分三种情况 \(1/0\).\(0/1\).\(f(x)/g(x)\) . 复杂度为 \(O(n)\) . #include< ...
- 1207D Number Of Permutations
题目大意 给你n个二元组 问你有几种排列是的按两个关键字中的任意一个都不是不降排列的 分析 不妨容斥 我们先加上总的方案数$n!$ 之后我们按第一个关键字排序 因为值相同的情况下不影响答案 所以让总方 ...
- 20160122 DataView RowFilter语法
原文出自:http://www.csharp-examples.net/dataview-rowfilter/ DataView RowFilter语法(c#) 这个例子描述了DataView.Row ...
- 【The type javax.servlet.http.HttpServletRequest cannot be resolved】解决方案
是缺少serverlet的引用库,解决如下 1.工程右键-properties->java build path 2.在java build path的libraries tab页中选择Add ...
- FCKEditor添加字体
默认情况下,FCKEditor在进行文本编辑时,无法使用中文字体.自个摸索了下:打开 fckconfig.js 文件 找到第154行(应该是),会发现:FCKConfig.FontNames = 'A ...