JavaScript入门之AJAX:原生ajax
背景
传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
2005年2月18号,一位大佬,名叫Jesse James Garrett(杰西·詹姆斯·贾瑞特),发表了一篇文章叫做“Ajax: A new Approach to Web Applications”,介绍了一种技术叫做Asynchronous JavaScript and XML,这项技术能够向服务器请求额外的数据而不需要重新加载页面,这样就可以部分请求数据而不需要刷新整个页面,不仅仅节约了大量的带宽,还加快了响应速度。
--摘自维基百科并稍作修改
XHR
XHR全称是XMLHttpRequest,可扩展超文本传输请求,是一个API,它通过URL在客户端和服务器端传输数据而不需要使页面刷新,提供了对 HTTP 协议的完全的访问,是AJAX技术的核心对象,AJAX的请求过程可以据此分为四个部分:
创建 XMLHttpRequest 对象
连接后台服务器
发送数据请求
接收服务器的响应数据;
XHR对象在IE5中第一次引入,对象是通过MSXML库中的一个ActiveX对象实现的。因而IE中可能遇到三种不同版本的XHR对象:MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象。
一、创建XMLHttpRequest 对象
如果要兼容IE7之前的浏览器的话,要根据不同的XHR版本来编写函数,再创建ActiveXObject对象,而其他的浏览器,则可以直接创建 XMLHttpRequest 对象。代码如下:
function createXHR(){
if (typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined"){
if (typeof arguments.callee.activeXString != "string"){
var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp"],
i, len;
for (i=0,len=versions.length; i < len; i++){
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}
var xhr = createXHR();
不过现在一般很少人想要兼容IE7之前的版本了,于是可以简化如下:
var xhr = new XMLHttpRequest();
二、连接服务器与发送数据
XMLHttpRequest连接服务器也不难:
xhr.open(method, url, async, user, password)
使用以上的open方法来初始化一个请求即可,open方法的参数说明如下:
method:
请求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下个参数是非HTTP(S)的URL,则忽略该参数. url:
该请求所要访问的URL async:
一个可选的布尔值参数,默认为true,意味着是否执行异步操作,如果值为false,则send()方法不会返回任何东西,直到接受到了服务器的返回数据。如果为值为true,一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true,如果multipart 属性是true,否则将会出现一个意外。 user:
用户名,可选参数,为授权使用;默认参数为空string. password:
密码,可选参数,为授权使用;默认参数为空string.
method方法中最常用的请求类型便是GET和POST,一般情况下:
1、GET用于向服务器查询某些信息,而POST向服务器发送要保存的数据。 2、GET将查询字符串参数追加到URL的末尾发给服务器,而POST通过传递参数给send()方法发送数据。
举个栗子:
if ( method == "GET") {
xhr.open("GET",url + "?" + params, true);
xhr.send(null);
} else if ( method == "POST") {
xhr.open("POST", url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
如上所示,GET请求是直接在URL后面添加 ?+parm_name=parm_value&……来传递数据,然后xhr.send(null)(注:null不能省略)
http://www.yourhost.com?username="myname"&password="123"
而POST请求则是模拟表单提交,将头部信息设置为表单提交时的内容类型,然后将params当做send()方法的参数传递给服务器。
三、接收服务器的响应数据
在调用send()方法后,请求便会派发到服务器,服务器对请求进行处理后作出响应。然后自动填充到XHR对象的属性中。
responseText:作为响应主体被返回的文本。
responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM 文档。
status:响应的HTTP 状态。
statusText:HTTP 状态的说明。
我们根据检测XHR对象中的 readyState 属性,可以获取当前的响应状态:
0:未初始化。尚未调用open()方法。
1:启动。已经调用open()方法,但尚未调用send()方法。
2:发送。已经调用send()方法,但尚未接收到响应。
3:接收。已经接收到部分响应数据。
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
一般而言,我们只对状态“4”感兴趣,而 readyState 每次更改,都会触发一次readystatechange监听事件,因此,我们可以通过在监听函数中判断 readyState 的来判断响应是否成功,并取得响应数据。
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
//200-300表示成功返回,304表示资源未修改
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//在这里对响应数据进行处理(保存、打印等)
console.log(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
至此,一次完整的AJAX请求就已经完成了:
//创建
var xhr = createXHR();
//监听状态、处理数据
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//对xhr.responseText响应数据进行处理;
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
//连接
xhr.open("get", "/xxx/xxx?param1=value1¶m2=value2", true);
//发送
xhr.send(null); function createXHR(){
if (typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined"){
if (typeof arguments.callee.activeXString != "string"){
var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp"],
i, len;
for (i=0,len=versions.length; i < len; i++){
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex){
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}
参考资料:
2、《JavaScript高级程序设计(第三版)》
JavaScript入门之AJAX:原生ajax的更多相关文章
- Django学习---原生ajax
Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...
- 用javascript写原生ajax(笔记)
AJAX 的全名叫做 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...
- javascript实现原生ajax
自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...
- JavaScript AJAX原生写法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- javascript实现原生ajax的几种方法介绍
自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- JavaScript的原生Ajax解析
通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百 ...
- javascript js原生ajax post请求 实例
HTML代码: 注意: xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencod ...
- AJAX原生JavaScript写法
GET方式 //创建XMLHttpRequest对象,为考虑兼容性问题,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象 var ajax = windo ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
随机推荐
- 敏捷和DevOps:是敌是友?
DevOps是敏捷在软件开发团队的另一应用.那么相比之下,哪个更胜一筹? 一边,有业界认可的scrum master,它的朋友极限编程者,以及由其衍生的 LeSS.SAFe.DAD等,是敏捷. 另一边 ...
- Waiting for 1 instance(s) to be deallocated
看是不是马虎,自己的xampp,也就是mysql有没有打开
- Linux平台 Oracle 19c RAC安装Part2:GI配置
三.GI(Grid Infrastructure)安装 3.1 解压GI的安装包 3.2 安装配置Xmanager软件 3.3 共享存储LUN的赋权 3.4 使用Xmanager图形化界面配置GI 3 ...
- Asp.Net MVC 高级特性(附带源码剖析)
1. 程序入口(MvcHandler,RouteHandler,HttpModule) 2.异步类包(静态类AsyncResultWrapper),开启整个MVC异步循环 3.Aggregate递归链 ...
- CSS3 filter 模糊滤镜的应用
CSS3 filter 模糊滤镜的应用 在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...
- Docker系列之烹饪披萨(二)
前言 上一篇我们讲解了虚拟机和容器的区别,本节我们来讲讲Docker中关于Dockerfile.镜像.容器等基本概念.Docker是一个在容器内开发.部署.运行应用程序的平台,Docker本质上是容器 ...
- Opengl_入门学习分享和记录_03_渲染管线(二)再谈顶点着色器以及顶点属性以及属性链接
---恢复内容开始--- 写在前面的废话:岂可修!感觉最近好忙啊,本来今天还有同学约我出去玩的.(小声bb) 正文开始:之前已经编译好的着色器中还有一些问题,比如 layout(location=0) ...
- Unable to load template file 'rj\ThinkPHP/Tpl/dispatch_jump.tpl'----thinkphp3.2.3
Unable to load template file 'rj\ThinkPHP/Tpl/dispatch_jump.tpl'----thinkphp3.2.3 1.报错原因:将thinkphp默认 ...
- SQL TRUNCATE TABLE 命令
SQL TRUNCATE TABLE 命令 SQL TRUNCATE TABLE 命令用于删除现有数据表中的所有数据. 你也可以使用 DROP TABLE 命令来删除整个数据表,不过 DROP TAB ...
- 「雕爷学编程」Arduino动手做(15)——手指侦测心跳模块
37款传感器和模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器与模块,依照实践出真知(动手试试)的理念,以学习和交流为目的,这里准备 ...