AJAX
-
什么是AJAX
Asynchronous Javascript And Xml
异步的 JS 和 XML
通过JS异步的向服务器发送请求并接受响应，响应的数据是XML/JSON格式的同步访问： 当客户端浏览器向服务器发送请求是，服务器在处理的过程中，浏览器只能等待
异步访问： 当客户端浏览器向服务器发送请求时，服务器在处理的过程中，浏览器可以做其他操作，无需一直等待AJAX的优点：
- 异步访问
- 局部刷新
使用场合：
- 搜索建议
- 表单验证
- 前后端完全分离（SPA）single Page Application
-
AJAX核心对象 – 异步对象
- 异步对象 – XMLHttpRequest
由JS提供。。。。简称为xhr
代替浏览器向服务器端发送异步的请求并接受响应 - 创建异步对象
-
主流的异步对象时XMLHttpRequest类型的（IE7+，Chrome，Firefox）
-
IE低版本（IE7以及以下）不支持XMLHttpRequest，需要ActiveXObject()来创建异步对象
创建异步对象- 创建XMLHttpRequest：
var xhr = new XMLHttpRequest(); - 创建ActiveXObject：
var xhr = new ActiveXObject(“Micorsoft.XMLHttp”);
练习：
1. 创建 commom.js
2. 声明一个函数 – createXhr()
3. 在函数中根据浏览器的支持性创建对应的异步对象，并返回。 - 创建XMLHttpRequest：
-
- 异步对象 – XMLHttpRequest
-
xhr.open(method,url,async)
- method
- url:请求地址，字符串
- async:是否采用异步的方式进行提交
- true：异步
- false：同步
示例：以异步的提交方式使用get请求方法向 /01-serveer 的地址发送请求
xhr.open(“get”,"/01-server",true)
-
属性 – readyState
作用：表示xhr的请求状态，通过不同的状态值来表示xhr与服务器的交互情况0： 请求尚未初始化 1： 已经与服务器建立连接 2： 服务器端已接收请求 3：请求正在处理中 4：表示响应已完成 -
属性 – status
作用：服务器端的响应状态码
200：表示服务器端正确处理所有的请求并给出响应
404：请求资源不存在
500：服务器端内部错误 -
事件 – onreadystatechange
作用：每当xhr的readyState值发生改变的时候多要自动触发的一个事件 – 回调函数
只有当readyState的值为4并且status的值为200的时候则可以正常的接收响应数据了。
示例：xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status == 200){ 正常接收响应回来的内容 var resTxt = xhr.responseText; //resTxt表示的就是响应回来的数据 } } -
属性 – responseText
作用：响应数据
示例见6。 -
方法：send()
作用：通知xhr向服务器端发送请求
语法：xhr.send(body)
body:请求体get请求：body的值为null
xhr.send(null)
post请求：body的为要提交的数据
xhr.send(“请求数据”)
from flask import Flask,render_template,request
app = Flask(__name__)
@app.route('/01-ajax-get')
def ajax_get():
return render_template("01-ajax-get.html")
@app.route("/01-server")
def server():
return "这是ajax发送的get请求"
@app.route('/02-ajax-get')
def ajax_get02():
return render_template('02-ajax-get.html')
@app.route("/02-server")
def server02():
uname = request.args['uname']
return "欢迎"+uname
if __name__ == '__main__':
app.run(debug=True)
01-ajax-get.html
<!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>
<script>
$(function () {
$("#btnget").click(function () {
{#1.创建xhr对象#}
var xhr = createXhr();
{#2.创建请求#}
xhr.open("get","/01-server",true);
{#3.设置回调函数#}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200){
$("#show").html(xhr.responseText);
}
};
{#4.发送请求#}
xhr.send(null);
})
})
</script>
</head>
<body>
<a href="/01-server">非ajax请求</a>
<button id="btnget">ajax请求</button>
<div id="show"></div>
</body>
</html>
02-ajax-get.html
<!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>
<script>
$(function () {
$("#btnGet").click(function () {
var xhr = createXhr();
var url = "/02-server?uname="+$("#uname").val();
xhr.open("get",url,true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
$("#show").html(xhr.responseText);
}
};
xhr.send(null)
})
})
</script>
</head>
<body>
用户名：<input type="text" id="uname">
<button id="btnGet">请求</button>
<div id="show"></div>
</body>
</html>
练习：
- 创建数据库------ajaxDB
- 创建实体类 -----User
id，主键，自增
uname，用户名
upwd，密码
uemail，邮箱 - 当光标从用户名的文本框失去焦点的时候，验证用户名的值在数据的uname列中是否存在，并给出提出
class User(db.Model):
__tablename__ = "user"
id = db.Column(db.Integer,primary_key=True,)
uname = db.Column(db.String(30),unique=True)
upwd = db.Column(db.String(30),nullable=False)
uemail = db.Column(db.String(80))
@app.route('/03-register',methods=["GET","POST"])
def register():
return render_template("03-register.html")
@app.route("/03-checkuname")
def checkuname():
uname = request.args['uname']
user = User.query.filter_by(uname=uname).first()
if user:
return "用户已存在"
else:
return "通过"
03-register.html
<!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>
<script>
{#为#uname绑定失去焦点事件#}
$(function () {
$("#uname").blur(function () {
var xhr = createXhr();
var url = "/03-checkuname?uname="+this.value;
xhr.open("get",url,true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
$("#uname-tip").html(xhr.responseText);
}
};
xhr.send(null);
})
})
</script>
</head>
<body>
<p>用户名： <input type="text" id="uname">
<span id="uname-tip"></span>
</p>
<p>密码：<input type="password" id="upwd"></p>
<p>邮箱：<input type="email" id="uemail"></p>
<p><button id="btnReg">注册</button></p>
</body>
</html>
- AJAX 发送post请求
- 请求数据需要放在send()
xhr.send(“参数名1=值&参数名2=值2”); - 将Content-Type的值改为
application/x-www-form-urlencoded
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)
04-post.html@app.route("/04-post") def post(): return render_template("04-post.html") @app.route("/04-server",methods=["POST"]) def server04(): uname = request.form["uname"] return "欢迎"+uname<!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> <script> $(function () { $("#btnPost").click(function () { {#创建xhr#} var xhr = createXhr(); {#创建请求---post#} xhr.open("post","/04-server",true); {#设置回调函数#} xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { $("#show").html(xhr.responseText) } }; {#设置content-type的请求消息头#} xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); {#发送请求--有参数#} var uname = $("#uname").val(); xhr.send("uname="+uname) }); }) </script> </head> <body> <p>姓名：<input type="text" id="uname"> <button id="btnPost">提交</button></p> <div id="show"></div> </body> </html>
- 请求数据需要放在send()
将03-register.html的代码 修改，点击注册的时候如果用户不存在则添加到数据库，并将失去焦点封装为函数，
@app.route("/03-checkuname")
def checkuname():
uname = request.args['uname']
user = User.query.filter_by(uname=uname).first()
if user:
#修改return返回值。
# 1表示用户存在
return "1"
else:
# 0表示用户通过
return "0"
@app.route("/03-reg",methods=['POST'])
def reg():
uname = request.form['uname']
upwd = request.form['upwd']
uemail = request.form['uemail']
user = User()
user.uname = uname
user.upwd = upwd
user.uemail = uemail
try:
db.session.add(user)
db.session.commit()
return "成功"
except:
return "失败"
03-register.html
<!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>
<script>
{#检查用户名称是否存在，并将提示是信息显示在span上，#}
{#return 返回用户名称是否存在的结果，true表示名称已经存在，False表示不存在#}
function checkuname() {
var ret = false;
var xhr = createXhr();
var url = "/03-checkuname?uname="+$("#uname").val();
xhr.open("get",url,false);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText == "1") {
$("#uname-tip").html("用户名称已存在");
ret = true;
} else{
$("#uname-tip").html("用户名可以使用");
{#ret = false;#}
}
}
};
xhr.send(null);
return ret;
}
$(function () {
{#为#uname绑定失去焦点事件#}
$("#uname").blur(function () {
checkuname();
});
$("#btnReg").click(function () {
{#判断用户是否存在#}
if (checkuname()) {
alert("用户名称已存在")
} else{
alert("可以注册");
var xhr = createXhr();
var url = "/03-reg";
xhr.open("post",url,true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText)
}
};
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var uname = $("#uname").val();
var upwd = $("#upwd").val();
var uemail = $("#uemail").val();
var params = "uname="+uname+"&upwd="+upwd+"&uemail="+uemail;
xhr.send(params);
}
});
})
</script>
</head>
<body>
<p>用户名： <input type="text" id="uname">
<span id="uname-tip"></span>
</p>
<p>密码：<input type="password" id="upwd"></p>
<p>邮箱：<input type="email" id="uemail"></p>
<p><input type="button" id="btnReg" value="注册"></p>
</body>
</html>
JSON
-
JSO
JavaScript Object
JS对象的表示方式：1. 使用 {} 表示一个对象 2. 在 {} 中，使用key:value的格式来表示 数据 3. 如果value是字符串的话需要用引号。 -
JSON
- 什么是JSON
JavaScript Object Notation
采用JS对象发的格式所描述出来的字符 - JSON表现
-
JSON表示单个对象
1. 使用 {} 表示一个对象 2. 在 {} 中，使用key:value的格式来表示 数据 3. 如果value是字符串的话需要用引号。 4. key必须用"" 5. value如果是字符串的话，必须用"" -
JSON表示一个数组
1. 使用 [ ] 来表示一个数组 2. 数组中允许包含若干对象 或 字符串 var arr = '["小红","小明","小李"]' var arr = '[{"uname":"小红","age":18},{"uname":"小明","age":20}]'
-
- JSON串转换为JS对象
var JS对象 = JSON.parse(JSON串) - Python中JSON的处理
- 将对象转换成JSON串
- 元组，列表，字典 是可以转换为JSON串的
- 元组，列表，字符串必须是
- 字符串，数字
- 元组，列表，字典
- 转换成JSON串
import json
json.dumps(元组 | 字典 | 列表)
return jsonStr
04-user.htm@app.route("/04-users") def users(): return render_template("04-user.html") @app.route("/04-server") def server04(): # 查询users信息 users = User.query.all() # 将users信息转换成字典，保存进列表 list = [] for u in users: list.append(u.to_dict()) # 列表响应 return json.dumps(list)<!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> <script> $(function () { $("#btnShow").click(function () { var xhr = createXhr(); xhr.open("get","/04-server",true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { {#将responText转换为JSON数组#} var users = JSON.parse(xhr.responseText); {#解析数组拼tr,td显示到contenth中#} var html = ""; for (var i=0;i<users.length;i++) { html += "<tr>"; html += "<td>"+users[i].uname+"</td>"; html += "<td>"+users[i].upwd+"</td>"; html += "<td>"+users[i].uemail+"</td>"; html += "</tr>"; } $("#content").html(html) } }; xhr.send(null) }) }) </script> </head> <body> <button id="btnShow">显示</button> <table border="1" width="300"> <tr> <th>用户名</th> <th>密码</th> <th>邮箱</th> </tr> <tbody id="content"></tbody> </table> </body> </html> - 将对象转换成JSON串
- 什么是JSON
-
jq 对 ajax 的支持
-
$obj.load(url,data,callback);
$obj：通过jq选择器获取到的页面元素
URL：请求地址
data：发送到服务器端的参数数据
callback：请求成功时的回调@app.route("/05-load") def load_biews(): return render_template("05-load.html")05-load.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/js/jquery-1.11.3.js"></script> <script> $(function () { $("#btnLoad").click(function () { $("#show").load("/04-users") }) }) </script> </head> <body> <button id="btnLoad">load()</button> <h2>使用load()加载/04-users到当页面</h2> <div id="show"></div> </body> </html> -
$.get(url,data,callback,type)
@app.route("/06-jq-get") def jq_get(): return render_template("06-jq-get.html") @app.route("/06-server") def server06(): # 方式1 的处理 # return "使用$.get()发送的get请求" # 方式2的处理 # uname = request.args['uname'] # uage = request.args['uage'] # return f"姓名：{uname}，年龄：{uage}" # 方式3：返回JSON的格式 list = [ { "uname": "小明", "uage": 20, }, { "uname": "嫦娥", "uage": 25 }, { "uname": "刘姥姥", "uage": 88 }, ] return json.dumps(list)06-jq-get.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/js/jquery-1.11.3.js"></script> <script> $(function () { $("#btnGet").click(function () { {#$.get("/06-server",function (data) {#} {#data表示服务器端响应回来的数据#} {# $("#show").html(data);#} {# }) #} {#方式2：有请求参数的处理#} {#向/06-server发送请求并传递两个参数的服务器#} {#参数1：uname = TeacherQi#} {#参数2：uage = 26#} /**var params = "uname=TeacherQi&uage=26"; $.get("/06-server",params,function (data) { $("#show").html(data); }); **/ {#方式3：响应过来的数据是JSON的#} $.get("/06-server",function (data) { for (var i=0;i<data.length;i++) { console.log("姓名："+data[i].uname+"，年龄"+data[i].uage) } },"json") }) }) </script> </head> <body> <button id="btnGet">发送get请求</button> <div id="show"></div> </body> </html> -
$.ajax()
语法：$.ajax({请求设置对象})
请求设置对象中的属性：1. url：字符串，表示异步请求的地址。 2. type：字符串，表示请求方式 取值为 get post 3. data： 表示传递到服务器端的参数 1. 字符串："key=value&key=value" 2. JS对象：{key:"value",key:"value"} 4. async：是否使用异步方式进行请求， true：使用异步 false：使用同步 5. dataType：字符串。表示响应回来的数据的格式 1. "html" 2. "text" 3. "xml" 4. "json" 5. "script" 6. "jsonp" 6. success：请求成功是的回调函数 success:function(data) { data表示的是请求成功后的响应数据 } 7. error：请求失败是的回调函数 8. beforeSend：发送请求之前的回调函数， 返回true：则正常发送AJAX请求 返回false：则终止本次请求的发送
-
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
