Ajax入门(二)Ajax函数封装
如果看了的我上一篇博客《Ajax入门(一)从0开始到一次成功的GET请求》的话,肯定知道我们已经完成了一个简单的get请求函数了。如下:
1 |
/** |
为什么要继续进行Ajax函数封装?
原因如下:
- 目前方法只能使用get请求,而不能使用post请求,而在用户注册时必须使用POST,因为POST,现在不够完整。
- 目前请求参数只能直接写在url里,不利于动态获取数据,应该使用参数解析的方式,便于使用。
- get请求方式请求缓存问题。
- 学习封装方法,
改造目标
1 |
function ajax(url, options) { |
options是一个对象,里面可以包括的参数为:
- type: post或者get,可以有一个默认值
- data: 发送的数据,为一个键值对象或者为一个用&连接的赋值字符串
- onsuccess: 成功时的调用函数
- onfail: 失败时的调用函数
改造开始(三步)
(一)原函数的改造
形参中,删除fnSucc
、fnFaild
添加options
。使成功与失败执行的函数变成options对象的 onsuccess
、onfail
两个方法对应的值。
主要是在4、接收返回部分进行更改,如下
1 |
//4.接收返回 |
(二)请求参数的处理
首先我们要知道的是在使用请求参数存在时,GET方式的请求参数特别简单。直接在url后面添加?参数名=参数值&参数名二=参数值二
实现思路:
- 首先判断options.data是否存在,不存在时使用
"?timestamp= + new Date().getTime();
链接在url后,以清除缓存。- 这里只是我使用的方法,这里的timestamp可以随意更改
new Date().getTime();
也可以用Math.random();
主要是保持每次请求的url都不一样。- 还有许多别的方法参考Ajax缓存问题怎么解决?。有兴趣的自己再多google一下吧。
- 存在options.data时,应该限制请求data格式便于处理,设定为JSON(当然没必要像JSON那么严格,但是应该保持键值对的格式)。
- 使用for in 遍历data,使用
=
来连接键与值,使用&
来连接多个请求参数 - 只需要对原函数中的2.连接服务器进行更改
实现如下:
原:
1 |
//2.连接服务器 |
现:
1 |
//open(方法,url,是否异步) |
(三)请求类型选择
使用post发送数据,模拟form提交。在url看不到请求参数,更加安全。
实现思路:
- 判断是否type是否存在,存在时转为大写,默认为GET请求。
- 判断请求的类型,GET 或 POST 。
- 在使用post请求提交数据时,请求参数不跟在url后面。
使用post请求数据必须添加在
open()
与send()
直接添加头信息。xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
使用post请求数据,对2.连接服务器、3.发送请求部分进行处理
实现如下:
原:
1 |
//2.连接服务器 |
现:
1 |
//3.发送请求 |
最终完成
结合之前写的,集合起来。
1 |
/** |
最终完成就是这样了。当然还远远算不上完美,比如
try catch
的使用 ,但是通过这样的封装,还是学到很多知识。
From:http://guowenfh.github.io/2015/12/18/Ajax-elementary-course-2-fn/
Ajax入门(二)Ajax函数封装的更多相关文章
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
{Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) Django基础七之 ...
- Ajax入门(二)
接收服务器返回的消息 1,定义触发Ajax的js效果 2,创建Ajax方法 如果返回的数据是XML,则需使用aj.responseXML 3,接收服务器返回的消息,并显示在网页上 错误案例:直接接收服 ...
- Python入门二:函数
一.函数的定义和使用 1.基本结构: def 函数名(参数): """ 文档字符串 """ 函数体 返回值 2.函数名: 和变量名命名规则一 ...
- 定时器中的this和函数封装的简单理解;
一.定时器中的this: 不管定时器中的函数怎么写,它里面的this都是window: 在函数前面讲this赋值给一个变量,函数内使用这个变量就可以改变this的指向 二.函数封装 函数封装是一种函数 ...
- rxjs入门3之项目中ajax函数封装
项目中ajax函数封装 ⽹页应⽤主要数据源有两个:⼀个是⽹页中的DOM事件,另⼀个就是通过AJAX获得的服务器资源.我们已经知道fromEvent这个操作符可以根据DOM事件产⽣Observable对 ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
- 对jquery的ajax进行二次封装
第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...
- 轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)
hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + X ...
随机推荐
- jsp用tags传递参数
<computer:trangleTag sideA="12" sideB="12" sideC="12"/>表示以字符串传递s ...
- APP测试的那些坑
在记录app测试走过的那些坑之前,先总结下app测试的工作主要有哪些: 1.功能测试,无论是什么软件产品,必不可少的就是功能测试.我们需要测试这款app产品的功能是否完善,是否符合客户需求,是否符 ...
- 解决:创建Android模拟器时提示“No system images installed for target”
今天在Eclipse上创建安卓模拟器,但发现CPU/ABI一项显示为“No system images installed for target”: 在网上搜索答案,在叶超Luka的博客中找到了答案, ...
- AIM Tech Round 4 (Div. 2)ABCD
这一场真的是血崩,a,b都被hack,还好结束前重交都过了 A:题意:找出得到k个不同的字符,所要更改的最小字符数 题解:首先如果k>字符串长度,直接impossible,然后直接记录一下不重复 ...
- c#线程中下载文件到本地
额,太懒了 直接上示例代码... /// <summary> /// 下载文件到本地 2017-05-31 /// </summary> /// <param name= ...
- python reload(sys)找不到,name 'reload' is not defined
在操作数据库的时候遇到这个问题,为什么会出现这种原因?查询如下: python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDeco ...
- java学习笔记 --- IO(2)
IO流的分类: 流向: 输入流 读取数据 输出流 写出数据 数据类型: 字节流 字节输入流 读取数据 InputStream 字节输出流 写出数据 OutputStream 字符流 字符 ...
- hdoj-1276-士兵队列训练问题(队列模拟)
题意: 新兵蛋子按照两种报数规则报数: 1.1212报数,2出队 2.123123报数,3出队 没报完一轮,检查人数,不大于3,over 略坑,必须每报完一轮检查人数,最初,按照12两种顺序报完检查人 ...
- 在Mac上激活Adobe产品
1.在任意位置下载需要的Adobe软件(推荐官网正版) 网速不好或者不通推荐下载离线安装包: https://helpx.adobe.com/download-install/kb/creative- ...
- Ubuntu16.04上安装搜狗输入法
一.下载搜狗输入法的deb包: http://pinyin.sogou.com/linux/ 二.打开终端输入命令: $ sudo dpkg -i sogoupinyin_2.0.0.0078_i38 ...