原生ajax / 同源 / 跨域

ajax

ajax是一种创建交互式网页应用的网页开发技术

在网页不刷新的情况下，可以请求数据然后实现网页局部刷新或者渲染

 ajax的原理：通过XMLHttprequest对象向服务器发异步请求，从服务器获取数据后，然后用JavaScript来操作DOM而更新页面

如何创建一个原生ajax

ajax 核心对象 XMLHttpRequest对象

  // 1. 创建一个XMLHttpRequest的实例 xhr
  let xhr = new XMLHttpRequest();
  // 2. 为xhr.onreadystatechange设置事件监听
  xhr.onreadystatechange = function () {
    // xhr.readyState
    // 0 请求未初始化(刚实例化XMLHTTPRequest)
    // 1 客户端和服务器建立连接(调用open方法)
    // 2 请求已经被接受
    // 3 请求在处理中(调用send方法)
    // 4 处理完成,返回数据给客户端
    if (xhr.readyState === 4) {
      switch (xhr.status) {
        case 200 :
          console.log(JSON.parse(xhr.responseText));
          break
        case 404:
          console.log('页面 / 资源找不到');
          break;
      }
    }
  }
  // 3. 调用xhr.open(请求方式。请求地址，同步异步)
  xhr.open('GET','url',false)
  // 4. 发送请求的数据
  xhr.send(null)

Http常见的状态码 可见详情

• 200 请求成功，浏览器会把响应体内容显示在浏览器中；
• 404 (客服端问题)请求的资源没有找到；
• 400 语义错误，当前请求无法被服务器理解；
• 401 当前请求需要用户验证；
• 403 服务器已经理解请求，但是拒绝执行它；
• 500 (服务器问题）请求资源找到了，但服务器内部发生了不可预期的错误；
• 301/302/303 重定向问题；

同源和跨域

 同源

一个域下的js脚本在未经允许的情况下，不能够访问另一个域的内容。

两个域的协议，域名，端口号必须相同，否则不属于同一个域

同源策略的目的就是为了保证用户信息的安全，防止恶意的网站窃取数据

 跨域(非同源)

当一个请求url的协议，域名，端口三者之间任何一个域当前页面的url不同就是跨域

协议(http / https / ftp / smtp / pop3)

域名(www.一级域名.二级域名.顶级域名(org/com/cn/edu/gov)) /路径/路径

端口号(http:80/https:443)