AJAX

Ajax

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

传统Web开发

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

image

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" %>

  
    
    
  
  
  多少以内的随机数：
  得到一个随机数
  


  

  

@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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


  
  


用户注册

  用户名：
  
  密码：
  

ValidUserServlet.java

@WebServlet(name = "ValidUserServlet",urlPatterns = "/valid.do")
public class ValidUserServlet extends HttpServlet {
    private List lst = new ArrayList();
    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 {

    }
}