Ajax
AJAX：即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，尤其是在一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统Web开发
World Wide Web（简称Web）：是随着Internet的普及使用而发展起来的一门技术，其开发模式是一种请求→刷新→响应的模式，每个请求由单独的一个页面来显示，发送一个请求就会重新获取这个页面。
image.png
Ajax采用异步通信，主要以数据交互为主；传统的web开发采用同步通信，主要以页面交互为主。
ajax请求步骤
1.创建Ajax对象
var request = new XMLHttpRequest();
2.连接服务器
open(method,url,async);
request.open("get","query.do",true);//异步请求
3.发送请求
send(string)
在使用GET方式请求时无需填写参数
在使用POST方式时参数代表着向服务器发送的数据
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头信息,否则发送数据有问题
// xhr.send('max=100');
4.接收服务器相应数据
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>
多少以内的随机数：<input type="text" id="max">
<button onclick="getRandom();">得到一个随机数</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);
}
}
可以写一个传统web开发方式的请求回应，进行对比。
ajax校验用户名是否已存在
image.png
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function checkUser() {
//创建一个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");
//发送请求给服务器
ajaxReq.send("username="+username.value);
//设置一个回调函数，用来处理服务器的回应。
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() {
//创建一个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");
//发送请求给服务器
ajaxReq.send("username="+username.value);
//设置一个回调函数，用来处理服务器的回应。
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)
