Ajax-白红宇

什么是Ajax？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式应用的网页开发技术。

ajax是一种浏览器异步发起请求。局部更新页面的技术。

javaScript原生Ajax请求

原生的Ajax请求，

1、我们首先要创建XMLHttpRequest 对象

2、调用open方法设置请求参数

3、调用send方法发送请求

4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

            
             
             
             
             Insert title here

对应接收数据的Servlet和对应的方法：

public class AjaxServlet extends BaseServlet {    private static final long serialVersionUID = 1L;    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("ajax请求过来了 a--" + request.getParameter("a"));        Random random = new Random(System.currentTimeMillis());        // 使用随机数，可以让客户端看到变化        response.getWriter().write(                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));    }}

web.xml中的配置：


         
      
       AjaxServlet
          
      
       com.soyoungboy.servlet.AjaxServlet
        
       
         
      
       AjaxServlet
          
      
       /ajaxServlet

结果：

JQuery的Ajax请求

四个Ajax请求方法

$.ajax方法

$.get方法

$.post方法

$.getJSON方法

一个表单序列化方法：serialize()表单序列化方法

如何使用上面的五个方法：

在JQuery中和Ajax请求有关的方法有四个

$.ajax请求参数

url：请求的地址

type : 请求的方式 get或post

data : 请求的参数 string或json

success: 成功的回调函数

dataType: 返回的数据类型常用json或text

下面的方法必须遵守参数的顺序

$.get请求和$.post请求

url:请求的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text。

Jquery的$.getJSON

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

表单的序列化

serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接，省去我们很多不必要的工作。

由于$.get、$.post和getJSON这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所以我们以$.ajax()方法的使用为示例进行展示：

举例说明：

            
             
             
             
             Insert title here                                
                 
                  
                  
                  
              
     
        
        
     
                  用户名：
      
      
            密码：
      
      
            下拉单选：
      
      
              下拉多选：              
      
      
              复选：             
       check1             
       check2
      
             单选：             
       radio1             
       radio2

对应的servlet代码：

public class AjaxServlet extends BaseServlet {    private static final long serialVersionUID = 1L;    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("ajax请求过来了 a--" + request.getParameter("a"));        Random random = new Random(System.currentTimeMillis());        // 使用随机数，可以让客户端看到变化        response.getWriter().write(                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));    }        protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("jqueryAjax请求过来了 a--" + request.getParameter("a"));        Random random = new Random(System.currentTimeMillis());        // 使用随机数，可以让客户端看到变化        response.getWriter().write(                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));    }        protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("jqueryGet请求过来了 a--" + request.getParameter("a"));        Random random = new Random(System.currentTimeMillis());        // 使用随机数，可以让客户端看到变化        response.getWriter().write(                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));    }        protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("jqueryPost请求过来了 a--" + request.getParameter("a"));        Random random = new Random(System.currentTimeMillis());        // 使用随机数，可以让客户端看到变化        response.getWriter().write(                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));    }        protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("jqueryGetJSON请求过来了 a--" + request.getParameter("a"));        Random random = new Random(System.currentTimeMillis());        // 使用随机数，可以让客户端看到变化        response.getWriter().write(                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));    }}