什么是AJAX
Asynchronous JavaScript And Xml
异步的 JS 和 Xml
通过js异步的向服务器发送请求并接受响应数据
同步访问：
当客户端向服务器发送请求时 服务器在处理的过程中浏览器只能等待
异步访问：
当客户端向服务器发送请求时 服务器在处理的过程中 客户端可以做其他操作
不需要一直等待
AJAX优点：
异步访问
局部刷新
使用场合：
搜索建议
表单验证
前后端完全分离
AJAX核心对象 异步核心对象（XMLHttprequest）：
什么是XMLHTTPRequest
代替浏览器向服务器发送异步请求并接受响应的 “异步对象”
是由js来提供的
创建异步对象
主流的异步对象是XMLHTTPRequest类型的
并且主流浏览器（IE+ Chrome Firefox Safari Opera）都支持
低版本浏览器中（IE6以下）就不支持XMLHTTPRequest
需要使用ActiveXObject() 来创建异步对象
1.AJAX
1.创建 xhr
/**
* common.js
*/
function createXhr(){
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else
return new ActiveXObject('Microsoft.XMLHTTP');
}
AI 代码解读
@app.route('/02-get')
def get_views():
return render_template('02-get.html')
AI 代码解读
2.xhr 的成员
1.方法 - open()
作用：创建请求
语法：open(method,url,asyn)
method:请求方式，取值'get' 或 'post'
url:请求地址，字符串
asyn:是否采用异步的方式
true:异步
false:同步
ex:
xhr.open('get','/server',true);
2.属性 - readyState
作用：请求状态，通过不同的请求状态来表示xhr与服务器的交互情况
由0-4共5个值来表示5个不同的状态
0 ：请求尚未初始化
1 ：已经与服务器建立连接
2 ：服务器端已接收请求
3 ：请求正在处理中
4 ：响应已经完成
3.属性 - status
作用：服务器端的响应状态码
200 ：表示服务器正确处理所有的请求以及给出响应
404 ：请求资源不存在
500 ：服务器内部错误
... ...
4.事件 - onreadystatechange
作用：每当xhr的readyState发生改变的时候都要触发的操作 - 回调函数
只有当readyState的值为4并且status的值为200的时候，才可以正常的去接收响应数据
5.属性 - responseText
作用：响应数据
6.方法 - send()
作用：通知xhr向服务器端发送请求
语法：send(body)
get请求：body的值为null
send(null)
post请求：此处为要提交的数据
send("请求数据")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="send_ajax()">发送AJAX请求</button>
<p id="show"></p>
<script src="/static/js/common.js"></script>
<script>
function send_ajax(){
//1.创建xhr
var xhr = createXhr();
//2.创建请求
// xhr.open(method,url,asyn)
xhr.open('get','/02-server',true);
//3.设置回调函数(判断状态接收响应数据)
//xhr.onreadystatechange = function(){}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//xhr的自身状态是4并且服务器的状态是200就可以接收响应数据
document.getElementById('show').innerHTML = xhr.responseText;
}
}
//4.发送请求
xhr.send(null);
}
</script>
</body>
</html>
AI 代码解读
3.AJAX的操作步骤
1.GET请求
1.创建 xhr 对象
2.创建请求 - open()
3.设置回调函数 - onreadystatechange 判断状态并接收响应数据
4.发送请求 - send()
请求参数：
推荐：请求地址后拼QueryString
xhr.open('get','/02-server?key=value&key=value',true)
2.POST请求
1.创建 xhr 对象
2.创建请求 - open()
3.设置回调函数 - onreadystatechange 判断状态并接收响应数据
4.设置请求消息头 - Content-Type
5.发送请求 - send()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
</head>
<body>
姓名：<input type="text" id="uname">
<button id="btnSend">发送AJAX请求</button>
<p id="show"></p>
<script>
$(function(){
$("#btnSend").click(function(){
//1.创建xhr
var xhr = createXhr();
//2.创建请求
var url = "/03-server?uname="+$("#uname").val();
xhr.open('get',url,true);
//3.设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
$("#show").html(xhr.responseText);
}
}
//4.发送请求
xhr.send(null);
});
});
</script>
</body>
</html>
AI 代码解读
