Ajax小结

前言

    相信大家现在每一个开发人员对AJAX都不陌生,每天肯定离不开跟它打交道,事实证明它确实很大程度的提高了用户体验。有一次跟身边的一个朋友聊天,问它对AJAX有什么深入理解,他说不就是用jquery里的AJAX嘛,按那个格式写就行了,其他的也没必要了解,但我觉得我们不应只是类库的使用者,我认为还是要‘知其然知其所以然’,不能是停留在会用的基础上,虽然不能把其全部实现都如数分析出,但是从原理的角度还是可以知道的,下面也是自己大概总结了下AJAX的原理,总结不当之处还望指出。^^_^^

AJAX简介

    AJAX全称其实是“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术
    我们经常也是用于通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,不会像最早以前只要请求下数据,就得刷新页面。
    说到这里,也算是AJAX拯救了Javascript,因为在2005年之前Javscript经常被认为是一个很低级的脚本语言,最重要的是很多开发者都用它开发了一些烦人的广告之类的,最终导致Javascript在好几个主流浏览器上都经常被禁用,相信现在有些开发者也知道每个浏览器都有一个禁用Javascript的选项,不过这时的我们并不是真的禁用它,最多是处于调试的目的,但那时候可是真的禁用,好了,野史就先说到这….2005年对于AJAX可以说是一个重要的元年,很多重大的事件让大众对它真的是刮目相看,Google在它著名的交互应用程序中使用了异步通讯,如Google、Google地图、Google搜索等。而AJAX又是基于Javascript,所以就此Javascript又重新发展了起来。

AJAX核心XMLHttpRequest

    Ajax的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用Javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。
    XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起,来看看它的工作原理。
首先,我们先来看看XMLHttpRequest这个对象的属性。
它的属性有:

1
2
3
4
5
6
7
8
9
10
11
onreadystatechange  每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
2 (发送数据) Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

它能实现的四个主要点是:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

对于XMLHttpRequest对象的兼容问题

1
2
3
4
5
6
7
8
9
10
11
12
不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。
ie5,6 使用 ActiveXObject。
ie高版本的也和其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
要克服这个问题,可以使用这段简单的代码:
var XMLHttp=null;
if (window.XMLHttpRequest)//这种方法也可以称之为能力检测
{
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}

原生AJAX使用步骤

get请求方式

1.既然要用这个内建对象,就先把它实例化这个内建对象;

1
2
// 实例化这个内建对象
var xhr = new XMLHttpRequest();

2.通过open方法发起请求行

1
2
//先以get方式提交请求,下面会说明get和post的区别
xhr.open('get', '01.php');

3.设置了一个请求头

1
2
xhr.setRequestHeader('Content-Type', 'text/html');
get请求可以不设置,post形式的时候需要设置,在这里设上也没有影响

4.发送请求主体

1
2
  get没有请求主体,但是出于规范的角度,在里面传一个`null`;get请求参数的时候是在url后面
xhr.send(null);

5.接收服务器响应

    HTTP响应是由服务端发出的,作为客户端更应关心的是响应的结果。
HTTP响应3 个组成部分与XMLHttpRequest方法或属性的对应关系。
由于服务器做出响应需要时间(比如网速慢等原因),所以我们需要监听服务器响应的状态,然后才能进行处理。而onreadystatechange就是监听XMLHttpRequest的状态的事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 监听响应状态并处理
xhr.onreadystatechange = function () {
// 响应的状态
// console.log(xhr.readyState);
// 响应的服务器状态码
// console.log(xhr.status);
// 监听完成的状态及服务器响应状态
if(xhr.readyState == 4 && xhr.status == 200) {
// 获得结果
console.log(xhr.responseText);
// DOM操作将结果放到页面里
document.getElementById('result').innerHTML = xhr.responseText;
}
}

post请求

1.同上,既然要用这个内建对象,就先把它实例化这个内建对象;

1
2
// 实例化这个内建对象
var xhr = new XMLHttpRequest();

2.通过open方法发起请求行

1
2
//先以get方式提交请求,下面会说明get和post的区别
xhr.open('post', '01.php');

3.设置了一个请求头

post方式必须设置请求头

1
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencodeed');

4.发送请求主体

1
2
  //send里面的参数不是必须得传的,需要就传;没有参数的时候,里面最好写上null,虽然不是必须的,但比较规范,当post方式需要传递参数的时候,在里面传入
xhr.send(null);

5.接收服务器响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 监听响应状态并处理
xhr.onreadystatechange = function () {
// 响应的状态
// console.log(xhr.readyState);
// 响应的服务器状态码
// console.log(xhr.status);
// 监听完成的状态及服务器响应状态
if(xhr.readyState == 4 && xhr.status == 200) {
// 获得结果
console.log(xhr.responseText);
// DOM操作将结果放到页面里
document.getElementById('result').innerHTML = xhr.responseText;
}
}

GET和POST请求方式的差异

1、GET没有请求主体,使用xhr.send(null)
2、GET可以通过在请求URL上添加请求参数
3、POST可以通过xhr.send(‘name=itcast&age=10’)传参
4、POST必须要设置’Content-Type’为’application/x-www-form-urlencodeed’
5、GET效率更好(应用多)
6、GET大小限制约4K,POST则没有限制

get方式传参格式:需要将参数放到url后面,格式为?key=val&key1=val1 ,例:xhr.open(‘get’,’index.php?name=jack&age=20’)
post方式传参格式:xhr.send(‘name=jack&age=20’)

结语

    这里也只是简要分析了ajax最基本的应用与原理,以后能自己再上一个层面之后就可以再深入下了,XMLHttpRequest2.0已经早已出世了,以后可以另起篇章总结学习下。