ajax基础

概述

Asynchronous JavaScript and XML,异步传输无刷新技术。
提高用户体验的技术。
“异步”地实现无刷新处理

应用场景

• 百度搜索提示
  在搜索文本框中输入要搜索的关键字时，下方会自动给出提示。
• 用户注册
  如果用户名已被注册，会在用户名文本框后面提示。

---

异步交互与同步交互

• 同步
  发送一个请求之后，等待服务器的响应结束后才能作出下一步处理，发送请求后会刷新整个页面
• 异步
  发送一个请求之后，不用等待服务器的响应，即可作出下一步处理，可实现局部刷新

XMLHttpRequest对象

Ajax的核心内容。XMLHttpRequest对象用于在后台与服务器交换数据。

创建XMLHttpRequest对象

由于在IE7以前的版本使用名为XMLHttp的对象，所以需要考虑兼容问题。

var xmlhttp = false;
function createXMLHttp() {
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
         try {
            xmlhttp = new ActiveXObject("Msxm12.XMLHttp");
        } catch(e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHttp");   
            } catch (failed) {
                xmlhttp = false;
            }
        }
    }
    return xmlhttp;
}

---

XMLHttpRequest的方法

• open(method,url,async):规定请求的类型，URL以及是否异步处理请求
• abort():取消当前请求
• getAllRequestHeaders():返回为解析的响应头
• send(String):发送HTTP请求

---

XMLHttpRequest对象的属性

readyState:HTTP请求的状态

• 0:请求未初始化
• 1:请求连接已建立
• 2:请求已接收
• 3:请求处理中
• 4:请求已完成，且相应已就绪

---

responseText:到当前为止服务器接收到的响应体（不包含响应头）

responseXML：对请求的响应，解析为XML并作为Document对象返回

status：由服务器返回的HTTP状态代码

---

XMLHttpRequest对象的事件句柄函数

当请求发送到服务器时，我们需要执行一些基于响应的任务
事件onreadystatechange是每次readyState属性改变的时候调用的事假处理函数。

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //处理事件
    }
}

---

Ajax操作

• 得到XMLHttpRequest对象
• 打开与服务器的连接
  XMLHttpRequest.open(method,url,async)
• 发送请求 XMLHttpRequest.send(请求体/null)
  注册监听器：XMLHttpRequest.onreadystatechange
• 得到响应