Ajax原理与封装
来源:互联网 发布:阿里云主机多少钱 编辑:程序博客网 时间:2024/05/19 04:27
Ajax大家每天都在用,jquery库对Ajax的封装也很完善、很好用,下面我们看一下他的内部原理,并手动封装一个自己的Ajax库。
更多有关ajax封装及数据处理,请参看上海尚学堂《Ajax中replace+Jq封装的ajax》、《ajax+json数据处理》
1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于处理返回的数据
4) 发送请求: send()
更多有关ajax封装及数据处理,请参看上海尚学堂《Ajax中replace+Jq封装的ajax》、《ajax+json数据处理》
一、原理
原生Ajax的发送需要四步:1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于处理返回的数据
4) 发送请求: send()
//TODO step1: 创建ajax对象var xhr = new XMLHttpRequest();//TODO step2: 设置请求参数xhr.open('get','01.php',true);//TODO step3: 设置回调xhr.onreadystatechange = function () { //接收返回数据 console.log(xhr.responseText);//responseText 用于接收后台响应的文本}//TODO step4: 发送请求xhr.send();
二、封装
封装的核心思想就是把需要动态变化的部分当成参数,不变的部分就留在那里,在上面的代码中请求方式(get、post)、请求地址url、请求参数data、成功的回调success、失败回调error等,这些参数都是动态变化的;而创建Ajax对象 XMLHttprequest、事件监听onreadystatechange等是固定的,所以第一步我们要确定好封装的参数:
url 请求地址
data 请求数据
type 请求类型
success 成功回调
error 失败回调
beforeSend 发送前调用 return false 阻止发送
complete ajax请求成功的回调, 无论什么时候都会执行
function ajax(option){ //用户配置option 默认配置init var init = { type:'get', async:true, url:'', success: function () { }, error: function () { }, data:{}, beforeSend: function () { console.log('发送前...'); return false; } }; //TODO step1: 合并参数 for(k in option){ init[k] = option[k]; } //TODO step2: 参数转换 var params = ''; for(k in init.data){ params += '&'+k+'='+init.data[k]; } var xhr = new XMLHttpRequest(); // type url //TODO step3: 区分get和post,进行传参 var url = init.url+'?__='+new Date().getTime(); //TODO step4: 发送前 var flag = init.beforeSend(); if(!flag){ return; } if(init.type.toLowerCase() == 'get'){ url += params; xhr.open(init.type,url,init.async); xhr.send(); }else{ xhr.open(init.type,url,init.async); xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send(params.substr(1)); } xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status == 200){ init.success(xhr.responseText); }else{ //error init.error(); } } }}
这里我们要注意的是get和post的传参方式位置不一样,get请求需要直接拼接在url地址后边,post请求需要在send方法里面传参,而且需要这是请求头setRequestHeader('content-type','application/x-www-
form-urlencoded'),所以封装时要进行区分。
由于参数过多,用户不需要每次都传入很多参数,否则用起来会非常繁琐。所以我们采取默认参数的形式,用户不传入就是用默认值,传入就是用用户的参数。
三、使用示例
ajax({ url: 'test.json', data:{test:123,age:456}, //type:'post', success: function (res) { console.log(res); }});
阅读全文
0 0
- Ajax原理与封装
- AJAX原理及封装
- Ajax原理和封装
- Ajax实现原理,代码封装
- Ajax与简易封装
- Ajax函数封装与调用
- 简单了解AJAX,AJAX封装与应用
- AJAX的工作原理和封装
- AJAX的实现原理以及封装
- Ajax与HttpXML原理
- Ajax原理与使用
- jquery中ajax封装原理/封装jquery的ajax工具函数
- XmlHttpRequest CORS 与 AJAX封装类
- 工作中jsonp 与ajax的封装
- Ajax的原理与应用
- 10001---Ajax定义与原理
- ajax 的简述与原理
- ajax的工作原理以及异步请求的封装
- ArcGIS的swm二进制文件处理成为矩阵形式的文本文件
- MySQL 悲观锁和乐观锁和共享锁
- 装饰模式
- 多线程并发系统-----讲解
- Android中评分条AppCompatRatingBar
- Ajax原理与封装
- 数据结构
- Android Architecture Components(1)
- SpringBoot非官方教程 | 第十七篇:上传文件
- symbol(s) not found for architecture arm64
- 索引失效原因
- quartus modelsim-altera, Can't launch the Modelsim-Altera Software
- Mesos + Marathon + Chronos + Docker环境安装
- SVN命令使用详解