Ajax
AJAX：即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，尤其是在一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统Web开发
World Wide Web（简称Web）：是随着Internet的普及使用而发展起来的一门技术，其开发模式是一种请求→刷新→响应的模式，每个请求由单独的一个页面来显示，发送一个请求就会重新获取这个页面。
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校验用户名是否已存在
<%@ 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)
