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发送异步请求的方法,如: . a j a x ( ) 、 .ajax()、 .ajax().(get)、 . p o s t ( ) 、 .post()、 .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()的使用

    . g e t ( ) 方法是 .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()的使用

    . p o s t ( ) 方法是 .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()的使用

    . g e t J S O N ( ) 方法是 .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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值