AJAX

AJAX：即“Asynchronous Javascript And XML”(异步的JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术，尤其是在一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

传统Web开发

World Wide Web(简称Web)：是随着Internet的普及使用而发展起来的一门技术，其开发模式是一种请求→刷新→响应的模式，每个请求由单独的一个页面来显示，发送一个请求就会重新获取这个页面。

Ajax采用异步通信，主要以数据交互为主；传统的web开发采用同步通信，主要以页面交互为主。

例子：在页面写一个生成随机数的表单

用form表单提交的方式

index.jsp

$Title$

${num}

random.do

@WebServlet(name = "randomServlet",urlPatterns = "/random.do")

public class randomServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String strmax = request.getParameter("max");

int max = Integer.parseInt(strmax);

Random random = new Random();

int num = random.nextInt(max);

request.setAttribute("num",num);

request.setAttribute("max",max);

request.getRequestDispatcher("index.jsp").forward(request,response);

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}

}

用这种方式是向后台提交整个网页

下面用ajax方式

ajax请求步骤

1.创建Ajax对象

var request = new XMLHttpRequest();

2.连接服务器

open(method,url,async);

request.open("get","query.do",true);

//get或者post(多用get)，请求的服务器地址，同步(false)或者异步(true)请求

3.发送请求

send(string)

在使用GET方式请求时无需填写参数,对数据库无害的时候用get

req.open('get','random.do?max=100‘,true);

req.send();

在使用POST方式时参数代表着向服务器发送的数据

req.open('post','random.do',true);

req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

//post请求需要设置HTTP头信息,否则发送数据有问题

req.send('max=100');

4.接收服务器相应数据

req.onload = function () {

console.log(req.responseText);

}

index.jsp

$Title$

function getNum() {

var input = document.getElementById("max");

//以ajax的方式(js)，向服务器发出请求，收到回应(回应中包含服务器生成的随机数)

//1.创建ajax请求对象

var req = new XMLHttpRequest();

//2.调用第一步中创建的req对象的open方法，设置连接服务器的信息

//open(method,url,async);method是post或者get,url是链接地址，async是true(异步)或者false(同步)

req.open("get","random.do?max="+input.value,true);

//3.真正向服务器发出该请求

req.send();

//4.处理服务器的回应,服务器回应的数据可以在req对象的responseText属性中获得

req.onload = function () {

//将该随机数显示在id是num的div中

var div = document.getElementById("num");

div.innerHTML = req.responseText;

}

}

random.do

@WebServlet(name = "randomServlet",urlPatterns = "/random.do")

public class randomServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String strmax = request.getParameter("max");

int max = Integer.parseInt(strmax);

Random random = new Random();

int num = random.nextInt(max);

PrintWriter printWriter = response.getWriter();

printWriter.println(num);

// request.setAttribute("num",num);

// request.setAttribute("max",max);

// request.getRequestDispatcher("index.jsp").forward(request,response);

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request,response);

}

}

ajax校验用户名是否已存在

index.jsp

$Title$

function check() {

var input = document.getElementById("username");

var req = new XMLHttpRequest();

req.open("get","reg.do?username="+input.value,true);

req.send();

req.onload = function () {

var span = document.getElementById("msg");

if(req.responseText == 1){

span.innerHTML = "用户名已经存在";

span.style.color = "red";

}

else{

span.innerHTML="可以注册";

span.style.color = "green";

}

}

}

name:

hobby:

reg.do

@WebServlet(name = "regServlet",urlPatterns = "/reg.do")

public class regServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String username = request.getParameter("username");

if(username.equals("admin")){

response.getWriter().println(1);

}

else {

response.getWriter().println(0);

}

}

}