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 &); ...
随机推荐
- 原生jdbc操作
1:加入dbcp连接池依赖 <dependency> <groupId>org.apache.commons</groupId> <artifactId> ...
- AOP技术介绍－－（AOP技术基础）
2.1 AOP技术起源 AOP技术的诞生并不算晚,早在1990年开始,来自Xerox Palo Alto Research Lab(即PARC)的研究人员就对面向对象思想的局限性进行了分 ...
- 在子组件中触发事件，传值给父组件-vue
1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...
- 伊朗Cisco路由器遭黑客攻击 全国互联网几乎瘫痪
2018年4月9日,黑客攻击了伊朗的国家信息数据中心.伊朗internet信息安全部称,此次大规模袭击影响了全球约二十万个思科Cisco路由交换器,也包括伊朗的几千个路由器.攻击也影响了互联网服务供应 ...
- voc数据集坐标，coco数据集坐标
voc,如上图 x1 ,y1 ,x4, y4 bbox的坐标格式是,x,y的最大最小值,也就是box的左上角和右下角的坐标 coco x,y,w,h box左上角的坐标以及宽.高 图 ...
- Windows10下安装Jupyter
打开cmd 升级pip3的版本: pip3 install --upgrade pip 安装Jupyter pip3 install jupyter
- xcode7 添加个人账户 is not on any development teams
XCODE7已经可以免费真机测试, 但添加个人账户后,显示 is not on any development teams , 解决办法: 点击 “-” 删除当前账户,退出XCODE重新打开再添加即可 ...
- .Net Core 学习目录（搁置）
简介 .NET Core 是.NET Framework的新一代版本,是微软开发的第一个官方版本,具有跨平台 (Windows.Mac OSX.Linux) 能力的应用程序开发框架 (Applicat ...
- luoguP3806 【模板】点分治1
#include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) #define ...
- linux如何查看端口被哪个进程占用的方法
linux如何查看端口被哪个进程占用的方法: 1.lsof -i:端口号2.netstat -tunlp|grep 端口号 都可以查看指定端口被哪个进程占用的情况[步骤一]lsof -ilsof -i ...