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 &); ...
随机推荐
- 创建entityManager
1 需要persistence.xml 完全通过属性配置没成功 <persistence xmlns="http://java.sun.com/xml/ns/persistence&q ...
- home home clock
博客园添加home home clock 将下面代码复制进博客侧边栏广告即可 <div id="myTime"> <object classid="cl ...
- Windows结束某个端口的进程
1.打开cmd命令窗口,输入命令:netstat -ano | findstr 8080,根据端口号查找对应的PID.结果如下: 发现8080端口被PID(进程号)为2188的进程占用. 2.根据PI ...
- Nginx-配置动静分离实例
Nginx 动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,可以理解成使用Nginx 处理静态页面,Tomcat处 ...
- 【leetcode】41. First Missing Positive
题目如下: 解题思路:这题看起来和[leetcode]448. Find All Numbers Disappeared in an Array很相似,但是有几点不同:一是本题的输入存在负数,二是没有 ...
- java文件断点上传
1,项目调研 因为需要研究下断点上传的问题.找了很久终于找到一个比较好的项目. 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面. http ...
- 整数解 (hdu 2092
整数解 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- ProxyImpl 类
package com.test.mvp.mvpdemo.mvp.v7.proxy; import com.test.mvp.mvpdemo.mvp.v7.basemvp.BasePresenter; ...
- 2017华南理工华为杯D bx回文
比赛的时候队友过了,补补题XD. 题目链接:https://scut.online/p/125(赛后补题) 125. 笔芯回文 题目描述 bx有一个长度一个字符串S,bx可以对其进行若干次操作 ...
- 心形陀螺案例css3
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...