Ajax：js绑定事件、ajax发送Get请求

---

目录：

（1）js按钮实现绑定事件：

（2）ajax发送get请求详细过程：

（3）ajax Get请求提交数据：

（4） Http状态信息总结

---

（1）js按钮实现绑定事件：

test.html:

点击hello 

 点击hello2xxxxxxxx

Ajax发送请求需要一个核心的对象：XMLHttpRequest对象，浏览器内置了这个对象，现代浏览器都是支持的

readyState： 表明请求和响应的处理过程

 

 

 （2）ajax发送get请求详细过程：

ajaxGet.html:分为4步过程

AjaxRequestServlet:

package com.bjpowernode.ajax.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajaxrequest1")
public class AjaxRequestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        /*String s = null;
        s.toString();
        返回500
        */

        // Servlet向浏览器响应一段数据
        PrintWriter out = response.getWriter();

        // out对象向浏览器输出信息
        // 服务器的代码实际上和以前的代码还是完全一样的。
        // 只不过这个out在响应的时候，浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息。
        out.print("welcome to study ajax!!!!");
    }
}

点击按钮：

  

ajaxGet3.html：单独写一个函数callback，然后再调用

    
    



发送ajax get请求

AjaxRequest22Servlet：

package com.bjpowernode.ajax.servlet;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;


@WebServlet("/ajaxrequest22")
public class AjaxRequest22Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应的内容类型以及字符集
        response.setContentType("text/html;charset=UTF-8");
        // 获取响应流
        PrintWriter out = response.getWriter();
        // 响应
        out.print("用户名已存在！！！");

    }
}

 

（3）ajax Get请求提交数据：

ajaxGet2.html：

    
    



usercode

username

发送ajax get请求

  控制器：AjaxRequest2Servlet：

package com.bjpowernode.ajax.servlet;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;


@WebServlet("/ajaxrequest2")
public class AjaxRequest2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应的内容类型以及字符集
        response.setContentType("text/html;charset=UTF-8");
        // 获取响应流
        PrintWriter out = response.getWriter();
        // 响应
        //out.print("用户名已存在！！！");

        // 获取ajax get请求提交的数据
        String usercode = request.getParameter("usercode");
        String username = request.getParameter("username");

        out.print("usercode=" + usercode + ", username=" + username);

    }
}

 

（4） Http状态信息总结