ajax

ajax

ajax流程

第一步 创建XMLHttpRequest对象

var request = new XMLHttpRequest();

第二步 监听XMLHttpRequest对象里面的readystatechang

// 用的属性监听
/**
request.onreadystatechange = function() {
  console.log(request.readyState);
};
*/
// 用事件监听
/**
 * 当open的第三个参数的值为false的时候,这里面只能监听到1状态和4状态;
 * 当为true的时候能监听到1-4的状态
 **/
request.addEventListener(
  "readystatechange",
  function() {
    if (request.readyState === 0) {
      // 表示open()尚未调用
    } else if (request.readyState === 1) {
      // 表示open()已调用
    } else if (request.readyState === 2) {
      // 接收到头信息
    } else if (request.readyState === 3) {
      // 接收到相应主体
    } else {
      // 响应完成
    }
  },
  true
);

第三步 调用XMLHttpRequest.open方法

/**
 * @param method get || post
 * @param url 请求地址
 * @param async true || false 默认为true
 **/
request.open("POST", "url");
// 设置请求头
request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");

第四步: 启动请求

/**
 * 当请求为get请求的时候是没有请求主体的request.send(null)
 * 当请求为post请求的时候是有请求主体的,可以传入JSON字符串
 **/
request.send('你好');

服务器返回的状态码

  • 200:服务器响应正常。
  • 302:请求的资源临时从不同的 URI响应请求。(资源临时重定向)
  • 304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)
  • 400:a:语义有误;b:请求参数错误
  • 401:当前请求需要用户验证或者token过期
  • 403:没有权限访问资源。
  • 404:需要访问的资源不存在。
  • 405:请求行中指定的请求方法不能被用于请求相应的资源。该响应必须返回一个Allow 头信息用以表示出当前资源能够接受的请求方法的列表。
  • 407:访问的资源需要代理身份验证。
  • 414:请求的URL太长。
  • 500:服务器内部错误。

监听不同阶段触发不同类型的事件

// 进行5000秒超时会进入(timeout的钩子函数)
request.timeout = 5000;
// 这个方法看你在某个事件断调用这样的话请求就会被中止,此刻readystate就会为0并且调用onabort的钩子函数
request.abort();
// 当调用send的时候就会触发这个事件(1 => open被调用时)
request.onloadstart = function() {}
// 当正在加载服务器响应的时候(有可能不会触发 3=> 返回响应主体)
request.onprogress = function() {}
// 开始执行上传文件(1 => open被调用时)
request.upload.onloadstart = function(ProgressEvent) {}
// 监测文件上传的进度(1 => open被调用时)
request.upload.onprogress  = function(ProgressEvent) {}
// 事件完成(4 => 响应完成 但是最后返回的status不一定是200)
request.onload = function() {}
// 网络错误
request.onerror = function() {}
// 请求超时
request.ontimeout = function() {}
// 请求中止(这个时候readystate = 0 => open未被调用)
request.onabort = function() {}

输入url到呈现网页的全过程

  • 三大区块
    1. 客户端
    2. 网络传输层
    3. 服务端

  客户端对url判断和劫持 => 本地host文件的判断 => dns的解析 => 发送请求 => 建立tcp连接 => 服务器响应请求 => 显示页面


  转载请注明: 迷一样的自信 ajax

 上一篇
请求头、响应 请求头、响应
请求头、响应请求头的参数的详情 Accept:浏览器端可以接受的媒体类型 Accept: text/html 代表浏览器可以接受服务器回发的类型为 text/html 也就是我们常说的html文档,如果服务器无法返回text/html类型
2018-04-25
下一篇 
flex flex
flex概念  采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。   块状元素display:flex;行内元素d
2018-04-15
  目录