javascript复习：ajax

JavaScript 评论

题目

  • 手写一个简易的ajax
  • 跨域常用的实现方式

知识点

  • XMLHttpRequest
  • 状态码
  • 跨域： 同源策略，跨域解决方案

1. XMLHttpRequest

  • get 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let xhr = new XMLHttpRequest();
    xhr.open('GET', '/data.json', true)
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr);
                console.log(xhr.responseText);
            }
        }
    }

    xhr.send(null)

  • post 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/login', true)
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr);
                console.log(xhr.responseText);
            }
        }
    }
    const postData = {
    user: 'lxl',
    pwd: '111'
    };
    xhr.send(JSON.stringify(postData))
1. xhr.readyState
  • 0 -（未初始化） 还没有调用send() 方法
  • 1 -（载入） 已调用send() 方法，正在发送请求
  • 2 -（载入完成）send() 方法执行完成，已经接收到全部响应内容
  • 3 - （交互）正在解析相应内容
2. xhr.status
  • 2XX - 表示成功请求，如 200
  • 3XX - 需要重定向，浏览器直接跳转，如 301，302， 304
  • 4XX - 客户端请求错误，如 404，403
  • 5XX - 服务端错误

2. 跨域

什么是跨域

同源策略
  • ajax 请求时，浏览器要求当前网页和server必须同源（安全）
  • 同源： 协议、域名、端口，三者必须一致
  • 前端： http:// a.com:8080/; server: https://b.com/api/xxx
加载图片，css，js 可无视同源策略
  • <img / > 可用于统计打点，可使用第三方统计服务
  • local 本站访客数人 本站访客数人
    Theme by cofess base on pure.