Ajax入门(二)Ajax函数封装

  • A+
所属分类:JavaScript

如果看了的我上一篇博客《Ajax入门(一)从0开始到一次成功的GET请求》的话,肯定知道我们已经完成了一个简单的get请求函数了。如下:

为什么要继续进行Ajax函数封装?

原因如下:

  • 目前方法只能使用get请求,而不能使用post请求,而在用户注册时必须使用POST,因为POST,现在不够完整。
  • 目前请求参数只能直接写在url里,不利于动态获取数据,应该使用参数解析的方式,便于使用。
  • get请求方式请求缓存问题。
  • 学习封装方法.

改造目标

options是一个对象,里面可以包括的参数为:

  • type: post或者get,可以有一个默认值
  • data: 发送的数据,为一个键值对象或者为一个用&连接的赋值字符串
  • onsuccess: 成功时的调用函数
  • onfail: 失败时的调用函数

改造开始(三步)

(一)原函数的改造

形参中,删除fnSucc、fnFaild 添加options。使成功与失败执行的函数变成options对象的 onsuccess、onfail两个方法对应的值。

主要是在4、接收返回部分进行更改,如下

(二)请求参数的处理

首先我们要知道的是在使用请求参数存在时,GET方式的请求参数特别简单。直接在url后面添加?参数名=参数值&参数名二=参数值二

实现思路:

  1. 首先判断options.data是否存在,不存在时使用"?timestamp= + new Date().getTime();链接在url后,以清除缓存。
    • 这里只是我使用的方法,这里的timestamp可以随意更改
    • new Date().getTime();也可以用Math.random();主要是保持每次请求的url都不一样。
    • 还有许多别的方法参考Ajax缓存问题怎么解决?。有兴趣的自己再多google一下吧。
  2. 存在options.data时,应该限制请求data格式便于处理,设定为JSON(当然没必要像JSON那么严格,但是应该保持键值对的格式)。
  3. 使用for in 遍历data,使用=来连接键与值,使用&来连接多个请求参数
  4. 只需要对原函数中的2.连接服务器进行更改

实现如下:

原:

现:

(三)请求类型选择

使用post发送数据,模拟form提交。在url看不到请求参数,更加安全。

实现思路:

  1. 判断是否type是否存在,存在时转为大写,默认为GET请求。
  2. 判断请求的类型,GET 或 POST 。
  3. 在使用post请求提交数据时,请求参数不跟在url后面。
  4. 使用post请求数据必须添加在open()send()直接添加头信息。
    • xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  5. 使用post请求数据,对2.连接服务器、3.发送请求部分进行处理

实现如下:

原:

现:

最终完成

结合之前写的,集合起来。

最终完成就是这样了。当然还远远算不上完美,比如try catch的使用 ,但是通过这样的封装,还是学到很多知识。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: