Ajax基础

Ajax: Aysnc JavaScript and XML

XML: 可拓展的标记语言(在XML文件中使用的标签都是自己拓展的)
利用自己拓展的有规则的标记来存储相关的数据

客户端JavaScript中的方法,用来向服务器端发送请求(还可以传递给服务器端数据),然后把服务器端返回的内容获取到(Ajax一般运行在客户端的浏览器中)

Ajax四步:

-> 创建一个Ajax对象(下面的这种写法在IE6及更低版本的浏览器中不支持)
var xhr = new XMLHttpRequest();

-> 发送前的基本信息配置:
   配置请求的方式(get, post, put, delete, ...)
   打开一个URL地址(配置向哪一个服务器地址发送请求)
   同步还是异步(true: 异步, false: 同步; 默认是true)
   [username]: 向服务器提供请求的用户名
   [password]: 向服务器提供请求的密码, 这两个值一般不写, 只有服务器做了安全限制, 只允许特定的用户访问时才传递
xhr.open('get', url, false);

-> 给onreadystatechange这个事件绑定一个方法, 监听状态的改变(只要状态改变,就会触发方法执行)
xhr.onreadystatechange = function() {
    // -> xhr.readyState: Ajax状态码,可以代表当前Ajax处理的进度
                        0 -> unset: 当前的请求还没有发送
                        1 -> opened: URL地址已经打开(发送前的参数配置已经完成)
                        2 -> header_received: 响应头信息已经接受
                        3 -> loading: 主要返回的内容正在服务器端进行处理
                        4 -> done: 响应主体内容已经成功返回到客户端
       -> xhr.status: HTTP网络状态码,描述了服务器响应内容的状态
                      200 或者 /^\d{2}$/ -> 都代表响应主体内容已经成功返回
                      
                      301 -> 永久重定向/永久转移
                      302 -> 临时重定向/临时转移 服务器的负载均衡
                      304 -> 本次获取的内容是读取缓存中的数据
                      
                      400 -> 客户端传递给服务器端的参数出现未知错误
                      401 -> 无权限访问
                      404 -> 客户端访问的地址不存在
                      
                      500 -> 未知的服务器错误
                      503 -> 服务器已经超负荷 一台服务器能承受一万人,那10001个人访问,如果没有做服务器的负载均衡,那么此时状态码变为501

   if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        var data xhr.responseText;
   }
}

-> 发送请求: 参数是请求主体中传递给服务器的内容
xhr.send(null);

你可能感兴趣的:(Ajax基础)