学Ajax是在上上周吧，当时大概是因为得了什么奇怪的病，上课完全不在状态，不知道自己在想啥一天天就那么过去了。希望以后能沉迷于学习、提升自我无法自拔，那些奇奇怪怪的情绪，太影响我拯救地球了。

Ajax是一个蛮酷的技术，趁着现在做的项目要用到，填一下对于Ajax这个知识点的坑。

概念

Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)
作用：它使我们可以获取和显示新的内容而不必载入一个新的Web页面。增强用户体验，更有桌面程序的感觉。
Ajax可以做什么？

• 显示新的HTML内容而不用载入整个页面
• 提交一个表单并且立即显示结果
• 登录而不用跳转到新的页面
• 星级评定组件

• 遍历数据库信息加载更多而不刷新页面
  ……

  
  Ajax主要特点

前端相关的技术点：

• html（html5） 主要用来实现页面的排版布局
• css（css3） 主要用来实现页面的样式美化
• JavaScript（jQuery） 主要用来实现前端功能特效

采用上面的这些技术开发的页面和前端特效脚本需要放到服务器才能够对外提供服务，才能够让互联网上的网友看到。

客户端与服务器

本质上都是计算机，只不过样子不同，配置不同，应用场景不同（安装的应用软件不同）

• 客户端主要用于普通上网用户
• 服务器主要给上网用户提供后台服务

网络相关概念

• IP地址（唯一的确定互联网上的一台计算机）
• 域名 IP地址的别名，方便记忆
• DNS 用于维护IP地址与域名的关系
• 端口 用来确定计算机上的网络应用程序

通信协议理解

通信双方约定的规则

• http/https 超为本传输协议
• ftp 文件传输协议
• smpt/pop3 邮件收发协议
• ......

搭建服务器环境

wamp/phpstudy...集成环境

• windows 操作系统
• Apache 提供静态资源服务（html页面、js文件、css文件、图片。。。）
• MySQL 数据库
• php 编程语言，可以用来开发网站

网站

网站由一系列页面组成（页面由js、css、图片、html标签。。。所有的这些文件都被称为资源）

静态网站

就是提前写好的html页面（包括图片、媒体文件。。。静态资源文件），并且部署到服务器上

静态网站主要存在的问题:

• 随着网站规模的增大可维护性逐渐降低
• 没有交互性

动态网站

动态指的是html页面是动态生成的，这里动态生成的不一定是一个完整的页面，有可能仅仅是页面的一部分，或者仅仅是数据(普通字符串、json、xml)

实现动态网站的技术：

• php
• java（jsp）
• .net
• Node.js
• python
• ......

Ajax-php基础

虽然之前学过，还是简单的复习一下吧

php是一种后台编程语言；使用php可以开发动态网站和后台接口（所谓接口就是url地址，用于给前端提供数据）。

php基础语法

• 变量
• 字符串拼接
• 单引号与双引号
• 内容输出
• 数据类型
• 运算符
• 分支循环语句
• 函数
• 预定义变量（表单处理）

变量

变量以$开头 字母/数字/下划线 不能以数字开头，大小写敏感。

内容输出

• echo：输出简单数据类型，如字符串、数值
• print_r()：输出复杂数据类型，如数组
• var_dump()：输出详细信息，如对象、数组

字符串拼接

js中字符串拼接用"+"；php中字符串拼接用"."

单引号与双引号

• 单引号中的变量会当作普通字符串处理
• 双引号中的变量会解析为变量值

运算符

• 与JavaScript基本类似

数据类型

• 字符串
• 整型
• 浮点型
• 布尔型
• 数组
• 对象
• NULL

预定义变量（表单处理）

• $_GET
• $_POST

分支循环

• if/switch
• while
• for
• foreach

函数

自定义函数

• 语法规则（函数名不区分大小写）

系统函数

• gettype()
• json_encode()

铺垫终于铺完了好累啊学Ajax之前要学这么多东西

实现Ajax的基本思路

如何使用Ajax

步骤：

1. 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2. 准备发送

xhr.open('get','./xxx.php',true);

3. 执行发送动作

xhr.send(null);

4. 指定回调函数

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4&&xhr.status == 200){
  var data = xhr.resopnseText;
if(data == '1'){ //登录成功

}else if(dara == '2'){//用户名或密码错误

    }
  }
}

/**
* xhr.readyState
* 0  xhr对象初始化
* 1  执行发送动作
* 2  服务器端数据已经完全返回
* 3  数据正在解析
* 4  数据解析完成，可以使用了

* xhr.status
* 200 数据相应正常
* 404 没有找到资源
* 500 服务器端错误
**/

未完待续🤥