ajax:

 1.认识

ajax:Async Javascript And Xml,异步JavaScript和Xml

ajax的核心有JavaScript，DOM，XMLHTTPRequest(js的一个内置对象)通过XMLHTTPRequest发起异步请求，请求成功后拿到数据，然后会通过js操作DOM，然后把数据展示到页面中

  ajax不是一门新技术，是一系列技术的组合

 console.log(1);
        //实例化
        let xhr = new XMLHttpRequest();
        console.log(xhr);
        // 和服务器建立连接   xhr.open('请求方式','服务器 '); 路由客户端给服务器传值?后传值
        xhr.open('GET','http://127.0.0.1:8000/login?account=15656565656&passwd=123456');
        xhr.responseType = 'json';   //必须在发起请求前   响应类型
        // 发起请求
        xhr.send();
        // 监听请求过程
       // 拿到服务器返回数据
       //不是我们调用进入一次过程（状态改变触发）调用一次
        xhr.onreadystatechange = function(){
            // 0  1  2   3   4(完成)
            console.log(xhr.readyState);
            if(xhr.readyState == 4){
                console.log('status:',xhr.status);    //状态码
                if(xhr.status == 200){//请求成功
                    console.log("请求完成并且成功了，数据：", xhr.response);
                    // alert(JSON.parse(xhr.response).data);
                    // alert(xhr.response.data);   //上面设了 xhr.responseType = 'json'; 下面不用转
                }
            }
        }
        console.log(2);

获取客户端传给服务器的值

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    // 响应给客户端的内容
    ctx.body = 'aaaaa';
  }
  async login() {
    const { ctx } = this;
    // 获取客户端传递过来的数据  get请求：ctx.request.query 或者 ctx.query
    console.log(ctx.request.query);
    console.log(ctx.query);
    // 响应给客户端的内容
    ctx.body = {
      code: 1,
      data: "登录成功"
    };
    // ctx.body = '登录成功';
  }
  async register() {
    const { ctx } = this;
    // 获取客户端传递过来的数据  post请求：ctx.request.body
    console.log(ctx.request.body);
    // 响应给客户端的内容
    ctx.body = {
      code: 1,
      data: "注册成功"
    };
  }
}

module.exports = HomeController;

 服务器端在哪执行在哪查看（dos）

         ajax经过处理的数据

        客户端（前端  页面）：html css  js

        服务器：后端服务器，后端的代码就是放在后端服务器egg里面的  前端服务器：前端代码放在前端服务器里面的

        客户端可以请求服务器

        egg-example既是后端服务器，也是前端服务器，后端代码放在这个服务器里面的，前端代码也放在这个服务器里面的

 403：禁止访问（post请求会有安全验证问题，后端必须关闭安全验证）

 404：找不到，前端访问，后端没有

请求方式不是前端开发人员决定的，而是后端开发人员决定的

 get：

            1.传递数据方式：数据在请求资源地址的后面（请求头里面）

            2.传递数据大小：4k左右

            3.安全性：一点都不安全

        post:

            1.传递数据方式：放在请求体里面的

            2.传递数据大小：几乎没有限制

            3.安全性：相对来说安全一点

            4.文件上传必须用post

        浏览器地址栏里面直接输入地址发起请求默认为get请求

 ajax请求限制在同源的

        跨域：协议、域名、端口任意一个不同，就会产生跨域

        前端：Apache服务器             http://127.0.0.1:80

        后端：egg服务器（egg-example） http://127.0.0.1:8000

        解决跨域：

         1.cors：需要用到egg-cors这个第三方模块

         2.jsonp

         3.proxy(代理)

1. 1. egg-cors

框架提供了 egg-cors 插件来实现cors跨域请求。

安装和配置egg-cors

npm i --save egg-cors

开启插件：// config/plugin.js

//跨域处理
  cors:{
    enable: true,
    package: 'egg-cors',
  }

   配置cors：// config/config.default.js

// 跨域的配置
    config.cors = {
        origin: '*', //允许的域，*代表所有的
        allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'//允许跨域的请求方法
    };

    怎么理解：ajax请求是在客户端浏览器里面发起请求的