背景

传统的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. Java数据类型+练习

    java基础数据类型: 四类八种: 1, 整数型 byte   2的8次方(取值范围--<-128~127>)--1个字节 short   2的16次方--2个 int   2的32次方- ...

  2. 跨域访问http接口的使用

    最近在弄一个sip网页集成版软电话,为了功能的完善,呼叫中心的工作人员为我们提供了一个http接口,我先在网页中直接打开分析了一下他的返回值,然后又放到js中去访问,结果一放到js中一访问就发现浏览器 ...

  3. MyBatis的关联关系补充 多对多 继承

    多对多 一个学生有多个课程 一个课程有多个学生 思路分析 :使用一个中间表 用学生表和课程表的主键作为中间表的联合主键 1数据库表的设计 课程表 学生表 中间表 2/实体类的设计 课程类 public ...

  4. LoadRunner接口工作总结

    因为工作中需要开发维护类似枢纽性质的平台,所以经常利用LR进行接口测试.接口自动化测试.接口压力测试.用多了LR,有点不愿意使用报文编辑器进行手工接口测试了.  接口脚本操作过程: 首先:打开LR,N ...

  5. python+matplotlib+web.py

    最近看了厦门大学数据库实验室林子雨老师的<大数据课程实验案例:网站用户行为分析>,可视化这块是用的R语言,我决定用Python来实现一下. 参考文献 http://dblab.xmu.ed ...

  6. CSS单位

    一.em单位:相对单位,相对于父级大小. <div class="fs"> 你看看我的字体大小 <div class="fs"> 你在看 ...

  7. 服务器Hadoop+Hive搭建

    出于安全稳定考虑很多业务都需要服务器服务器Hadoop+Hive搭建,但经常有人问我,怎么去选择自己的配置最好,今天天气不错,我们一起来聊一下这个话题. Hadoop+Hive环境搭建 1虚拟机和系统 ...

  8. 获取cpu真实型号

    感谢文洋兄的思路.亲测有效. [root@storage GetCpuType]# ./main.o Intel(R) Xeon(R) CPU C5528 @ 2.13GHz #include < ...

  9. 初学者:浅谈web前端就业的学习路线

    初级前端 主要学习三个部分:HTML,CSS,JavaScript 一.html + css部分: 这部分特别简单,到网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠 ...

  10. Struts2 动态调用方法

    struts2动态调用方法有两种方式 方式一:用通配符进行调用: Action方法: package com.bjyinfu.struts.actions; public class CatchDyn ...