Ajax学习笔记
目录
2.1 建立 http 请求：open(method, url, async)
简述
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); }