AJAX
AJAX：通过JS异步地向服务器发送请求并接受响应数据，响应数据的格式原来是xml，后来被JSON替代了
优点：
1.异步 访问
2.局部 刷新
使用场合
1.搜索建议
2.表单验证
3.前后端完全分离时使用
同步请求
当客户端向服务器发送请求时，服务器在处理的过程中，浏览只能等待，效率较低
异步请求
当客户端向服务器发送请求时，服务器在处理的过程中，浏览器可以做其他的操作，不需要一直等待
AJAX核心对象 - 异步对象(XMLHttpRequest)
什么是XMLHttpRequest
简称为 xhr
称为 "异步对象" 代替浏览器向服务器发送异步的请求并接收响应
创建异步对象
主流的异步对象是 XMLHttpRequest 类型的.并且所有主流浏览器(IE7+,Chrome,Firefox,Safari,Opera)也都支持 XMLHttpRequest.但在IE低版本浏览器(IE7以及以下),就不支持XMLHttpRequest,需要使用 ActiveXObject() 来创建异步对象
如果支持 XMLHttpRequest
var xhr = new XMLHttpRequest()
如果不支持 XMLHttpRequest
var xhr = new ActiveXObject("Microsoft.XMLHTTP")
xhr 的成员
方法 - open()
作用:创建请求
语法:open(method,url,async)
method:请求方式,取值 'get' 或 'post'
url:请求地址,字符串
async:是否采用异步的方式发送请求
true:异步请求
false:同步请求
ex:
xhr.open('get','/server',true);
属性 - readyState
作用:请求状态,通过不同的请求状态值来表示xhr与服务器的交互情况
由 0-4 共 5 个值表示5个不同的状态
0 : 请求尚未初始化
1 : xhr已经与服务器建立连接
2 : 服务器端已经接收请求
3 : 请求正在处理中
4 : 响应已经完成
属性 - status
作用:服务器端的响应状态码
200 : 表示服务器已经正确处理请求并给出响应
404 : 请求资源不存在
500 : 服务器内部错误
属性 - responseText
作用 : 接收服务器端响应回来的数据
事件 - onreadystatechange
作用 : 每当 xhr 的 readyState 值发生改变的时候都要触发的行为操作 - 回调函数
关注:
1.xhr 的 readyState 是否为 4
2.xhr 的 status 是否为 200
如果以上两点同时满足的话,则可以接收响应数据(responseText)
ex:
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
}
}
方法 - send()
作用:通知 xhr 开始向服务器发送请求
语法:xhr.send(body)
get : body的值为 null
xhr.send(null)
post: body的值为具体请求提交的数据
xhr.send("请求数据")
AJAX的操作步骤
1.GET 请求
1.创建 xhr 对象
2.创建请求 - open()
3.设置回调函数 - onreadystatechange
判断状态,接收响应,业务处理
4.发送请求 - send()
AJAX 发送 post 请求
请求数据要放在 send() 提交的
var xhr = createXhr()
xhr.open("post", "xxx", true)
xhr.onrreadystatechange = function(){
xxxx xxxx
}
xhr.send('unmae=wangwc&uage=35')
Content-Type的问题
AJAX的post请求，默认会将Content-Type 消息头的值更改为 'text/plain',所以导致提交参数无法获取，
解决方案：将Content-Type的值更改为application/x-ww-form-urlencoded即可
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
JSON
JSON的表现
JSON表示单个对象
1.在{}中使用 key:value 的形式来表示属性（数据）
2.key必须用 双引号 "" 引起来，单引号不行
3.value 如果是字符串的话，也必须用 双引号 "" 引起来
4.多个 key:value 之间用 逗号 隔开
使用JSON表示一个数组
1.使用 [] 来表示一个数组
2.数组中允许包含若干字符串或 JS 对象
使用JSON数组来表示若干字符串
var arr = ['ff', kk']
使用JSON数组来表示若干对象
通过一个数组保存3个人的信息
使用 jq 循环遍历数组
1.$arr.each(i,obj){
i: 遍历出来的元素的下标
obj: 遍历出来的元素
}
$.each()语法：
$.each(arr, function(i, obj){})
后台处理 JSON
前后端 JSON 的处理流程
1.后端先查询出/得到复杂结构的数据
2.在后端将复杂结构的数据转换成符合 JSON 格式的字符串
3.在后端将JSON格式的字符串响应给前端
4.在前端将JSON格式的字符串再转换为JS对象/数组
5.在前端对JS对象/数组 进行循环遍历/取值操作
Python中的JSON处理
在Python中可以使用 json 类完成JSON的转换
import json
jsonStr = json.dumps(元组|列表|字典)
return jsonStr
前端中的JSON处理
由于服务器响应回来的数据时String，所以在前端对复杂结构的数据必须先转换成JS对象或数组，然后再取值或循环遍历
在JS中：
var js对象 = JSON.parse()
