Ajax篇

Ajax篇

​ Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式，快速动态应用网页开发技术，无序重新加载整个网页的情况下，能够更新页面局部数据的技术，通过在后台与服务器进行少量数据交换，Ajax可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分数据进行更新

Ajax使用

• Ajax的运行原理

• XMLHttpResquest对象

  XMLHttpRequest是浏览器接口对象，该对象的API可被JavaScript、VBScript以及其他web浏览器内嵌的脚本语言调用，通过HTTP协议在浏览器和web服务器之间收发XML或者其他数据。XMLHttpRequest可以与服务器实现异步交互，而无需让整个页面刷新，因此成为Ajax编程的核心对象

• Ajax的使用步骤

  创建XMLHttpRequest对象

  var xhr = new XMLHttpRequest();
  

  给定请求方式以及请求地址

  xhr.open("get","http://www.baidu.com");
  

  发送请求

  xhr.send();
  

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

  xhr.onreadystatechange = function(){
     //0:请求未初始化
     //1:服务器连接已建立
     //2:请求已接收
     //3:请求处理中
     //4:请求已完成，且响应已就绪
     if(xhr.readyState == 4 && xhr.status ==200){
         document.getElementById("span").innerHTML=xhr.responseText;
         alert(xhr.responseText);
    }
  }
  

Ajax请求

请求步骤：

如图中所示，XMLHttpRequest对象起重要的作用

1. 用户从UI发送数据，JavaScript中调用XMLHttpRequest对象
2. HTTP请求由XMLHttpRequest对象发送到服务器端
3. 服务器使用JSP、PHP、Servlet、ASP.net等与数据交互。
4. 检索数据
5. 服务器将XML数据或者JSON数据发送到XMLHttpRequest回调函数
6. HTML和CSS数据显示在浏览器上

方法	描述
open(method,url,async)	规定请求的类型、URL以及是否异步化处理请求。method：请求的类型；get或者postTurl:文件在服务器上的位置async：true（异步）或者false（同步）、
send(string)	将请求发送到服务器，string：仅用于post请求

get/post请求

get和post请求是http协议中的两种请求方式

• get请求一般用来获取请求数据，post请求一般作为发送数据到后台，传递数据，创建数据；
• get请求也可以传参到后台，但是传递的参数显示在地址栏中，安全性较低，且参数的长度也有限制 ，post请求则是将传递的参数requeat body中，不会在地址栏显示，安全性比get要高，参数没有长度限制；
• get请求刷新浏览器或者回退没有影响，post请求则会再请求一遍；
• get请求可以被缓存，也会被保留在浏览器的历史记录中，post不会被缓存也不会保留在浏览器的历史记录中
• get请求通常是通过url地址请求，post常见的则是form表单请求

get请求示例

xhr.open("GET",
"http://localhost:8080/get.txt?t=" +
Math.random(), true);
xhr.open("GET",
"http://localhost:8080/get.txt?
fname=zhang&lname=san", true);

post请求示例

xhr.open("POST",
"http://localhost:8080/post.txt", true);
xhr.setRequestHeader("Contenttype","application/x-www-form-urlencoded");
xhr.send("fname=zhang&lname=san");

同步或者异步

Async=true

当使用async-true时候规定在响应处于onreadystatechange事件中的就绪状态的时执行函数

xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status ===
200) {
     
document.getElementById("view").innerHTML =
xhr.responseText;
 	}                
}
xmlhttp.open("GET","get.txt",true);
xmlhttp.send();

Async = flase

不推荐使用async=flase，但是对一些小型的要求，是可以使用的，JavaScript会等到我服务器响应就绪后才继续执行，如果服务器频繁或者缓慢，应用程序会挂起或者停止

xmlhttp.open("GET","get.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Ajax服务器响应

状态码，如200、304、 404

响应主体

xhr.responseText与xhr.responseXML都表示响应主体

如果需要获得来自服务器的响应，要使用XMLHttpRequest对象的resqonesText或者responseXML属性

属性	描述
responseText	获得字符串形式的响应数据
resonseXML	获得XML形式的相应数据

var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:8080/xmlTest.xml", true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status ===200) {
 //解析返回的xml文件
    xmlDoc = xhr.responseXML;
    txt = "";
    x =xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++) {
   txt = txt +x[i].childNodes[0].nodeValue + "<br>";
   }
  
document.getElementById("view").innerHTML =txt;
 }
}

JSON详解

JSON（JavaScript Object Notation）是一种基于字符串的轻量级，数据交换格式，易阅读和编写，同时也便于及其的解析和生成。JSON是JavaScript类型的子集

在JSON未出现之前Ajax中数据传输的方式，会使用XML作为主要的数据来传输，直到JSON出现后逐渐放弃使用XML作为数据传输格式。JSON比XML更小，更快，更容易解析

JSON是按照特定的语法规则所产生的的字符串结构

大括号表示JSON的字符串对象。{}

属性和属性值用冒号分隔。{“属性”:“value”}

属性和属性值之间用冒号分割。{“属性”:“value”,“属性”:“value”,…}

中括号表示数组。[{“属性”:“value”…},{“属性”:“value”…}]

JSON字符串对象：

 {"userid":1,"username":"admin","sex":"male"}

数组

 [{"userid":1,"username":"admin"},
{"userid":2,"username":"zhangsan"}]

JSON的数组类型

string:字符串，必须要用双引号引起来。

number：数值，与JavaScript的number一致

object：JavaScript的对象形式，{key:value}表示方式，可嵌套

array：数组，JavaScript的Array表示方式[value],可嵌套。

true/false：布尔类型，JavaScript的boolean类型。

null：空值，JavaScript的null。

JACKSON的使用

在JDK中并没有内置操作JSON格式数据的API，因此使用处理JSON格式的数据需要借助第三方类型。几个常见的JSON解析类库：

Gson:谷歌开发的JSON解析类库，功能十分全面。

FantJson:阿里巴巴开发的JSON库，性能十分优秀。

Jackson：社区十分活跃，且更新很快。被称为“最好的JSON解析器”

• Jackosn简介

  jackson是一种解析JSON数据API，也是最流行，速度最快JSON API，最新版本是2.13.3，有三个jar包需要下载：

  jackson-core-2.13.3.jar（核心jar包）

  jackson-annotations-2.13.3.jar（提供Json注解支持）

  jackson-databind-2.13.3.jar（数据绑定，依赖于前两个包）

• 在项目中引入Jacson

• 序列化

  使用Jacson把java对象转换成Json数据。首先创建TestBean.java

  public class TestBean {
      //id
     private String id;
  	//姓名
     private String name;
     //嵌套对象
     private List<Element> elements;
  
     public String getId() {
         return id;
     }
  
     public void setId(String id) {
         this.id = id;
    }
  
     public String getName() {
         return name;
    }
  
     public void setName(String name) {
         this.name = name;
    }
  
     public Elements getElements() {
         return elements;
    }
  
     public void setElements(Elements
  elements) {
         this.elements = elements;
    }
  }
  

  再创建Element.java

   public class Element {
   //年龄
     private Integer age;
  //呢称
     private String ename;
  
     public Integer getAge() {
        return age;
    }
  
     public void setAge(Integer age) {
         this.age = age;
    }
  
     public String getEname() {
         return ename;
    }
     public void setEname(String ename) {
         this.ename = ename;
    }
  }
  

  把Java对象转成Json

  Element element = new Element();
  element.setAge(23);
  element.setEName("itbaizhan");
  ObjectMapper objectMapper = new
  ObjectMapper();
  String elementStr =objectMapper.writeValueAsString(element);
  System.out.println(elementStr);
  

  输出结果如下

  {"age":23,"elName":"itbaizhan"}
  

• 反序列化

  String str = "
  {\"id\":1,\"name\":\"zhangsan\",\"elements
  \":[{\"age\":22,\"elName\":\"xiaozhang\"},
  {\"age\":26,\"elName\":\"xiaosan\"}]}";
  ObjectMapper objectMapper = new
  ObjectMapper();
  TestBean testBean =objectMapper.readValue(str,TestBean.class);
  System.out.println(testBean.toString());
  

  输出结果如下：

  TestBean(id=1, name=haha, elements=
  [Element(age=22, elName=xiaozhang),
  Element(age=26, elName=xiaosan)])
  

• 常用注解

  将这个注解加载到类上，不存在字段被忽略

  @JsonIgnoreProperties(ignoreUnknown = true)
  

  指定忽略字段

  @JsonIgnoreProperties({ “password”,“secretKey” })
  

  标在注解上，将忽略此字段

  @JsonIgnore
  

  标在时间字段上使用指定规则格式化（默认转化成时间戳）

  @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
  

  是否参与序列化

  @JsonInclude(参数)
  

  JsonInclude.Include.NON_EMPTY：属性为空或者null都不参与

  序列化 JsonInclude.Include.NON_NULL：属性为null不参与序

  列化

  标在字段上，指定序列化后的字段名

   @JsonProperty("firstName")
  

  自定义某些类型字段的序列化与反序列化规则

   @JsonDeserialize(using= T extendsJsonDeserializer.class)
   @JsonSerialize(using= T extendsJsonSerializer.class)
  

jQuery的 Ajaxde使用

在jQuery中提供了Ajax的封装，在使用Ajax技术时变得更加容易，在jQuery中提供了很多基于Ajax发送异步请求的方法，如：$.ajax()、$.(get)、$.post()、$.getJSON()

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

  在$.ajax()方法中通过data属性来存放提交的数据，支持JSON格式的数据

  提交的普通格式数据在data属性中我们可以通过两种方式来指定需要提交的数据，一种是通过name = value&name = value的结构，另一种是通过JavaScript对象来指定提交数据，无论使用那种方式在Servlet中都是通过request.getParameter方法根据name获取value的

  通过JavaScript对象指定提交数据

  data:{
     userid:100,
     username:"zhangsan"
  }
  

  提交JSON格式数据

  在$.ajax()中提交JSON格式的数据需要使用post方式提交，通过JSON.stringify()函数将JavaScript对象转换成JSON格式的字符串。在Servlet中通过字符输入获取提交的JSON格式的数据

   data:JSON.stringify({name:value,name:value...})
  

  在Servlet中通过req.getReader().readLine（）来获取提交的数据

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

  $.ajax()方法会根据dataType属性中的值自动对响应的数据做类型处理，如果响应的是一个JSON格式的数据，那么dataType的值为"JSON"，在回调函数中得到的直接就是JSON字符串转换完的JavaScript对象，不需要再使用JSON.parse()格式的转换处理

• $.get()的使用

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

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

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

  $.get(url,{userid:1,username:"zhangsan",...},function(result))
  

• $.post()的使用

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

  $.post(url,function(result))

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

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

  $.post(url,{userid:1,username:"zhangsan",...},function(result))
  

• $.getJSON()的使用

  $.getJSON()方法是$.ajax()方法基于get方式发送异步请求，并将响

  应结果中JSON格式的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返回的数据必须是 JSON 格式类型。$.getJSON()方法和resp.setContentType(“application/json”)是一起使用的。

  $.getJSON(url,function(result))

   $.getJSON(url,"name=value&name=value",function(result))
  

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

  $.getJSON(url,{userid:1,username:"zhangsan",...},function(result))
  

  serialize()方法的使用

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

  构。

  var param = $("form").serialize();
  

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