浅谈AJAX的基本原理和原生AJAX的基础用法

一、什么是AJAX? 

  AJAX,即“Asynchronous Javascript And XML”,翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技术。2001年,Goolge公司为Google浏览器新加了“Google Suggest”功能,不同于传统网页,用户可以在浏览网页的同时,从服务器端获取更新后的搜索建议。Goolge将其命名为AJAX,它的目标就是实现在无刷新、无提交的情况下,页面内容进行局部更新。简简单单一句话就能概括的目标,实现的效果却非常棒!大家都知道,传统页面向服务器发起请求后,到客户端接收到响应消息的这段时间是白白浪费的,只能等到接收完响应才能继续运行。而这十分影响用户的体验以及网页加载效率。

  因此,基于同步请求如此大的弊端,Google开始研究这方面的优化问题,能否找到一个方法,在服务器执行客户端请求时,浏览器依旧工作。终于Google在浏览器底层找到了一个XMLHttpRequest对象能向服务器发起异步请求(Goolge就是厉害呀~~),这是一个各大浏览器创建时底层都已写好的一个对象。通过它就可以在客户端向服务器发起异步请求,说到底其实就是利用js向服务器发起请求,而不是传统意义上的表单提交或者URL后加问号键值对跳转。

二、原生AJAX用法

  聊完了AJAX的来源和定义,我们再来简单的聊一聊它的原生代码。

  1、获取XHR对象

    首先,你的把它写在js中(这不是废话吗),通过new的方法来获取一个xhr对象(即XMLHttpRequest对象)。

      即 var xhr = new XMLHttpRequest();

    一般来说,AJAX都是用在事件中,毕竟无端端的浏览器干嘛去发起请求,一定是用户有了需求,触发了事件。即便是异步请求初始化的网页,也是存在加载事件onload的。

  2、XHR对象的常用属性

    (1)、readyState

    表示XHR的当前状态,即请求-响应过程进行到了哪一步。取值有5个:

      0——(默认值)UNSENT,请求消息尚未发出;

      1——OPENED,XHR和服务器之间的连接已打开;

      2——HEADERS_RECEIVED,XHR已经接收到了响应消息的头部,也就意味着既然响应头已经接收到了,响应起始行也早就接收完毕。

      3——LOADING,XHR正在加载响应主体,正如它的单词是一个进行时,在这个状态下的响应主体是不断加载的,并未加载完成。

      4——DONE,XHR接收完毕响应消息。

    这是XHR至关重要的一个属性,它的值只能依次递增,不能跳着加,也不能后退。它根据响应过程的变化,自动改变值,不允许手工赋值。可以通过它知道你的请求消息是否成功发出。

    (2)、status

    默认值为0,响应消息状态码,只有当xhr.readyState的值变为2时值才会变化。因为只有当xhr.readyState的值走到2时,才会接受到响应起始行。

    (3)、statusText

    默认为空,响应起始行中的原因短句,也只有当xhr.readyState变为2时才有值。

    (4)、responseText

    默认为空,响应消息的主体内容,当xhr.readyState的值变为3时开始有值,到4时稳定下来。这是XHR里一个很重要属性。客户端接收到自服务器传回的“结果”全在这个属性值里。

  3、XHR的常用方法

    (1)、open()

    打开到服务器的连接。具体用法为xhr.open(method,url,isAsyn);

    method即请求方法(常用的是"POST"、"GET"),url即请求服务器文件的路径,isAsyn(是否异步)现在统一默认只写true。

    (2)、send()

    发送请求消息。具体用法:看你的请求方法中是否包含请求主体,如包含则其中参数填入请求主体内容,不然则写null。

    (3)、setRequestHeader()

    设置请求消息头部。具体用法:setRequestHeader(name,value),name即请求头中的属性名,value则是它的值。

    (4)、getResponseHeader()

    获取响应消息头部。它就一个参数,name,即你想获得的响应头中的属性名。

    (5)、getAllResponseHeaders()

    获取所有响应头,没有参数。

  4、使用XHR发起异步请求的步骤  浅谈AJAX的基本原理和原生AJAX的基础用法

  5、XHR能接受到的五种响应

    (1)、text/plain

    接收到的普通的文本信息。客户端可以根据接收到的文本内容的不同,做出不同操作。

    (2)、text/html

    接收到的由HTML标签组成的片段。可加入页面中。

    (3)、application/javascript

    以PHP为例,在PHP解释器眼中,js代码只是一段普通字符串。而当这段字符串被客户端接收后,必须调用全局函数eval()才能正常使用。

    (4)、application/xml

    其实在2005年出现JSON后,在前端领域,XML已经被完全替代了。因为它和JSON比起来,实在太过于繁琐,关于XML的具体用法,我就不在这详谈。只需要知道一点,W3C DOM标准三大组成部分,核心DOM、HTML DOM和这最后的XML DOM。

    (5)、application/json

    JSON终于出现了,同样是从服务器端批量传递复合数据回客户端,但它使用简单,易于阅读且高效。它的全名叫:JavaScript Object Notation(js对象标记),本质是一种轻量级的字符串数据格式。由[]或者{}括起来,要么是一个数组,要么是一个对象。对象中可以包含多个键值对,每个键及每个值必须用""引起来。

三、结语

  AJAX本质上并不是一个很难的东西,只是可能它的涉及知识面有些广,是一个对HTML、CSS、JavaScript、HTTP协议的综合应用(这里我们先不谈服务器端)。只要你对这四个方面都有一定的了解和理解,特别是当配合上JQuery时,用起来十分简单。

  这是我第一次写博客,虽然是一篇短短的随笔,但内心特别激动。有人可能不太熟悉HTTP协议以及XML,那看的会有些吃力,以后关于这俩个方面我也会写一些自己的心得体会。

上一篇:手写原生ajax


下一篇:《ECMAScript6标准入门》第三版--读书笔记