ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数
ajax通讯原理
要解释ajax的原理,需要从旧的交互方式开始,当用户触发一个http请求到服务器,服务器对其进行处理之后,再返回一个新的html页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互,只需要服务器端返回一个很简单的数据,都要返回一个完整的html页,而用户每次都要浪费时间和宽带去重新读取整个页面,而使用ajax后,用户从感觉上几乎所有的操作都会很快得到响应从而感觉不到页面重载的等待
ajax的原理简单来说是在用户和服务器之间加了一个中间层(AJAX引擎),通过XMLHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用js来操作dom而更新页面,是用户操作与服务器响应一步化,而这其中最关键的一步就是从服务器获得请求数据。
ajax的过程只涉及JS,XMLHttpRequest和DOM,XMLHttpRequest是ajax的核心机制,他是在IE5中首先引入的,是一种支持异步请求的技术,简单说,也就是js可以及时向服务器提出请求和处理响应,而不阻塞用户,达到无刷新的效果
大致分为几步
1:准备载体
2:内容初始化
3:送信
4:等待回信
5:收到回信
创建通信对象
绝大多数浏览器使用XMLHttpRequest创建对象,IE7以下的版本使用ActiveObject创建通讯对象,此时readyState的值为0
var xhr = new XMLHttpRequest();
readyState属性,从xhr创建的一刻就存在,其值在一开始等于0,并会随着进程的变化而变化
readyState = 0;创建xhr对象;
readyState = 1;使用open初始化对象后;
readyState = 2;使用send发送请求后;
readyState = 3;接受到返回数据后;
readyState = 4:返回数据接受完毕,这是可以处理使用返回数据
onreadystatechange,事件处理程序,当readyState变化时触发,用来监测readyState
responseText:用于存放返回的数据
responseXML:有时也会存储在这里
var onreadystatechange = function(){
// 当readyState == 4时可以对数据进行操作
if(xhr.readyState == 4){
console.log(xhr.responseText); //这里xhr.responseText用于存放被返回的数据
}
}
使用xhr.open来初始化通讯对象,open括号中有三个参数(请求方式,url,是否异步(默认为异步true)),此时readyState的值为1;
使用xhr.send()来发送请求(当请求方式为post时,向后台传递的参数需要放在send实参内部),此时readyState的值为2
xhr.open("get","ajaxTest.json",true);
xhr.send();
xhr.abort,在发送之后取消,必须在发送后,收到回信前执行才会有效果
网络请求状态
status:表示http通信状态码:
以下为集中常见的http通信状态码(一般200~300都表示正常)
通讯状态码
表示内容
200
请求成功,服务器正常运行
304
请求成功,但是服务器检测到直至上次请求,该资源未改变,要求浏览器使用缓存文件
403
服务器拒接访问该资源
404
服务器找资源找不到
500及以上
通常表示服务端程序错误
statueText:表示http通讯状态描述
封装Ajax函数
XMLHttpRequest在绝大多数浏览器下都支持,而IE低版本下(ie6)不支持该构造函数,需要使用ActiveXObject,该构造函数需要使用对应的参数构造出通信对象
['MSXML.XMLHttp.6.0', 'MSXML.XMLHttp.3.0', 'MSXML.XMLHttp']
首先,创建xhr函数
调用createXhr(),其返回值是一个xhr,以下代码包含了对于版本的判断
function createXhr(){
//首先检查是否支持XMLHttpRequest
if (typeof XMLHttpRequest !== "undefined"){
//新建xhr对象并返回
return new XMLHttpRequest();
}else if(typeof ActiveXObject !== "undefined"){
//如果不支持XMLHttpRequest则检查是否支持ActiveXObject,支持则使用其创建xhr
var strList = ["MSXML.XMLHttp.6.0","MSXML.XMLHttp.3.0","MSXML.XMLHttp"];
//由于不确定看具体参数,使用循环尝试方法创建对象
for(var i = 0;i < strList.length ; i++){
try{
var xhr = new ActiveXObject(strList[i]);
return xhr;
}catch(e){
console.log(e);
}
}
}else{
console.log("对不起,你的浏览器不支持ajax请求!!");
}
}
然后请求发送数据
/**
* 创建一个Ajax方法
* @method $AJAX
* @param {Obj/Arr/String/B} data 传递的参数
* @param {String} type 请求类型
* @param {String} url 请求地址
* @param {Boolean} isAsyn 同步异步默认为true异步
* @param {Function} callback 回调函数
*/
function $AJAX(data, type, url, isAsyn, callback){
//创建通信对象xhr
var xhr = createXhr();
//监听通信状态
xhr.onreadystatechange = function(){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
if(xhr.readyState == 4){
var resData = JSON.parse(decodeURIComponent(xhr.responseText)); //将字符还原为中文
callback && callback(resData);
}
}
}
// 处理get请求参数
if (type.toLowerCase() == "get"){
url += "?";
for(var n in data){
url += n+"="+data[n]+"&";
}
url = url.substr(0, url.length-1);
data = null;
}else{
//将上送对象转化为json格式字符串,并最中文进行转码
data = encodeURIComponent(JSON.stringify(data));
}
//初始化
xhr.open(type, url, isAsyn);
//发送请求
xhr.send(data);
}
ajax的中文转换
encodeURI()、decodeURI()
encodeURIComponent(), decodeURIComponent()
分别将中文转换为字符,和将字符还原为中文
image.png
ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数相关推荐
- 使用原生JS封装一个Ajax
原生的Ajax写起来比较麻烦,而且每次使用的时候都得从头开始写,导致了很多不必要的工作量,产生了大量的冗余代码.这里就可以封装一个Ajax,以供以后的开发中进行使用. 首先,要想封装一个Ajax,就得 ...
- html jsf ajax blur,JSF和AJAX:隐藏网站的一部分,直到第一个Ajax请求
我想创建一个页面,其中一些内容将在ajax请求后显示.这里是我的代码部分:JSF和AJAX:隐藏网站的一部分,直到第一个Ajax请求 Retrive object by id: You retrive ...
- ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
- ajax请求封装,封装的ajax请求
在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...
- 先定一个小目标,自己封装个ajax
你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
- ajax跨域请求原理,Ajax跨域请求的原理(图文教程)
这篇文章主要为大家详细介绍了Ajax跨域请求的原理,Ajax怎么样做跨域请求?具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容 ...
- 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案
写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...
最新文章
- 终于看见光的速度了:每秒一万亿帧的相机,拍摄到光的运行状态!
- linux中根目录下各个目录的作用
- 小流域水土保持遥感信息系统
- 解决MongoDB 日志文件过大,清理后还占用很大磁盘空间的问题
- java8之重新认识HashMap(转自美团技术团队)
- 制作系统盘,重装新系统。
- java学习(157):线程的引入
- 快速实现手势解锁功能
- arm-linux-gcc /lib/libc.so.6,链接器 – 找不到/lib/libc.so.6
- 大数据分析有哪些陷阱
- javascript数据结构——栈
- elasticsearch 1.1.0 mmseg 英文数字分词
- Java基础-API手册
- Java调用ffmepg+mencoder视频格式转换(*)
- 安卓强刷linux,安卓系统使用dd命令强制刷入以强制升降级、刷入低底包
- 命令启动oracle实例,【单选题】启动oracle数据库实例的命令是
- Ubuntu 桌面美化教程
- gradle系列-1-gradle -x test clean build
- 10-富文本编辑器wangEditor的使用
- C++ 简单编程——两数相乘
热门文章
- L1正则化为什么又叫做稀疏因子?
- 计算机组成原理实验报告名,计算机组成原理的实验报告
- 第三代基因测序技术革新 云计算的应用
- E. coli 大肠杆菌 短read ERR022075
- python 字符串按指定分隔符分割
- 图像去噪--Noise2Noise: Learning Image Restoration without Clean Data
- LeetCode 207. Course Schedule--有向图找环--面试算法题--DFS递归,拓扑排序迭代--Python
- ASP .NET Core Web MVC系列教程四:添加模型
- shell脚本的基础知识
- python 函数调用列表,函数调用列表的Python oneliner