day6 - jquery Ajax异步请求处理

主要内容
1.什么是AJAX
2. jQuery.ajax(url, [settings])函数
3. JSON数据交换格式
4. 服务器端处理ajax请求及工具应用
5. 其他jQuery ajax处理工具应用
6. jQuery.get(url, [data], [callback], [type])函数
7. jQuery.post(url, [data], [callback], [type])函数

1. 什么是AJAX

局部页面刷新。AJAX是异步的javaScript和xml数据处理技术。AJAX是利用浏览器对象XMLHttpRequest实现对远程服务器程序发出异步(也可以是同步)请求并从服务器返回数据后使用JavaScript在客户端处理返回数据从而局部更新web资源页面的一种技术。

AJAX处理数据的优势在于根据实际需要选择同步或异步提交到服务器的请求,在异步请求过程中用户无需等待整个页面全部刷新就可以在页面中处理数据,此方式对于传统同步提交(通常是form提交数据)更具有灵活性,增强用户丰富的页面处理体验并大大提高请求效率。

2. jQuery.ajax(url, [settings]) 核心函数

通过HTTP请求加载并返回远程数据(如果需要),jQuery最底层AJAX实现,此函数返回其创建的XMLHtmlRequest对象. 简写为$.ajax(url, [settings]),此函数向服务器发出异步或同步请求并在合适时机调用预定义的JS函数。

在不带参数情况下只返回XMLHtmlRequest对象,它不会向任何服务器程序发出实际请求,如果要设置参数也可以通过$.ajaxSetup()函数来全局设置。

Setting之中的参数设置

2.1 jQuery AJAX回调函数

回调函数是ajax请求过程中某个阶段被执行的功能模块,主要包含以下的回调函数:
beforeSend: 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数,此函数是最先被调用的回调函数
error: 在请求出错时调用,传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象
dataFilter: 在请求成功之后调用,传入返回的数据以及"dataType"参数的值,并且必须返回新的数据(可能是处理过的)传递给success回调函数,此函数总是在success函数之前执行
success: 当请求成功之后调用,传入返回后的数据,以及包含成功代码的字符串,通常在此函数中处理返回的数据
complete: 当请求完成后调用这个函数,无论成功或失败,传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串

代码示例

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

  
    jQuery实现Ajax请求处理
    
    

  
  
    
测试java对象转化为json字符串
2.1 执行成功的回调函数
2.2 执行失败的回调函数的执行顺序

2.2 jQuery AJAX数据返回类型

dataType字符串类型参数设置 期待请求服务器成功返回的数据类型


2.3 jQuery AJAX数据返回类型

2.3 jQuery AJAX主要参数URL

url: 向远程服务器提交请求的url字符串,通常此参数是必需的。url的字符串也可以在其后面使用?参数名=值&参数名=值得方式追加提交到服务器得请求参数

2.4 jQuery AJAX主要参数async

async: boolean类型参数,设定请求方式是异步的(true)还是同步的(false),默认值为true

2.5 jQuery AJAX主要参数cache

cache: boolean类型参数,设置是否缓存页面数据,默认值为true缓存数据,cache缓存只对get方式请求起作用而对post方式无效,注意在dataType为script和json时默认为false

2.6 jQuery AJAX主要参数type

type:字符类型参数,设置请求方法格式,通常支持以下值:
get: http get方式请求,参数将暴露在请求url中
post: http post方式请求,隐藏参数传递
put:
delete:
put和delete多数浏览器不支持

示例:

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


    jQuery实现Ajax请求处理
    
    


    
            

2.7 jQuery AJAX主要参数data

data: Object或String类型参数发送给服务器的数据。将自动转换为请求字符串格式,GET请求中将附加到URL后,必须为Key/Value格式,如果为数组,jQuery将自动为不同值对应同一个名称

示例:

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


    jQuery实现Ajax请求处理
    
    




    
用户名称

2.8 jQuery AJAX主要参数dataType

2.8 jQuery AJAX主要参数dataType

示例:

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


    jQuery实现Ajax请求处理
    
    




    
    



2.9 jQuery AJAX主要参数error

2.9 jQuery AJAX主要参数error

2.10 jQuery AJAX主要参数success

2.10 jQuery AJAX主要参数success

2.11 jQuery AJAX主要参数timeout

timeout: 值类型参数,设置ajax请求的超时时间,单位为毫秒,如果在请求处理中超时,则抛出异常

2.12 jQuery AJAX中文处理

客户端使用contentType ajax函数设置请求内容编码格式

contentType:'application/x-www-form-urlencoded; charset=UTF-8', //设置请求编码格式

在提交到服务器后使用以下方式进行解码

resp.setContentType("text/html;charset=utf-8");

示例
客户端:

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


    jQuery实现Ajax请求处理
    
    











服务器端:

package com.xzit.servlet;

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

public class ChineseHandleServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("中文处理");
        resp.setContentType("text/html;charset=utf-8");
        String name = req.getParameter("username");
        System.out.println(name);
        PrintWriter out = resp.getWriter();
        out.write("hello, "+name);
        out.close();
    }
}

3.服务器端Java对象与JSON格式数据的转换

通常使用ajax实现java web的异步请求处理获得服务器返回的数据可以使用JSON格式进行封装,通常会使用成熟的java语言实现的服务器端组件来进行这种转化。

3.1 json-lib-x.x-jdkxx.jar 工具类

这个开源组件包主要实现对JSON格式数据与java对象的相互转换功能,首先需要部署一些包:


3.1 json-lib-x.x-jdkxx.jar 工具类包

这个开源组件包是主要实现对JSON格式数据与java对象的相互转化功能,可以利用内部组件以及相关方法实现对JSON进行操作。

JsonConfig提供辅助的JSON操作格式化功能,可根据用户要求对数据进行符合要求的格式转换。

将Java对象转换成JSON字符串以及JsonConfig进行格式化数据示例:

package com.xzit.servlet;

import com.xzit.database.DataBase;
import com.xzit.domain.Employee;
import com.xzit.domain.Student;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.processors.JsonValueProcessor;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

public class UseJsonLibConvertJsonAndJavaObjectServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Employee emp = new Employee();
        emp.setBirth(new Date());
        emp.setEntryDate(new Date());
        emp.setId(UUID.randomUUID().toString());
        emp.setName("Lily");
        emp.setPhone("123456");
        emp.setSex("Female");

        JsonConfig jsCof = new JsonConfig();
        jsCof.registerJsonValueProcessor(Date.class,new JsonValueProcessor(){

            @Override
            public Object processArrayValue(Object o, JsonConfig jsonConfig) {
                System.out.println("转换数组中的日期对象");
                return new SimpleDateFormat("yyyy/MM/dd").format(o);
            }

            @Override
            public Object processObjectValue(String s, Object o, JsonConfig jsonConfig) {
                System.out.println("转日期对象");
                return new SimpleDateFormat("yyyy/MM/dd").format(o);
            }
        });

        String json = JSONObject.fromObject(emp, jsCof).toString();
        System.out.println("java对象转化为json格式的字符串:\n"+json);

        /*Student student = new Student();
        student.setName("Lily");
        List list = new ArrayList<>();
        list.add(new Date()); list.add(new Date()); list.add(new Date());
        student.setDateList(list);
        String json = JSONObject.fromObject(student, jsCof).toString();
        System.out.println("java对象转化为json格式的字符串:\n"+json);*/

        /*转换数组(集合)*/
        //String json = JSONArray.fromObject(DataBase.getEmpList(),jsCof).toString();
        //System.out.println(json);

    }
}

此组件包提供强大的功能,不仅可以转换java对象到JSON格式,也可以从JSON格式的字符串转化为Java对象

package com.xzit.servlet;

import com.xzit.domain.Employee;
import net.sf.json.JSONObject;

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;


public class FromJsonToJavaObjectUseJsonLibServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String jsonStr = req.getParameter("emp");
        /*将客户端异步提交的json串简单转换成JSONObject*/
        JSONObject jsonObject = JSONObject.fromObject(jsonStr);
        System.out.println(jsonObject.get("id"));
        System.out.println(jsonObject.get("name"));
        System.out.println(jsonObject.get("birth"));

        /*进一步转换为期待的目标实体bean(Employee)*/
        Employee employee = (Employee) JSONObject.toBean(jsonObject, Employee.class);
        System.out.println(employee.getName()+ " "+ employee.getBirth().toString()+ " ");
        resp.getWriter().println("OK");
    }
}

3.2 gson-1.6.jar JSON转换工具

gson-1.6.jar是google提供的对JSON字符串与Java对象之间数据格式转换格式的库,使用此库中的相关方法能够简单实现java对象与JSON的转换

数据转换示例:

package com.xzit.servlet;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.xzit.domain.Employee;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Date;
import java.util.List;

public class UseGoogleGsonLibServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        GsonBuilder gsonBuilder = new GsonBuilder();
        Gson gson = gsonBuilder.setDateFormat("yyyy-MM-dd").create();

        /*Employee employee = new Employee();
        employee.setBirth(new Date());
        employee.setEntryDate(new Date());
        employee.setId("code1");
        employee.setName("Alisa");
        employee.setPhone("18999999");
        employee.setSex("female");

        System.out.println(gson.toJson(employee));*/

        /*从json字符串转化为java对象*/
        String jsonStr = req.getParameter("empList");
        /*从json数组转换为java对象*/
        //List employeeList = gson.fromJson(jsonStr,new TypeToken>(){}.getType());

       /* for (Employee employee:employeeList){
            System.out.println(employee.getName()+"\t"+employee.getBirth().toString());
        }*/

       /*转换一个非数组的json字符串到Emplpoyee对象*/
        Employee empObj = gson.fromJson(jsonStr,Employee.class);
        System.out.println(empObj.getName()+"\t"+empObj.getBirth().toString());

    }
}

4. jQuery如何处理JSON格式数据

方法1:

4.1 jQuery处理JSON格式的数据

方法2:

4.2 jQuery处理JSON数据

使用JSON提供的json2.js JavaScript库可以实现对象到JSON的转换和JSON到对象的转换

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


    Title
    
    jQuery 实现Ajax请求处理
    
    
    



    

5. jQuery.get(url, [data], [callback], [type])函数

5.1 jQuery.get()函数

6. jQuery.post(url, [data], [callback], [type])函数

6.1 jQuery.post()函数

代码示例:

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


    Title
    
    jQuery 实现Ajax请求处理
    
    
    



    
姓名:
性别:
生日
入职日期
电话

7. serialize()函数

序列化函数,实现表单序列化


7.1 serialize()函数

你可能感兴趣的:(day6 - jquery Ajax异步请求处理)