原生js实现Ajax的原理。
Ajax(Asynchronous JavaScript and XML)表示异步的js与xml。
有别于传统web的同步开发方式。
原理:通过XMLHttpRequest对象向服务器发送异步请求,从服务器获得数据,然后使用js操作DOM更新数据。
该对象是ajax的核心机制,他是在IE5中首先引入的,是一种支持异步请求的技术。
通过ajax可以及时的向服务器提出请求和处理响应,而不阻塞用户,达到无刷新更新部分页面的效果。
XMLHttpRequest这个对象的属性有:
onreadystatechange 每次状态改变所触发事件的事件处理程序;
responseText 从服务器进程返回数据的字符串形式;
responseXML 从服务器进程返回的DOM兼容的文档数据对象;
status 从服务器返回的数字代码,常见的200(客户端请求成功,已就绪)和404(请求资源不存在)
statusText 伴随状态码的字符串信息 (eg:200 OK)
readyState 对象状态值
0(未初始化状态)对象已建立或已被abort()方法重置,尚未调用open方法。
1(初始化状态)open()方法已经调用,但是send()方法为调用。请求还没有被发送。
2(发送数据)send()方法法以调用,HTTP请求已发送到Web服务器。未接收到响应。
3(数据传送中)所有响应头部都已经接收到。响应体开始接受但未完成。
4(完成加载)HTTP响应已经完全接收。
ajax({
url: "./TestXHR.aspx", //请求地址
type: "POST", //请求方式
data: { name: "super", age: }, //请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
},
error: function (status) {
// 此处放失败后执行的代码
}
});
开始封装
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
var xhr; //创建 - 第一步
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if(window.ActiveObject) { //IE6及以下
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} //连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
} //接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == ) {
var status = xhr.status;
if (status >= && status < || status == ) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.error && options.error(status);
}
}
}
} //格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace("."));
return arr.join("&");
}
原生js实现Ajax的原理。的更多相关文章
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 原生JS的Ajax技术
1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...
- 原生js实现ajax与jquery的ajax库,及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
- 用原生js实现ajax、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生js实现ajax封装
一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
随机推荐
- 微信公众号开发笔记2(nodejs)
本篇主要记录调用微信各种api和功能实现 一.始于access_token 无论调用微信的什么api,都需要一个查询参数,就是我们每隔1小时或者2小时获取的access_token,笔记1中已经保证了 ...
- (知识点)JS获取网页高度
网页可见区域的宽:document.body.clientWidth 网页可见区域的高:document.body.clientHeight 网页可见区域的宽:document.body.offset ...
- Activity设置全屏显示的两种方式及系统自带theme属性解析
转载说明:原贴地址:http://blog.csdn.net/a_running_wolf/article/details/50480386 设置Activity隐藏标题栏.设置Activity全屏显 ...
- mysql5.6源码自动安装脚本
将脚本与源码安装包放在同一目录下,执行脚本即可(执行脚本会使用yum安装依赖包) 安装完成之后,既可以使用mysql -uroot -p登录 脚本内容如下: [root@mysql src]# c ...
- 解析Excel文件并把数据存入数据库
前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中.花了两天时间,不过一天多是因为用了"upload"关键字作为URL从而导致 ...
- C++ 常见的 Undefined symbols for architecture *
出现 Undefined symbols for architecture x86_64: 的原因 1.函数申明了,却未被定义. 2.申明的虚函数未被实现. NOTE: a missing vtabl ...
- java内存模型1
并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体).通信是指线程之间以何种机制来交换信息.在命令式编程中,线程之间的通信 ...
- EntityFramework中出现DateTime2异常的完美解决办法
今天在使用entityframework往数据库插入数据的时候,突然出现了一个数据类型转换异常的问题: System.Data.SqlClient.SqlException: 从 datetime2 ...
- Java 程序员快速上手 Kotlin 11 招
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:霍丙乾 近经常会收到一些 "用 Kotlin 怎么写" 的问题,作为有经验的程序员, ...
- j2ee分布式架构 dubbo + springmvc + mybatis + ehcache + redis 分布式架构
介绍 <modules> <!-- jeesz 工具jar --> <module>jeesz-utils</module> ...