AJAX

5天快速入门ajax知识大纲，包括客户端与服务器、网络相关概念、通信协议、服务器环境的安装、PHP基础语法等等。

AJAX

• AJAX第一天
  • 初始AJAX
    • url地址
      • 展示网页
      • 提供数据
    • 局部刷新
      • 避免整个界面刷新，加载更快、省流量
    • 异步刷新
      • 不影响当前界面现有的操作
  • 客户端与服务器
    • 服务器就是提供服务的
      • 网页服务
      • 文件上传下载
      • 邮件
      • ...
    • 客户端
      • 访问服务器的服务
        • 个人电脑
        • 个人手机
        • PAD等个人终端
  • 网络相关概念
    • IP地址
      • 用来标识查找某一台计算机
      • ipconfig
      • ifconfig
      • ipv4和ipv6
    • 端口
      • 一台电脑上可能提供多种服务，可以用端口进行区分
        • 80端口(默认)
          • 网站服务
        • 21端口
          • 文件上传下载
        • 22/23端口
          • telnet远程连接
        • 计算机支持65536个端口
          • 1024之下的端口系统使用
          • 自定义端口一般在1024之上
    • 域名
      • ip地址太难记了，使用域名来进行记忆
        • baidu.com
        • qq.com
    • DNS
      • 域名解析服务器
        • 根据域名查询到IP地址
        • 在浏览器中输入www.baidu.com的流程
          • 浏览器先在本地查找对应关系
            • windows/system32/drivers/etc/HOSTS
          • DNS服务器查找对应关系
  • 通信协议
    • 事先规定的规则
      • HTTP/HTTPS
        • 超文本传输协议（HTTP，HyperText Transfer Protocol)
      • FTP文件传输协议
      • SSH安全外壳协议
      • DHCP动态主机分配协议
      • SMTP（Simple Mail Transfer Protocol ）简单邮件传输协议
  • 服务器环境的安装
    • 为啥安装wamp？
      • 让我们的网页以服务的形式提供给别人查看
    • wamp
      • windows
      • apache
      • mysql
      • php
    • lamp
    • 配置(更改配置文件之前最好先备份)
      • 允许别人通过ip地址访问
        • Allow from all
      • 更改网站根路径
        • DocumentRoot
      • 虚拟主机的配置
        • 虚拟主题配置的场景？
          • 一台服务器拥有多个站点
  • 网站
    • 静态网站
      • 维护性差
      • 与用户没有交互性
    • 动态网站
      • 模板+动态填充的数据
  • PHP基础语法
    • echo:输出内容
      • echo 输出字符串
      • print_r 输出复杂类型
      • var_dump 输出复杂类型
    • 变量声明：$
    • 变量的使用：$
    • 字符串拼接：.
    • 数组
      • 一维数组
        • $arr = array(1,2,3); $arr = array("hello","world");
        • 下标索引默认是数字，从0开始
        • 下标索引可以自定义 $arrNew = array("username" => "zhangsan","age" => "18" ); echo $arrNew["username"];
      • 二维数组
        • 一维数组的某一个元素还是个数组
      • 数组遍历
        • 普通for循环
        • foreach
    • 函数
      • 自定义函数
        • function声明
        • 变量记得加$符号
        • 和js类似
      • 系统函数
        • print_r
        • var_dump
        • json_encode:将数组变为json格式的字符串
• AJAX第二天
  • 预定义变量
    • $_GET
      • get请求
    • $ _POST
      • post请求
  • 使用AJAX来实现局部刷新
    • 创建XMLHttpRequest对象
      • 兼容处理
    • 准备发送
      • 请求方式
        • get
          • 参数在url后面
            • 参数中如果带有中文，则使用encodeURI进行地址转码
        • post
          • 参数在send方法中
            • 不需要使用encodeURI转码
            • 必须使用header设置编码
      • 请求地址
      • 同步或者异步
        • true是异步(默认)
        • false是同步
    • 执行发送动作
      • get
        • send方法中要传null
      • post
    • 指定回调函数
      • 获取数据
        • xhr.readyState
          • readyState=0表示xhr对象创建完成
          • readyState=1表示已经发送了请求
          • readyState=2 浏览器已经收到了服务器响应的数据
          • readyState=3 正在解析数据
          • readyState=4 数据已经解析完成，可以使用了，一般我们只关心这个值
        • xhr.status
          • http的常见状态码
            • 200表示响应成功
            • 404没有找到请求的资源
            • 500服务器端错误
        • xhr.responseText/xhr.responseXML
  • 同步与异步的理解
    • js是单线程的
    • 浏览器不是单线程的
      • Http请求线程
    • 事件队列
      • 事件队列中的任务执行的条件
        • 主线程已经空闲
        • 任务满足触发条件
          • 定时函数（延时时间已经达到）
          • 事件函数（特定事件被触发）
          • ajax的回调函数（服务器端有数据响应）
• AJAX第三天
  • 数据格式
    • XML数据格式
      • 标签包裹数据
      • 头声明
      • 标签必须成对出现，标签名称可以自定义
      • 缺点
        • 元数据占用的数据量比较大，不利于大量数据的网络传输
          • 元数据：表述数据的数据
        • 解析不太方便
      • 解析XML
        • xhr.responseXML
          • 使用dom解析
            • getElementsByTagName
            • childNodes
            • children
            • nodeType
              • 得到节点类型
            • innerHTML
              • 获取文本内容
      • 使用php开发xml数据格式的接口
        • 要设置header
          • header("Content-Type:text/xml;");//这里设置响应头信息，保证浏览器可以把相应内容识别为xml文件类型
    • JSON数据格式
      • JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
      • 键值对的形式，和js中的对象很类似
      • json 数据中的键必须用双引号包括
      • json比 xml更小、更快，更易解析
      • 解析
        • 将字符串变成一个对象之后，直接通过对象点属性的方式就可以获取到我们需要的值了，比解析xml要简单很多
        • xhr.responseText
        • JSON.parse
          • 将json形式的字符串转化成对象
        • JSON.stringify
          • 将对象转化成字符串
      • 使用php开发json数据格式的接口
        • json_encode
          • 将php中的数组转化成json格式的数据
  • AJAX的封装
    • 封装需要考虑的事情
      • 什么是变的
      • 什么是不变的
      • 如何通知调用者
      • 如何调用起来方便
        • 封装优化
  • JQuery中对于AJAX的封装
    • $.ajax({})传入对象
    • 对象中
      • type
        • get
        • post
      • url
        • 请求地址
      • data
        • 请求参数，也可以是一个对象
      • dataType
        • json
        • text
        • xml
        • jsonp
      • success
        • 成功之后的回调
      • error
        • 失败之后的回调
• AJAX第四天
  • 跨域
    • Ajax发送的请求是有限制的
      • 同源策略
    • 解决方案
      • jsonp
        • 本质：script引入外部文件，这个文件的内容就是一个方法调用
          • 静态script标签
            • script标签中的src属性
              • 同步加载
              • 异步加载
          • 动态script标签
            • document.createElement("script");
            • 指定src属性
            • 加到head标签中
            • 由服务器返回一个函数调用
              • 函数名称通过url参数确定
                • key值必须和后端约定好
  • 自己实现jsonp的封装
    • jsonp只支持get
    • 创建script标签
    • 配置script标签的src属性
      • 传递jsonp
      • 传递jsonpCallback
    • 给window增加一个方法，方法的名称就是jsonpCallback的值
  • 使用jQuery实现跨域
    • dataType:jsonp
    • jsonp:"cb"
    • jsonpCallback:"hello"
• AJAX第五天
  • 模板引擎的使用
    • 模板+数据==>HTML片段
    • artTemplate
      • 1、定义模板
        • type
        • id
        • 模板中的内容
          • 标签
          • 语法控制
            • {{}}
            • if
            • each
            • #
      • 2、使用
        • template(模板id,数据)
          • 小技巧：有时候需要对数据加工之后再传递给模板
  • 第三方平台的使用
    • www.mob.com
    • 使用步骤
      • 申请账号
      • 申请appkey
      • 参照文档
  • 获取数据的几种场景
    • 前端界面获取自己服务器的数据
    • 前端界面获取别人服务器的数据，别人服务器返回的是jsonp格式数据
    • 前端界面获取别人服务器的数据，别人服务器返回的是json格式数据
      • 使用自己的服务器做中转