本文摘自PHP中文网,作者Guanhui,侵删。
Ajax大家每天都在用,jquery库对Ajax的封装也很完善、很好用,下面我们看一下它的内部原理,并手动封装一个自己的Ajax库。一、原理
原生Ajax的发送需要四步:
1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于处理返回的数据
4) 发送请求: send()
1 2 3 4 5 6 7 8 9 10 11 |
|
二、封装
封装的核心思想就是把需要动态变化的部分当成参数,不变的部分就留在那里,在上面的代码中请求方式(get、post)、请求地址url、请求参数data、成功的回调success、失败回调error等,这些参数都是动态变化的;而创建Ajax对象 XMLHttprequest、事件监听onreadystatechange等是固定的,所以第一步我们要确定好封装的参数:
v url 请求地址
v data 请求数据
v type 请求类型
v success 成功回调
v error 失败回调
v beforeSend 发送前调用 return false 阻止发送
v complete ajax请求成功的回调, 无论什么时候都会执行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
|
这里我们要注意的是get和post的传参方式位置不一样,get请求需要直接拼接在url地址后边,post请求需要在send方法里面传参,而且需要这是请求头setRequestHeader('content-type','application/x-www-form-urlencoded'),所以封装时要进行区分。
由于参数过多,用户不需要每次都传入很多参数,否则用起来会非常繁琐。所以我们采取默认参数的形式,用户不传入就是用默认值,传入就是用用户的参数。
三、使用示例
1 2 3 4 5 6 7 8 |
|
以上就是原生JS封装AJAX方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《js》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者