版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章目录
PS:由于生命宝贵，我并不想把大把时间花在处理浏览器的兼容性上，所有兼容都基于Webkit，不对其他内核或者浏览器进行兼容
AJAX概念
- 运用
HTML和CSS来实现页面，表达信息 - 运用
XMLHttpRequest对象和web服务器进行数据的异步交换 - 运用
JavaScript操作DOM，实现动态局部刷新
XMLHttpRequest对象
创建XMLHttpRequest对象
var 变量 = new XMLHttpRequest();
发送XMLHttpRequest请求
request.open(method,url,async)
request.setRequestHeader('Content-type','application/x-www-form-urlencoded')//不发送文件的方式
request.send(string)
例：
request.open('POST','code.php',true)
request.setRequestHeader('Content-type','application/x-www-form-urlencoded')
request.send("namme=王二狗&sex=男")
获取XMLHttpRequest响应
respoinseText:获得字符串形式的响应数据
respoinseXML:获得XML形式的响应数据
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader():获取所有的响应报头
getResponseHeader():查询响应中的某个字段的值
readyState属性
0：请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用
2：请求已接收（接收到头信息）
3：处理请求中（接收到响应主体）
4：请求已完成，且响应已就绪
使用readyState属性
readyState属性从0-4会触发5次
request.onreadystatechange = function(){
//判断响应是否完成，请求是否成功
if(request.readyState==4 && request.status==200){
//代码
}
}
HTTP协议
HTTP是一种无状态的协议
完整HTTP步骤
- 建立
TCP连接 - 浏览器向服务器发送请求命令
- 浏览器发送请求头信息
- 服务器应答
- 服务器发送应答头信息
- 服务器向浏览器发送数据
- 服务器关闭
TCP连接
HTTP请求
HTTP请求的方法或动作(GET,POST)- 正在请求的
URL - 请求头，包含客户端环境信息，身份验证信息等
- 请求体，请求正文，请求正文中包含客户提交的查询字符串信息，表单信息等
HTTP响应
- 一个数字和文字和文字组成的状态码，用来显示请求是成功还是失败
- 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
- 响应体，也就是响应正文
HTTP状态码
- 1XX:信息类，表示收到
web浏览器请求，正在进一步的处理 - 2XX:成功，表示用户请求被正确接收
- 3XX:重定向，表示请求没有成功，客户必须采取进一步的动作
- 4XX:客户端错误，表示客户端提交的请求有错误
- Found，意味着请求中所引用的文档不存在
- 5XX:服务器错误，表示服务器不能完成对请求的处理
JSON基本概念
- JSON：JavaScript对象表示法（JavaScript Object Notation）
- JSON是存储和交换文本信息的语法，类似XML，它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成
- JSON升级独立于语言的，也就是锁不管什么语言，都可以解析JSON，只需要按照JSON的规则来就行
JSON与XML比较
- JSON的长度和XML格式比起来很短小
- JSON读写的速度更快
- JSON可以使用JavaScript内建的方法进行解析，转换成JavaScript对象
JSON语法规则
JSON数据的书写格式
"名称":"值对"
JSON的值类型
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true，false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
{
"列名":[
{"名称":"值对","名称":"值对","名称":"值对"},
{"名称":"值对","名称":"值对","名称":"值对"},
{"名称":"值对","名称":"值对","名称":"值对"}
]
}
JavaScript解析JSON
var 变量 = JSON.parse(JSON);