背景

传统的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&param2=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.");
}
}

参考资料:

1、XMLHttpRequest-MDN

2、《JavaScript高级程序设计(第三版)》




JavaScript之AJAX:原生ajax入门的更多相关文章

  1. Django学习---原生ajax

    Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...

  2. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  3. javascript实现原生ajax

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  4. JavaScript AJAX原生写法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  6. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  7. JavaScript的原生Ajax解析

    通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百 ...

  8. javascript js原生ajax post请求 实例

    HTML代码: 注意: xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencod ...

  9. AJAX原生JavaScript写法

    GET方式 //创建XMLHttpRequest对象,为考虑兼容性问题,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象 var ajax = windo ...

  10. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

随机推荐

  1. Adobe系列软件下载地址

    在前些上传的文章中已经讲了如何激活Adobe系列软件,在这放上Adobe系列软件下载地址: 1.Adobe After Effects 2017-14.0 32位下载地址: 链接:http://pan ...

  2. visual studio问题集合

    1.当前断点不会命中,还没有为该文档加载任何符号 打开visual 2010 工具->选项->调试->符号: 一.手动加载 点击 加载所有符号 即可.二.自动加载 点击"指 ...

  3. CJOJ 1644 编辑距离 / Luogu 2758 编辑距离(动态规划)

    CJOJ 1644 编辑距离 / Luogu 2758 编辑距离(动态规划) Description 字符串是数据结构和计算机语言里很重要的数据类型,在计算机语言中,对于字符串我们有很多的操作定义,因 ...

  4. Ambari 2.4.2 汉化

    1.ambari-web (1)apache-ambari-2.4.2-src/ambari-web/app/messages.js 该文件是KeyValue文件,3000多行.将Value部分翻译成 ...

  5. 树状数组(瞎bb) [树状数组]

    Copyright:http://www.cnblogs.com/ZYBGMZL/ 树状数组是一个利用一维数组和位运算组成的求解区间问题的高效数据结构,其构造如图所示 首先,我们要用它解决单点修改.区 ...

  6. 如何得到iPhone手机的UUID

    背景 测试ad-hoc打包方式打出来的包,必须在证书里面配置手机的uuid才能安装. 这样就需要获取iPhone手机的uuid来进行证书配置 一般来说iPhone手机可以安装通过Apple发布的软件. ...

  7. HDOJ2012-素数判定

    Problem Description 对于表达式n^2+n+41,当n在(x,y)范围内取整数值时(包括x,y)(-39<=x<y<=50),判定该表达式的值是否都为素数.   I ...

  8. python有三种导入模块的方法(转)

    原文:http://www.cnblogs.com/allenblogs/archive/2011/11/15/2055149.html python有三种导入模块的方法 其一, import mod ...

  9. java 文件读和写(整理)

    1 读文件 1)按字节读取,FileInputStream用于读二进制文件,如,图片,声音,影像等 /** * 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件. */ public ...

  10. Hbase单机安装部署

    Hbase单机安装部署 http://blogxinxiucan.sh1.newtouch.com/2017/07/27/Hbase单机安装部署/ 下载Hbase Hbase官网下载地址 http:/ ...