* 什么是AJAX
Asynchronous JavaScript And XML
异步的
* 同步访问:
当客户端向服务器发送请求时,服务器在处理的过程中,浏览器只能等待
* 异步访问:
当客户端向服务器发送请求时,服务器在处理的过程中,浏览器无需等待,可以做其他操作
AJAX优点:
1. 异步 访问
2. 局部 刷新
适用场合:
1. 搜索建议
2. 表单验证
3. 前后端完全分离
* AJAX核心对象 -- 异步对象(XMLHttpRequest)
1. 什么是XMLHttpRequest
简称xhr (类似于中介)
称为"异步对象",代替浏览器向服务器发送异步的请求并接收响应
2. 创建异步对象
xhr 的创建是由js来提供的
主流的异步对象时XMLHttpRequest类型的,并且主流的浏览器都支持
支持XMLHttpRequest:
通过new XMLHttpRequest()创建
不支持XMLHttpRequest:
通过new ActiveXObject("Microsoft.XMLHTTP")
判断浏览器支持性:
if(windows.XMLHttpRequest){
则说明支持XMLHttpRequest
}else{
则说明支持ActiveXObject("")
}
function createXhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest()
}else{
return new ActiveXObject("microsoft.XMLHTTP")
}
}
* xhr成员
1. 方法 - open()
作用: 创建请求
语法:xhr.open(method,url,async)
method: 请求方式,取值'get 或 'post'
url: 请求地址,取值为字符串
async: 是否采用异步的方式发送请求
true:采用异步
false:采用同步
示例: 使用get方式向01-server的服务器端地址发送异步请求
xhr.open('get','/01-server',true);
2. 属性 - readyState
作用: 请求状态,通过不同的请求状态来表示xhr与服务器的交互状况
由0-4共5个值来表示5个不同的状态
0: 请求尚未初始化
1: 已经与服务器建立连接
2: 服务器端已经接受请求信息
3: 请求正在处理中
4: 响应已完成
3. 属性 - statues
作用:表示服务器段的响应状态码
200: 服务器正确处理所有请求并给出响应
404: NotFound
500: Internet Server Error
... ...
示例:
if(xhr.readyState==4 && xhr.statues==200){
}
4. 属性 - responseText
作用:表示服务器端响应回来的数据
示例:
if(xhr.readyState==4 && xhr.statues==200){
console.log(xhr.responseText)
}
5. 事件 - onreadystatechange
作用:每当xhr的readyState值发生改变时要触发的操作
- 回调函数
示例:
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.statues==200){
接收响应数据做前端业务处理
}
}
6. 方法 - send()
作用: 通过xhr向服务器端发送请求
语法:xhr.send(body)
body为请求主体
get请求: body 值为null
xhr.send(null)
post请求: body值为请求体的数据
xhr.send("请求数据")
* AJAX的操作步骤
当想要从数据库获取数据的时候用 GET
当吧数据交给数据库处理的时候用 POST
1.GET请求
1. 创建 xhr 对象
2. 创建请求 - open()
3. 设置回调函数 - onreadystatechange
1. 判断状态
2. 接受响应
3. 业务处理
4. 发送请求 - send()
2.POST请求
* 创建xhr
* 创建xhr
1. 将请求方式更改为post
2. 如果有请求参数不能拼接在url之后
3. 设置回调函数
4. 设置请求消息头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
5. 发送请求
xhr.send('name=value&name1=value1')
3. JSON
1.介绍JSON
JSON: JaveScript Object Notation
以JS对象的格式来约束前后端交互的符传数据
2.JSO - JS 对象
var obj = {
uname:"zhaokt",
uage:25,
ugender:"男",
}
3.JSON规范
1. 使用JSON表示单个对象
* 使用{}表示一个对象
* 在{}中使用 key:value 来表示属性(数据)
* key必须使用 "" 引起来
* value如果是字符串的话,也必须用 "" 引起来
* 多个 key:value 使用逗号来分割
示例:
var obj = '{"uname":"zhaokt","uage":25}'
2. 使用JSON表示一组对象
使用 [] 表示一组对象
示例:
var users = '[
{"uname":"zhaokt","uage":30},
{"uname":"kangdong","uage":10},
]';
4. 前端中处理JSON
var js对象 = JSON.parse(JSON串)
5. 后端中处理JSON
1. 在python中的处理
1. 允许将 元祖, 列表, 字典 转换成JSON串
2. 元祖, 列表,字典 中可以是字符串也可以是元祖,列表和字典
python中提供了JSON的模块,json模块中提供了dumps方法实现JSON串的转换
2. 在django中的处理
使用django中提供的序列化类来完成QuertSet到JSON字符串的转换
from django.core import serializers
str = serializers.serialize('json',QuerySet)
return Httpresponse(str)
6. 前端传递JSON数据给服务器端
* 前端: 将数据封装成js对象/数组
var params = {
uname : "wangwc",
uage : 30,
ugender : "M"
}
* 前端: 将js对象转换成JSON格式的字符串
方法: JSON.stringify()
作用: 将JS对象转换成JSON串
示例:
var jsonStr= JSON.stringify(params)
* 服务器端: 接收响应数据
jsonStr = request.GET['xxx']
* 服务器端: 将JSON串转换成为python字典/列表
方法: json.loads()
作用: 将JSON串转换成为python字典/列表
示例:
dic = json.load(jsonStr)
dic['key'] 取值
* JQ对AJAX的支持
1. $obj.load()
作用: 载入远程的HTML文件到指定的元素中
语法:
$obj.load(url,data,callback)
$obj: 显示相应内容个jq元素
url: 请求地址
data: 请求参数 (可省略)
方式一: 字符串传参
"key12value1&key2=value2"
注: 此种会使用 get 方式发送请求
方式二: 使用JS对象传参
{
key1:"value1",
key2:"value2"
}
注: 此种传参会使用 post 方式发送请求
2. $.get()
作用: 通过get的方式异步的向远程地址发送请求
语法: $.get(url,data,callback,type)
url: 请求地址
data: 发送到服务器的参数
callback: 响应成功的回调函数
type: 响应回来的数据的格式
取值如下:
1. html: 响应回来的文本是HTML文本
2. text: 响应回来的文本是text文本
3. script : 响应回来的文本是js的执行脚本
4. json : 响应回来的文本是json格式的文本
3. $.post()
与$.get用法相同
4. $.ajax()
作用: 自定义所有的ajax操作
语法:
$.ajax({AJAX的参数对象})
AJAx的参数对象:
1. url: 异步请求地址
2. data： 请求到服务器的参数
1. 字符串
2. JS对象
3. type:请求方式 。'get'或 'post'
4. dataType:服务端响应回来的数据格式
html,text,script,json
5. async: 是否采用异步的方式发送请求
true: 使用异步（默认值）
false: 使用同步
6. success: 响应成功后的回调函数
function(data){
data表示的是响应回来的数据
}
7. error: 请求或响应失败的回调函数
3. 跨域(Cross Domain)
1. 什么是跨域
HTTP协议中的一个策略 - "同源策略"
同源: 多个地址中具备相同协议,相同域名以及相同端口的地址称之为"同源地址"
在HTTP中,只有同源地址才能发送ajax请求,非同源地址是被拒绝的(<script>和<img>)
