今天带大家来一起学习ajax
一、AJAX的概述
同步和异步的区别：
在xx.jsp页面中，我们给form表单的action直接将数据提交到servlet中
<form action="${ pageContext.request.contextPath }/xxxServlet" method="post">
。。。。
</form>
在xxxServlet中，直接进行数据接收或者处理
String name = request.getParameter("name");
String pass = request.getParameter("pass");
- 1. 在xx.jsp页面中，我们给某个元素直接绑定js事件，进行数据的交互
<input id="bt1" type="button" value="AJAX的GET请求"/>
- 2. 在js上，我们直接作出一些列操作过后，通过.open("GET","/day19/xxServlet?name=aaa&pass=123",true);将数据传递给xxServlet
function xx() {
// 1.创建异步对象
var xhr = createXMLHttp();
// 2.设置状态改变的监听 回调函数.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ // 请求发送成功
if(xhr.status == 200){ // 响应也成功
// 获得响应的数据:
var data = xhr.responseText;
// 将数据写入到DIV中:
document.getElementById("d1").innerHTML = data;
}
}
}
// 3.设置请求路径
xhr.open("GET","/day19/xxServlet?name=aaa&pass=123",true);
// 4.发送请求
xhr.send(null);
}
- 3. 在xxServlet中，根据.open的get或者post方法，接收从js中传递的数据并处理
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String pass = request.getParameter("pass");
}
异步的 JavaScript And XML
AJAX的功能:完成页面的局部刷新,不中断用户的体验
* XML:使用XML做为数据传递的格式: JSON:
二、API
XMLHttpRequest对象
onreadystatechange : 指定当readyState属性改变时的事件处理句柄。只写
readyState : 返回当前请求的状态，只读.
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
responseBody : 将回应信息正文以unsigned byte数组形式返回.只读
responseStream : 以Ado Stream对象的形式返回响应信息。只读
responseText :将响应信息作为字符串返回.只读
返回的是字符串或者页面都可以使用这个属性
responseXML:将响应信息格式化为Xml Document对象并返回，只读
status : 返回当前请求的http状态码.只读
200,404等等
statusText : 返回当前请求的响应行状态，只读
abort( ) ;取消当前请求
getAllResponseHeaders( ) ; 获取响应的所有http头
getResponseHeader() ; 从响应信息中获取指定的http头
open( ); 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
open("请求方式","路径",true);
send ( ) ;发送请求到http服务器并接收回应
setRequestHeader ( ); 单独指定请求的某个http头
function createXmlHttp(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
三、AJAX的入门
* 第一步：创建一个异步对象.
* 第二步：设置对象状态改变触发一个函数.
* 第三步：设置向后台提交的路径
* 第四步：发送请求.
function ajax_get() {
// 1.创建异步对象
var xhr = createXMLHttp();
// 2.设置状态改变的监听 回调函数.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ // 请求发送成功
if(xhr.status == 200){ // 响应也成功
// 获得响应的数据:
var data = xhr.responseText;
// 将数据写入到DIV中:
document.getElementById("d1").innerHTML = data;
}
}
}
// 3.设置请求路径
xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
// 4.发送请求
xhr.send(null);
}
function ajax_post(){
// 创建异步对象:
var xhr = createXMLHttp();
// 设置监听:
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("d1").innerHTML = xhr.responseText;
}
}
}
// 打开路径:
xhr.open("POST","/day15/ServletDemo1",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 发送请求:
xhr.send("name=张三&pass=123");
}
四、JQuery实现异步请求
方法：
Jq的对象.load(路径,参数,回调函数);
load(url, [data], [callback])
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。
$.ajax();
$.get(路径,参数,回调函数,数据类型);
$.post(路径,参数,回调函数,数据类型);
serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.
五、AJAX响应数据格式：
【使用工具生成XML的文件】
通常使用xStream工具. 将集合,数组,对象转成XML.
简介：
另外，Xstream是一种OXMapping 技术，是用来处理XML文件序列化的框架,在将javaBean序列化，或将XML文件反序列化的时候，不需要其它辅助类和映射文件，使得XML序列化不再繁琐。
核心jar包：
xpp3_min-1.1.4c.jar
xstream-1.4.4.jar
核心对象：
XStream xStream = new XStream();
主要方法：
//将list集合转成xml
String xmlStr = xStream.toXML(list);
结果：
<com.itheima.domain.City>
<cid>12</cid>
<cname>贵阳市</cname>
<pid>2</pid>
</com.itheima.domain.City>
<com.itheima.domain.City>
<cid>13</cid>
<cname>六盘水市</cname>
<pid>2</pid>
</com.itheima.domain.City>
// 修改标签名:将City.class的全路径改为city.
xStream.alias("city", City.class);
结果：
<city>
<cid>13</cid>
<cname>六盘水市</cname>
<pid>2</pid>
</city>
<city>
<cid>14</cid>
<cname>遵义市</cname>
<pid>2</pid>
</city>
// 将类中属性作为 标签的属性：
xStream.useAttributeFor(City.class, "cid");
xStream.useAttributeFor(City.class,"cname");
xStream.useAttributeFor(City.class,"pid");
结果：
<city cid="13" cname="六盘水市" pid="2" />
<city cid="14" cname="遵义市" pid="2" />
定义
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSON的数据格式的介绍:
JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：
一个值：
{“id”:1,”name”:aaa}
多个值：
[{“id”:1,”name”:aaa},{“id”:2,”name”:bbb}]
JSON的生成工具
JSONLIB 转换JSON数据:
* JSONArray :将数组或List集合转成JSON.
* JSONObject:将对象或Map集合转成JSON.
JSON 语法规则
在 JS 语言中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：
*对象表示为键值对
*数据由逗号分隔
*花括号保存对象
*方括号保存数组
JSON 与 JS 对象的关系
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串
JSON 和 JS 对象互转
要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'});
//结果是 '{"a": "Hello", "b": "World"}'
要实现从 JSON 转换为对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}
|
|
收藏
淘帖
踩
