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
        • 客户端也可以通过这种方式把信息传递给服务器(一般不用)
        • 锚点定位
        • 通过哈希值实现页面的路由切换
posted @ 2017-10-23 16:57  Scar007  阅读(1030)  评论(0)  编辑  收藏  举报