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这个对象的属性。
它的属性有：

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对象的兼容问题

不同的浏览器使用不同的方法来创建 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的状态的事件

// 监听响应状态并处理
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.接收服务器响应

// 监听响应状态并处理
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已经早已出世了，以后可以另起篇章总结学习下。