Ajax学习笔记
目录
简述
一、创建 XMLHttpRequest 对象
二、建立并发送 http 请求
2.1 建立 http 请求：open(method, url, async)
2.2 发送 http 请求：send(content)
三、接收服务器响应
3.1 响应阶段
3.2 响应状态
3.3 最终 Ajax 请求代码
简述
Ajax（Asynchronous JavaScript and XML）,是一种在不重新加载整个页面的情况下，用服务器上的数据更新部分页面的技术。
Ajax 有一个核心对象：XMLHttpRequest，使用它就可以向服务器发送请求、获得数据、修改页面，一个 Ajax 应用程序其实就是在创建 Ajax 对象并调用其属性和方法。
使用该对象有以下几个基本步骤：
-
创建 XMLHttpRequest 对象
-
建立并发送 http 请求
-
接收服务器响应
应用场景举例：
1. 百度搜索框提示
2. 注册时无刷新验证用户名是否可用
要亲自尝试 Ajax，请下载 XAMPP
一、创建 XMLHttpRequest 对象
实际上，所有现代浏览器都支持 XMLHttpRequest 对象，但是 IE5、IE6 使用的是 ActiveX 对象，所以我们可以建立一个兼容所有浏览器的函数：
function createXHR(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); //主流浏览器 } else{ return new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6 } }
接下来我们将创建并发送 http 请求，然后服务器返回的数据将自动填充 XMLHttpRequest 对象的属性，下面是几个重要属性：
1. status：响应的 HTTP 状态
2. readyState：请求或响应过程的当前活动阶段——0，1，2，3，4
3. responseText：返回的文本
4. responseXML：返回的 XML 文档
二、建立并发送 http 请求
2.1 建立 http 请求：open(method, url, async)
open() 函数的三个参数分别是：
-
method：请求的类型——GET或POST-
GET 比 POST 快而且简单
-
POST 用于更新服务器上的数据
-
POST 不限制发送的数据量
-
发送密码时，POST 更安全
-
-
url：服务器上的文件地址，可以是任何类型的文件 -
async：true（异步）、false（同步）-
若发送异步请求，在等待服务器响应的过程中可以继续执行其他脚本，响应就绪后对响应进行处理
-
2.2 发送 http 请求：send(content)
send() 函数只有一个参数，当使用 GET 方法时，该参数必须为 null；当使用 POST 方法时，该参数是要向服务器发送的数据——字符串。
三、接收服务器响应
3.1 响应阶段
当我们发出了一个 http 请求时，就开始等待响应了，那么我们怎么知道服务器响应什么时候来呢？那就要看前面提到的 XMLHttpRequest 对象的属性： readyState。
该属性表示请求或响应过程的当前活动阶段，总共分为 5 个阶段：
-
0：尚未调用 open() 方法
-
1：已调用 open() 方法，尚未调用 send() 方法
-
2：已调用 send() 方法，尚未收到响应
-
3：正在接收响应
-
4：响应接收完毕，可以在客户端使用
在请求和响应的过程中，这个属性的值会从 0 变化到 4，每一次发生变化时都会触发 XMLHttpRequest 对象的 onreadystatechange 事件，所以我们可以在该事件发生时监测 readyState 属性的值，从而确定是不是进行到了最后的阶段——因为我们只对它感兴趣。
但是必须在调用 open() 方法之前进行状态监测，这样才能确保跨浏览器的兼容性：
//创建对象 var xhr = createXHR(); //状态监测 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ //这里务必不要使用 this //do some thing } }; //建立http请求 xhr.open("get", "example.txt", true); //发送http请求 xhr.send(null);
3.2 响应状态
但是要注意，并非所有的请求都会成功，所以 XMLHttpRequest 对象还有一个属性 status 用来表示响应的 HTTP 状态，它的值是 HTTP 状态码，常用的几个如下：
-
200——服务器响应正常。
-
304——该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
-
400——无法找到请求的资源。
-
401——访问资源的权限不够。
-
403——没有权限访问资源。
-
404——需要访问的资源不存在。
-
405——需要访问的资源被禁止。
-
407——访问的资源需要代理身份验证。
-
414——请求的URL太长。
-
500——服务器内部错误。
3.3 最终 Ajax 请求代码
如果我们要使用响应的数据来修改页面，则还需要检测状态码，所以最终使用 Ajax 的基本步骤是这样：
//创建对象 var xhr = createXHR(); //状态监测 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ //务必不要使用 this if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //do something alert(xhr.responseText); //比如用弹出框显示返回的文本 } else{ //do something alert("Request was Unsuccessful: " + xhr.status); } } }; //建立http请求 xhr.open("get", "example.txt", true); //发送http请求 xhr.send(null);
四、小结：Ajax封装
现在，我们知道使用 Ajax 时需要确定以下几个因素：
-
请求的方式
-
请求的 URL
-
同步还是异步
-
请求成功时要做的事情
-
请求失败时要做的事情
那么，为什么不把这些封装成一个函数呢：
/** * 执行Ajax请求的通用函数，每一个参数都是必须的，除了最后一个参数 * @param {string} method ："GET" 或 "POST" * @param {string} url ：服务器上的文件地址，可以是任何类型的文件 * @param {boolean} async : true（同步），false(异步) * @param {string} content：如果是POST请求，可以传递一个字符串；如果是GET请求，必须传递 null * @param {function} whenSucceed : 要用函数内部创建的 XHR 对象做的事情 * @param {function} whenFailed : 一些提示信息，可能会用到 XHR 对象 */ function ajaxApp(method, url, async, content, whenSucceed, whenFailed){ /** * 创建 XMLHttpRequest 对象的通用函数 * @return {object} XMLHttpRequest对象 */ function createXHR(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); //主流浏览器 } else{ return new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6 } } //创建对象 var xhr = createXHR(); //状态监测 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ //务必不要使用 this if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //do something whenSucceed(xhr); } else{ //do something if(whenFailed){ //该参数可选，如果有就调用一下 whenFailed(xhr); } } } }; //建立http请求 xhr.open(method, url, async); //发送http请求 xhr.send(content); }