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 ...
随机推荐
- 多线程下使用Jedis
在不同的线程中使用相同的Jedis实例会发生奇怪的错误. 但是创建太多的实现也不好因为这意味着会建立很多sokcet连接,也会导致奇怪的错误发生. 单一Jedis实例不是线程安全的. 为了避免这些问题 ...
- hdu-2609-How many(串的最小表示)
题目链接 /* Name:hdu-2609-How many Copyright: Author: Date: 2018/4/24 15:47:49 Description: 串的最小表示 求出每个串 ...
- hdu-3790-最短路径问题(Dijkstra)
题目链接 /* Name:hdu-3790-最短路径问题 Copyright: Author: Date: 2018/4/16 19:16:25 Description: dijkstra 模板题 * ...
- canvas基础学习(一)
一.概述 canvas它和其它的HTML5标签的使用基本一致,但是它相当于在浏览器中建立一个画布,可以再这个画布上画图.创建动画甚至是3D游戏.由于canvas要适配不同终端的分辨率,所以尽可能的在标 ...
- spark 稠密向量和稀疏向量
Spark mlib的本地向量有两种: DenseVctor :稠密向量 其创建方式 Vector.dense(数据) SparseVector :稀疏向量 其创建方式有两种: 方法一 ...
- centos6下搭建gitlab
gitlab安装方法,最新安装方法见官网:https://www.gitlab.com.cn/installation/#centos-6 1.在 Centos 6 系统上, 下面的命令将在系统防火墙 ...
- HDU4416Good Article Good sentence(后缀自动机)
Problem Description In middle school, teachers used to encourage us to pick up pretty sentences so t ...
- 无状态服务 VS 有状态服务
无状态服务 VS 有状态服务 https://blog.csdn.net/mysee1989/article/details/51381435 对服务器程序来说,究竟是有状态服务,还是无状态服务,其判 ...
- Phone numbers
Phone number in Berland is a sequence of n digits. Often, to make it easier to memorize the number, ...
- LCD升压反压驱动电路
在嵌入式系统里,较多场合需要LCD人机界面.分析以下LCD驱动电路. LCD_VIN是3.6~5V,经过DC/DC burst升压得到LCD_AVDD,LCD_AVDD为LCD需要的模拟电压,根据LC ...