Ajax基本使用

Ajax

作用：

后台与服务器进行少量数据交换，实现异步更新

使用步骤：

创建XMLHttpRequest对象：var xhr = new XMLHttpRequest();

给定请求方式与请求地址：xhr.open(“get”,“www.example.com”);

发送请求：xhr.send();

获取服务器端给客户端的响应数据：

• xhr.onreadystatechange = function(
• //0:open()没有被调用//1:open()正在被调用
• //2:send()正在被调用//3:服务端正在返回结果
• //4:请求结束，并且服务端已经结束发送数据到客户端
• if(xhr.readyState == 4 && xhr.status == 200){
• document.getElementById(“span”).innerHTML=xhr.responseText;
• alert(xhr.responseText);}

服务器端设置响应

JSON

基于字符串的轻量级数据交换格式，易于人阅读和编写

数据类型：

• string：字符串，必须要用双引号引起来。
• number：数值，与 JavaScript 的 number 一致
• object：JavaScript 的对象形式，{ key:value }表示方式，可嵌套
• array：数组，JavaScript 的 Array 表示方式[ value ]，可嵌套。
• true/false：布尔类型，JavaScript 的 boolean 类型。
• null：空值，JavaScript 的 null。

Jackson

• 解析json格式的AIP

• 在响应中通过json格式传递字符串

  • 添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar

  • 通过 jackson API 将 Java 对象转换 JSON 格式

  • 修改响应头，响应类型为 application/json

  • 将结果基于字符输出流推回客户端浏览器

  • 在页面的中通过 JavaScript 的 JSON.parse()函数将 JSON 格式的数据转换为 JavaScript对象

• 前后台请求发送与接收JSON数据

  • 前台发送JSON数据

    • 获取前台数据到函数获取前台数据到函数：document.getElementById（）.value

    • 定义js对象（与要封装的对象参数名一致）：obj = {username:name,userid:id}

    • 转换为JSON格式： JSON.stringify(obj)

    • 基于post方式提交数据

  • 后台接收JSON数据

    • 通过字符输入流从请求体中获取提交的JSON格式的数据req.getReader().readLine();
    • 使用Jackson将JSON格式的数据转换为java对象

• jackson常用注解

  • @JsonProperty

    • 此注解用于属性上，作用是把该属性的名称序列化为另外一个名称，如把 username 属性序列化为 name，@JsonProperty(“name”)。

  • @JsonIgore

    • 此注解用于属性或者方法上（一般都是定义在属性上），用来完全忽略被注解的字段和方法对应的属性，返回的 json 数据即不包含该属性。

  • @JsonFormat

    • 此注解用于属性或者方法上（一般都是定义在属性上），可以方便的把 Date 类型属性10的值直接转化为我们想要的样式。如：@JsonFormat(pattern=“yyyy-MM-dd hh:mm:ss”)

jquery中Ajax的使用

$.ajax()在异步请求中提交数据

• 提交普通格式数据

  • 基于JavaScript提交数据
  • 获取前台数据：$("#username").var();
  • 使用$.ajax({type,url,data,success:function(result)})发送请求数据，并将返回值在页面输出
  • 后台通过 request.getParameter 方法获取请求参数

• 提交 JSON 格式数据

  • 在$.ajax()中提交 JSON 格式的数据需要使用 post 方式提交

  • 通过 JSON.stringify()函数将JavaScript 对象转换成 JSON 格式的字符串

  • 在 Servlet 中通过字符输入获取提交的 JSON 格式的数据。

• $.ajax()处理响应中的 JSON 格式数据

  • $.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。

$.get()的使用

• （$.get()方法是$.ajax()方法基于 get 方式发送异步请求的简化版。）

• 语法结构

  • $.get(url,function(result)
  • $.get(url,data,function(result))

• 通过标准格式指定提交数据

  • $.get(url,”name=value&name=value”,function(result))

• 通过 JavaScript 对象指定提交数据

  • $.get(url,{userid:1,username:”oldlu”,…},function(result))

$.post()的使用

• （$.post()方法是$.ajax()方法基于 post 方式发送异步请求的简化版。）

• 语法结构

  • $.post(url,function(result))
  • $.post(url,data,function(result))

• 通过标准格式指定提交数据

  • $.post(url,”name=value&name=value”,function(result))

• 通过 JavaScript 对象指定提交数据

  • $.post(url,{userid:1,username:”oldlu”,…},function(result))

$.getJSON()的使用

• （$.getJSON()方法是$.ajax()方法基于 get 方式发送异步请求，并将响应结果中 JSON 格式的字符串对象自动转换为 JavaScript 对象。）在使用该方法时要求返回的数据必须是 JSON 格式类型。$.getJSON()方法和 resp.setContentType(“application/json”)是一起使用的。

• 语法结构

  • $.getJSON(url,function(result))
  • $.getJSON(url,data,function(result))

• 通过标准格式指定提交数据

  • $.getJSON(url,”name=value&name=value”,function(result))
  • 要求返回的数据格式必须是 JSON 格式。

• 通过 JavaScript 对象指定提交数据

  • $.getJSON(url,{userid:1,username:”oldlu”,…},function(result))
  • 要求返回的数据格式必须是 JSON 格式。

serialize()方法的使用

• 将 form 表单中的数据自动拼接成 name=value&name=value 结构。

  • 语法结构

    • var param = $(“form”).serialize();

    • param 的值为：name=value&name=value