ajax+客户端与服务器端的交互

一. AJAX

• 原生JS

  var xhr=new XMLHttpRequest();
  xhr.open("GET","[请求地址]",false);
  xhr.onreadystatechange=function(){
      if(xhr,readystate===4 && xhr.status==200){
  
      }
  }
  xhr.send(null);

• jQ

  $.ajax({
      url:"",
      method:"",
      dataType:"json",
      async:true,
      data:null,
      success:function(){}
  })

二. 客户端和服务器端的交互

使用js完成客户端程序编写,使用node.js完成服务器端程序的编写

• DOS命令:通过一系列命令进行I/O操作
  • I/O:input/output 输入输出,对文件或者文件夹的增删改查
    • 创建的内容有些时候存储在内存中,有些时候存储在物理磁盘下
  • 打开DOS命令
    • 在当前用户的默认路径下打开:WIN+R->cmd(运行窗口)
    • 在指定的文件目录中打开DOS:
      1. 找到指定的文件目录,在空白处,shift+鼠标右键->在此处打开DOS命令
      2. 找到指定的文件目录,在地址栏中输入cmd,也可以快速在当前目录下打开DOS窗口
      3. 现在默认路径下打开,然后输入磁盘:,进入到指定的磁盘,然后再输入cd(把需要进入的文件目录拖拽到命令框中)->这样也可以进入
  • 常用的DOS命令
    • 查看自己电脑的IP地址以及DNS等信息
      • ipconfig:查看简单的信息 IP地址/子网掩码/默认网关
      • ipconfig -all:基于简单的基础上可以看到更为详细, 物理地址(MAC地址)/DNS等信息
      • ping www.baidu.com:查看网络窗口
      • CTRL+C不管按一次还是两次能结束当前正在进行的命令操作结束
      • 在当前窗口不关闭的情况下,按上下键可以切换之前已经输入的命令
      • cls:清屏
      • exit:退出关闭窗口
      • cd 文件目录:进入到指定的文件目录
      • dir(linux:ls):查看当前目录下所有的文件及文件目录
        • /a:显示所有的文件和文件夹,包括隐藏的
      • 创建和删除文件夹
        • mkdir+文件夹名:创建文件夹
        • rmdir+文件夹名:删除文件夹
      • 创建和删除文件
        • copy con xxx.xx->按enter开始输入内容->内容输入完成按Ctrl+z,然后再按enter键
        • del xxx.xx->删除某一个文件
• 面试题
  • 当你在浏览器的地址栏中输入一个网站,到浏览器中看到京东商城这个网页中的内容,中间都经历了哪些事情
    • 客户端和服务器端的交互模型"HTTP事务"
      • Request请求阶段
        1. 客户端首先通过域名,到DNS服务器上,找到服务器对应的外网IP地址
        2. 通过外网IP地址,找到对应的项目服务器
        3. 通过端口号,在服务上找到对应的项目资源文件目录(因为发布项目的时候,已经把项目目录和项目端口号对应了)
      • Response响应阶段
        1. 服务器端会把客户端需要请求的资源文件的"源代码",返回给客户端的浏览器
        2. 客户端浏览器接收到返回内容后,开始进行渲染和解析
• 网站发布
  • 租一台服务器(阿里云:主机/虚拟服务器),给服务器连接网络,连接网络后,服务器有一个外网IP地址(别人通过外网IP可以找到服务器)
  • 买域名(域名备案)
  • 把我们项目的源代码,上传到服务器的指定磁盘下=>ftp上传:把本地资源文件上传到服务器的指定位置下(一般都会有FTP上传工具:fileZilla)
  • 发布网站/发挥项目,一台服务器可以发挥很多的项目,多个项目之间使用端口进行区分
    • 工具:iis,apache,nginx,node..
  • 域名解析(DNS解析):把我们购买的域名和服务器的外网IP关联在一起,以后只要提到这个域名,其实指的就是对于的服务器
• 一个完整的URI:https://www.baidu.com:443/xxx/xxx.html?name=zf&age=8#video
  • URI:统一资源标识符
  • URL:统一资源定位符
  • URN:统一资源名称
  • URI=URL+URN
  • 上述的一个完整的URI可以分6部分,前3部分为URL,后3部分为URN
    1. HTTP/HTTPS/FTP:传输协议
       • 浏览器默认使用HTTP,但网站可以进行重定向使用HTTPS
       • HTTP:超文本传输协议(占据90%市场),客户端和服务器端除了传输文本以外,还可以传输图片,音视频等富媒体资源(二进制文件流/BASE64...)
       • HTTPS:传输通道经过SSL加密HTTP,基本和金钱打交道的网站都是HTTPS传输协议的
       • FTP:资源文件传输协议,经常应用于对服务器资源文件的管理(上传和下载...)
    2. 域名
       • 一级域名:www.qq.com
         • 需要购买的,二级三级域名只需要自己去分配即可
       • 二级域名:sport.qq.com
       • 三级域名:kbs.sport.qq.com
    3. 端口号
       • 80:HTTP默认
       • 443:HTTPS默认
       • 21:FTP默认
       • 端口号的取值范围:0-65535之间,端口号被一个项目/程序占用,其它的程序就不能在使用这个端口号了
    4. 请求资源文件的路径和名称
       • /student/index.html 请求的是当前项目student文件夹下的index.html文件
       • /index.html 请求的是当前项目根目录下的index.html文件,在不指定请求文件的时候,默认请求的资源文件一般都是/index.html或者/default.html(可以在服务器中配置默认的请求文件)
    5. 问号传参
       • ?xxx.xxx&xxx=xxx...
       • 客户端可以通过问号传递参数的方式,把一些信息传递给服务器端
       • 在从列表页面跳转到详情页面的时候,点击列表页面中的每一条记录,都会跳转到指定的详情页面,详情页面展示的内容是不一样的
         • 但是详情页面都是同一个页面,想要展示不一样的内容,就需要区分点击的是那一条记录,此时我们通过问号传参的方式进行
         • 在详情页面我们获取传递的参数值,根据mid值得不一样,从服务器获取不同的数据展示即可
    6. 哈希值(HASH)
       • #video
       • 客户端也可以通过这种方式把信息传递给服务器(一般不用)
       • 锚点定位
       • 通过哈希值实现页面的路由切换