【精选】Ajax技术知识点合集

本文介绍: Aja x 即“Async hronous Jav a script And XML”（异步 Jav aSc rip t 和 XML），是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。通过在后台与服务器进行少量数据交换，Aja x 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

在这里插入图片描述

Aja x 即“Asyn c hronous Jav a script And XML”（异步 JavaScrip t 和 XML），是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

在这里插入图片描述

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

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

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

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

xhr.send()

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

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

Async=true

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

Async = false

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

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

var xhr = new XMLHttpRequest();


xhr.open("GET", "http://localhost:8080/xmlTest.xml", true);
xhr.send();


xhr.onreadystatechange = function(){
if (xhr.readyState === 4 &amp;&amp; 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;
  }
}

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

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

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;
   }
}

}

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;
   }
}

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

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

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)])

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

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

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

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

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

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

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

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

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

$.get(url,function(result))

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

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

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

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

$.post(url,function(result))

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

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

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

$.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()方法的使用

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

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Ajax技术详解

Ajax简介

Ajax 的使用

Ajax请求

Ajax同步或异步

Ajax服务器响应

JSON详解

JACKSON 的使用

序列化

把Java对象转成Json

反序列化

把Json转成Java对象

常用注解

Jquery 的 Ajax 使用

发表回复取消回复