课时1 1.ajax简介（异步与同步）
asynchronous javascript and xml
异步js和xml
1、异步交互和同步交互
同步 发送，等待 整个页面刷新
异步 发送，不等待 局部刷新
示例：异步刷新
<button id="btn">点击</button> <h2 id="text"></h2> <script> // 文档加载完成后马上执行 window.onload = function(){ let btn = document.getElementById("btn"); // 给btn注册点击事件监听 btn.onclick = function(){ let text = document.getElementById("text"); text.innerHTML= "hello!"; } } </script>
课时2 2.异步和同步交互图
数据格式
text、xml、json
同步：
请求 ->
响应 <-
请求 ->
响应 <-
异步：
请求 ->
请求 ->
响应 <-
响应 <-
课时3 3.ajax的应用场景和优缺点
优点：
异步交互，增强用户体验
性能：只需要响应部分内容，服务器压力减少
缺点：
ajax不能应用在所有场景
ajax增多了对服务器的请求，给服务器增加压力
课时4 4.ajax四步操作
1、获取XMLHttpRequest
// 大多数浏览器 var xmlHttp = new XMLHttpRequest(); // IE6.0 var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE<=5.5 var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 1
编写一个创建XMLHttpRequest对象的函数
function createXMLHttpRequest(){ try{ // 大多数浏览器 return new XMLHttpRequest(); }catch(e){ try{ // IE6.0 new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ // IE<=5.5 new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ console.log("浏览器版本太老了！"); throw e; } } } }
2、连接服务器
xmlHttp.open("GET", "/url", true);
// 参数：请求方式，请求url，是否为异步
3、发送请求
xmlHttp.send(null);
// 参数：请求体内容，如果是GET,必须给出null，不然FireFox可能不发送
4、注册事件监听器
（1）5个状态：
0 刚创建
1 请求开始，调用open
2 请求发送完成 调用send
3 服务器开始响应
4 服务器响应结束
（2）获取响应内容
// 获取状态 var state = xmlHttp.readyState; // 得到服务器响应状态码 200, 404, 500 var status = xmlHttp.status; // 得到服务器响应内容 var content = xmlHttp.responseText; // 文本格式 var content = xmlHttp.responseXml; // xml格式，document对象
（3）注册监听事件
xmlHttp.onreadystatechange = function(){ // 双重判断 xmlHttp状态为服务器响应结束，服务器状态响应结束 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ var text = xmlHttp.responseText; } }
课时5 5.ajax第一例：helloworld
为了便于测试，服务端使用Python语言
服务端 hello.py
# pip install flask, flask-cors from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app, supports_credentials=True) @app.route("/") def index(): return "<h2>Hello!</h2>" if __name__ == '__main__': app.run()
客户端 demo.html
<button id="btn">点击</button> <h2 id="text"></h2> <script> // 获取XMLHttpRequest对象 function createXMLHttpRequest(){ try{ // 大多数浏览器 return new XMLHttpRequest(); }catch(e){ try{ // IE6.0 new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ // IE<=5.5 new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ console.log("浏览器版本太老了！"); throw e; } } } } // 文档加载完成后马上执行 window.onload = function(){ let btn = document.getElementById("btn"); // 给btn点击事件注册监听 btn.onclick = function(){ let xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET", "http://127.0.0.1:5000/", true); xmlHttp.send(); xmlHttp.onreadystatechange = function(){ // 双重判断 xmlHttp状态为服务器响应结束，服务器状态响应结束 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ var text = xmlHttp.responseText; let h2 = document.getElementById("text"); h2.innerHTML= text; } } } } </script>
6.ajax第二例：发送POST请求
多添加一个请求头
// 设置请求头 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 发送请求体 xmlHttp.send("username=Tom&age=23");
服务端接收函数 hello.py
@app.route("/post", methods=['POST']) def post(): username = request.form.get("username") age = request.form.get("age") return f"<h2>username: {username}, age: {age}</h2>"
客户端修改 demo.html
xmlHttp.open("POST", "http://127.0.0.1:5000/post", true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send("username=Tom&age=23");
课时7 7.ajax第三例：用户名是否已被注册
客户端要求：
1、注册表单
2、监听用户名文本框失去焦点onblur事件
3、获取文本框内容，通过ajax异步发送给服务器
4、如果为1 显示：用户名已被注册
如果为0 什么都不显示
<meta charset="utf-8"> <style> #errorText { color: red; } </style> <form action=""> <input type="text" name="username" id="username"> <span id="errorText"></span> </form> <script> // 获取XMLHttpRequest对象 function createXMLHttpRequest() { try { // 大多数浏览器 return new XMLHttpRequest(); } catch (e) { try { // IE6.0 new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { // IE<=5.5 new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { console.log("浏览器版本太老了！"); throw e; } } } } // 文档加载完成后马上执行 window.onload = function () { let username = document.getElementById("username"); // 失去焦点注册事件监听 username.onblur = function () { let xmlHttp = createXMLHttpRequest(); xmlHttp.open("POST", "http://127.0.0.1:5000/validate", true); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlHttp.send("username=" + username.value); xmlHttp.onreadystatechange = function () { // 双重判断 xmlHttp状态为服务器响应结束，服务器状态响应结束 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { var text = xmlHttp.responseText; let errorText = document.getElementById("errorText"); if (text == '1') { errorText.innerHTML = "用户名已被注册"; } else { errorText.innerHTML = ""; } } } } } </script>
服务端要求：
1、获取客户端传递的用户名参数
2、判断是否为demo，是返回1，否返回0
@app.route("/validate", methods=['POST']) def validate(): username = request.form.get("username") if username == "demo": return "1" else: return "0"
