Ajax
AJAX：即“Asynchronous Javascript And XML”（異步的JavaScript和XML）是钥，是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術，尤其是在一種在無需重新加載整個網(wǎng)頁的情況下衍慎，能夠更新部分網(wǎng)頁的技術甥角。
傳統(tǒng)Web開發(fā)
World Wide Web（簡稱Web）：是隨著Internet的普及使用而發(fā)展起來的一門技術垦搬，其開發(fā)模式是一種請求→刷新→響應的模式呼寸，每個請求由單獨的一個頁面來顯示，發(fā)送一個請求就會重新獲取這個頁面猴贰。
image.png
Ajax采用異步通信对雪，主要以數(shù)據(jù)交互為主；傳統(tǒng)的web開發(fā)采用同步通信米绕，主要以頁面交互為主瑟捣。
ajax請求步驟
1.創(chuàng)建Ajax對象
var request = new XMLHttpRequest();
2.連接服務器
open(method,url,async);
request.open("get","query.do",true);//異步請求
3.發(fā)送請求
send(string)
在使用GET方式請求時無需填寫參數(shù)
在使用POST方式時參數(shù)代表著向服務器發(fā)送的數(shù)據(jù)
xhr.open('get','random.do?max=100‘,true);
xhr.send();
// xhr.open('post','random.do',true);
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//post請求需要設置HTTP頭信息,否則發(fā)送數(shù)據(jù)有問題
// xhr.send('max=100');
4.接收服務器相應數(shù)據(jù)
xhr.onload = function () {
console.log(xhr.responseText);
}
一個綜合實例
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script>
function getRandom() {
var max = document.getElementById('max');
var xhr = new XMLHttpRequest();
xhr.open('get','random.do?max='+ max.value,true);
xhr.send();
// xhr.open('post','random.do',true);
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xhr.send('max='+ max.value);
xhr.onload = function () {
var div = document.getElementById('num');
div.innerHTML = xhr.responseText;
}
}
</script>
</head>
<body>
多少以內的隨機數(shù)：<input type="text" id="max">
<button onclick="getRandom();">得到一個隨機數(shù)</button>
<div id="num">
</div>
</body>
</html>
@WebServlet(name = "RandomServlet",urlPatterns = "/random.do")
public class RandomServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int max = Integer.parseInt(request.getParameter("max"));
Random random = new Random();
int num = random.nextInt(max);
response.getWriter().println(num);
}
}
可以寫一個傳統(tǒng)web開發(fā)方式的請求回應，進行對比义郑。
ajax校驗用戶名是否已存在
image.png
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function checkUser() {
//創(chuàng)建一個XMLHttpRequest類型的對象ajaxReq
var ajaxReq = new XMLHttpRequest();
var username = document.getElementById('username');
//用ajaxReq打開一個連接
ajaxReq.open("post","valid.do",true);
ajaxReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//發(fā)送請求給服務器
ajaxReq.send("username="+username.value);
//設置一個回調函數(shù)蝶柿，用來處理服務器的回應。
ajaxReq.onload = function () {
var msg = document.getElementById('msg');
if(ajaxReq.responseText=="0")//可以注冊非驮，用戶名還不存在
{
msg.innerHTML="可以注冊";
}
else
{
msg.innerHTML="用戶名已存在";
}
}
}
</script>
</head>
<body>
用戶注冊
<form method="post" action="valid.do">
用戶名：<input type="text" id = "username" name="username" onblur="checkUser();">
<span id="msg"></span>
密碼：<input type="text" name="pwd">
<input type="submit">
</form>
</body>
</html>
ValidUserServlet.java
@WebServlet(name = "ValidUserServlet",urlPatterns = "/valid.do")
public class ValidUserServlet extends HttpServlet {
private List<String> lst = new ArrayList<String>();
public void init() throws javax.servlet.ServletException
{ /* compiled code */
lst.add("zhangsan");
lst.add("lisi");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strName = request.getParameter("username");
//contains---包含
PrintWriter pw = response.getWriter();
if(lst.contains(strName))//用戶已存在
{
pw.print("1");
}
else
{
pw.print("0");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
python版
<html>
<head>
<title>$Title$</title>
<script>
function checkUser() {
//創(chuàng)建一個XMLHttpRequest類型的對象ajaxReq
var ajaxReq = new XMLHttpRequest();
var username = document.getElementById('username');
//用ajaxReq打開一個連接
ajaxReq.open("post","hello",true);
ajaxReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//發(fā)送請求給服務器
ajaxReq.send("username="+username.value);
//設置一個回調函數(shù)交汤，用來處理服務器的回應。
ajaxReq.onload = function () {
var msg = document.getElementById('msg');
var json = JSON.parse(ajaxReq.responseText)
if(json.res=="1")//可以注冊劫笙，用戶名還不存在
{
msg.innerHTML="可以注冊";
}
else
{
msg.innerHTML="用戶名已存在";
}
}
}
</script>
</head>
<body>
用戶注冊
<form method="post" action="valid.do">
用戶名：<input type="text" id = "username" name="username" onblur="checkUser();">
<span id="msg"></span>
密碼：<input type="text" name="pwd">
<input type="submit">
</form>
</body>
</html>
from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/hello',methods=['get','post'])
def hello():
username = ['zhangsan', 'lisi']
name = request.form.get('username')
info = {'res': 1}
if name in username:
info['res'] = 0
return jsonify(info)
if __name__ == '__main__':
app.run(debug=True)
