day 11/8 AJAX复习

AJAX

动态网站和静态网站

​ 动态网站可维护性高，拓展性强，成本比较高

​ 静态网站可维护性低，成本低

PHP

**单引号和双引号的区别：**单引号将内容解析成字符串 双引号将内容解析成变量

配置虚拟主机

1.httpd配置文件 ====》documentRoot 根路径 ======> extra文件夹 =====> v-hosts配置文件 ====》定义主机名 别名 根路径 ===》修改hosts 127.0.0.1(表示本机) chen.com

配置多台虚拟主机

VirtualHosts 把其下面的注释打开 注释内容为----- Include conf/extra/httpd-vhosts.conf==》在v-hosts 文件中配置多台虚拟主机 ==》修改hosts文件 ==》 修改权限标签 Directory 把它更改为根目录

AJAX

• 原生

  • 1.创建核心对象 XMLHttpRequest（xhr）
  • 2.准备发送 xhr.open(参数)
    • 1. 请求方式 get（参数在URL） post(请求体)
      2. URL： 请求地址
      3. 同步异步 默认是异步 true
  • 3.发送请求 xhr.send（参数）
    • 当是get时 参数为null
    • 当是post 参数为需传递到后台的参数
  • 4.回调函数 xhr.onreadystatechange
    • readyState
      • 0 对象创建成功
      • 1 已发送请求
      • 2 浏览器接收到数据
      • 3 浏览器解析数据
      • 4 数据解析完成 可以开始使用
    • status
      • 2XX 成功
      • 3XX 转发或重定向
      • 4XX 找不到资源
      • 5XX 服务器端错误

• 不适用ajax如何实现异步刷新

  • 隐藏帧
    • iframe 子框架上的数据放到大窗口的DOM元素下

• JQuery封装的ajax

• $.ajax() 内部参数为一个对象

  • type 请求方式
  • url 请求地址
  • data 请求参数
  • dataType
    • xml responseXML
    • text responseText
    • script(脚本)responseText
    • html responseText
    • json responseText
    • jsonp responseText
  • success 数据请求成功后的回调函
  • error 失败后的回调函数

  跨域

  ajax默认不允许跨域，因为同源策略

  • dataType改为jsonp

  jsonp原理

  • 动态创建script标签 (可以进行跨域操作)
    *
  • 静态创建script标签 ：
    • 保证加载顺序
    • 参数不方便传递

  模板引擎

  ​ 数据+模板 ==> 静态页面的片段

  前后端分离