AJAX

来源：互联网发布：mysql insert 中文编辑：程序博客网时间：2024/05/29 17:35

1.Ajax简介

全称：Asynchronous JavaScript And Xml，翻译过来叫异步的JavaScript和Xml
JavaScript负责发送请求；Xml作为一种响应数据
Ajax就是用来增强用户体验

2.同步与异步

同步请求
- 当我们向服务器发送请求时，必须等到响应成功之后才能发送其他请求，有一个等待的过程，而且响应成功之后要刷新整个页面
异步请求
- 当我们向服务器发送请求时，不需等到响应成功就可以发送其他的请求，不需要等待，而且响应成功之后局部刷新页面

3.通过JavaScript发送Ajax请求

1）创建XMLHttpRequest对象
- Ajax的一切操作都由该对象完成

//1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2）设置请求信息

//2.设置请求信息

method参数：用来设置请求方式，GET或POST

url参数：用来设置请求地址

async参数：用来设置该请求是一个异步请求还是同步请求，默认是true，是一个异步请求，一般不改

username, password参数：用来设置用户名和密码，如果发送一个带权限的请求，需要设置这两个值

xhr.open("GET", "${pageContext.request.contextPath}/AjaxServlet");

3）发送请求
- GET请求

//3.发送请求

//send()方法中需要传入一个Object类型的请求体，GET请求没有请求体，所有可以不传

xhr.send();

POST请求

//3.发送请求

//通过Ajax发送POST请求时，在发送请求之前需要设置请求头对请求体中的数据进行URL编码

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("username=admin&password=123456");

4）接收响应
- 响应数据为字符串

//4.接收响应

//给readState绑定一个onreadystatechange事件

xhr.onreadystatechange = function(){

//当请求已完成，且响应已就绪即readState的值为4时并且status为200时才接收响应数据

if(xhr.readyState == 4 && xhr.status == 200){

//获取响应数据

var resText = xhr.responseText;

//获取显示响应数据的span元素

var spanEle = document.getElementById("msg");

//将响应数据设置到span元素中

spanEle.innerHTML = resText;

}

};

响应数据为xml

//4.接收响应

//给readState绑定一个onreadystatechange事件

xhr.onreadystatechange = function(){

//当请求已完成，且响应已就绪即readState的值为4时并且status为200时(ok)才接收响应数据

if(xhr.readyState == 4 && xhr.status == 200){

//获取Document对象

var docEle = xhr.responseXML;

//获取name元素节点

var nameEle = docEle.getElementsByTagName("name")[0];

//获取name元素节点的第一个子节点

var textNode = nameEle.firstChild;

//获取文本节点的节点值

var text = textNode.nodeValue;

//获取name元素节点中的文本值

// var text = nameEle.innerHTML; 此方法IE浏览器不兼容

// alert(text);

//获取显示响应数据的span元素

var spanEle = document.getElementById("msg2");

//将响应数据设置到span元素中

spanEle.innerHTML = text;

}

};

4.JSON

全称：JavaScript Object Notation，翻译过来叫JavaScript的对象表示法，是一种轻量级的数据交换格式
JSON是一种跨平台、跨语言的数据交换格式
XML的响应数据解析起来复杂、性能差，所以现在基本已经被JSON所替代
XML格式的数据

</student>

JSON格式的数据

{"name":"陈大伟","age":18}

JSON格式
- JSON对象
  - {"属性名1":属性值1,"属性名2":属性值2,"属性名3:属性值3"}
    - 属性名必须使用双引号括起来；属性名与属性值之间使用冒号分隔；多个属性之间使用逗号分隔
- JSON数组
  - [属性值1,属性值2,属性值3]
    - 多个属性值之间使用逗号分隔
- JSON格式中的属性值能接受的数据类型
  - 字符串
  - 数字
  - null
  - 布尔
  - 数组
  - 对象
对象与JSON字符串之间的转换
- 在JS中

//创建一个JSON对象

var jsonObj = {"name":"小伟","age":18};

// alert(jsonObj); 输出的是object object

//创建一个JSON数组

var jsonArray = ["杨威",true,666,jsonObj];

//获取18

// alert(jsonArray[3].age); 输出的是18 (此处是获取Json中属性的方法)

//创建一个稍微复杂的JSON对象

var fzJsonObj = {"name":"唐僧",

"age":500,

"son":[

{"name":"孙悟空","age":600},

{"name":"猪刚鬣","age":888,"wives":[

{"name":"嫦娥","age":99999},

{"name":"高翠兰","age":16},

{"name":"黎山老母","age":888888}

]},

{"name":"沙和尚","age":999},

{"name":"白龙马","age":18800}

]

};

//获取黎山老母的年龄

// alert(fzJsonObj.son[1].wives[2].age);

//创建一个JSON格式的字符串

var jsonStr = '{"name":"鞠伟","age":16}';

// alert(jsonStr); 输出的是 {"name":"鞠伟","age":16}

//将JSON格式的字符串转换为JSON对象

var jsonStrToObj = JSON.parse(jsonStr);

// alert(jsonStrToObj);

//将JSON对象转换为JSON字符串

var jsonObjToStr = JSON.stringify(jsonObj);

// alert(jsonObjToStr);

在Java中

@Test

public void testObjToJSON() {

//创建Student对象

Student student = new Student(1, "陈大伟", 18);

//创建Gson对象 (需要gson jar包)

Gson gson = new Gson();

//将对象转换为JSON字符串

String jsonString = gson.toJson(student);

System.out.println(json);

输出结果类似为 {"id":1,"name":"西施"}

所以当jsp界面获取到json对象时,就可以按照与JSON字符串相应的JSON对象获取属性

//响应设置url编码,否则中文出现乱码(详见04 servlet中乱码问题)

response.setContentType("text/html;charset=UTF-8");

//将Json字符串响应给浏览器

response.getWriter().write(jsonString );

write() 只能输出字符串因为jsp页面需接收的是Json字符串,是所以用这个

print() 可以输出对象

//将JSON字符串转换对象

Student fromJson = gson.fromJson(jsonString, Student.class);

System.out.println(fromJson);

}

@Test

public void testListToJSON(){

//创建一个List<Student>

List<Student> list = new ArrayList<>();

list.add(new Student(1, "刘备", 55));

list.add(new Student(2, "诸葛亮", 44));

list.add(new Student(3, "关羽", 33));

list.add(new Student(4, "张飞", 22));

//创建Gson对象

Gson gson = new Gson();

//将List转换为JSON字符串

String json = gson.toJson(list);

System.out.println(json);

//输出类似为

[{"id":1,"name":"刘备"},{"id":2,"name":"诸葛亮"},{"id":3,"name":"关羽"},{"id":4,"name":"张飞"}]

//将JSON字符串转换为List

List fromJson = gson.fromJson(json, List.class);

System.out.println(fromJson);

}

@Test

public void testMapToJSON(){

//创建一个Map

Map<String , Student> map = new HashMap<>();

map.put("stu01", new Student(1, "西施", 16));

map.put("stu02", new Student(2, "貂蝉", 16));

map.put("stu03", new Student(3, "杨玉环", 16));

map.put("stu04", new Student(4, "王昭君", 16));

//创建Gson

Gson gson = new Gson();

//将Map转换为JSON字符串

String json = gson.toJson(map);

System.out.println(json);

//输出类似为

{"stu04":{"id":4,"name":"王昭君"},"stu03":{"id":3,"name":"杨玉环"},"stu02":{"id":2,"name":"貂蝉"},"stu01":{"id":1,"name":"西施"}}

}

5.通过jQuery发送Ajax请求

通过$.ajax()发送Ajax请求

//通过jQuery发送Ajax请求（响应数据为字符串/JSON）

url：用来设置请求地址，如果没有指定请求方式，默认发送的是一个GET请求

type：用来指定请求的方式，GET或POST

data: 用来传参数

dataType：用来指定响应数据的类型，默认是text，即获取json字符串，json时为获取获取json对象

success：指定一个回调函数，响应成功之后系统会调用该函数，并且响应信息会以参数的形式传入到该函数中(res上)

error：指定一个当出现异常时要调用的函数

$.ajax({

url:"${pageContext.request.contextPath }/JQueryServlet",

type:"GET",

data:{"username":"admin","password":123456},

dataType:"json", //获取获取json对象

success:function(res){

//弹出响应信息

// alert(res);

//获取显示响应信息的span元素

var $spanEle = $("#msg");

//将响应信息设置到span元素中

$spanEle.text(res.name);

error:function(){

alert("出现异常了！");

}

});

通过$.get()或者$.post()发送Ajax请求

//通过$.get()方法发送GET请求

$.get()和$.post()方法中的参数：

url：必须的。用来设置请求地址

data：可选。用来设置请求参数

callback：可选。设置一个回调函数(相当于success)，响应成功之后系统会调用该函数，并且响应信息会以参数的形式传入到该函数中

dataType：可选。指定响应数据类型，默认是text

//声明URL

var url = "${pageContext.request.contextPath }/JQueryServlet";

//设置要发送的请求参数

var param = {"username":"admin","password":123456};

// //声明一个回调函数

// var fun = function(res){

// alert(res);

// };

// //声明响应数据的类型

// var datatype = "json";

// $.get(url,param,fun, datatype);

//我习惯通过以下的方式来发送Ajax请求

$.get(url,param,function(res){

alert(res);

},"json");

});

通过$.getJSON()发送Ajax请求
- 通过该方法发送的也是一个GET请求，只是默认接收的响应数据为JSON格式

阅读全文

0 0