Ajax基本概念和原理
1.什么是AJAX?
AJAX是一种无需重新加载整个网页的情况下,能够与更新部分网页技术
·AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术
·不是一种新技术是如下几种技术的组合应用
HTML/XHTML——主要的内容表示语言。
CSS——为XHTML提供文本格式定义。
DOM——对已载入的页面进行动态更新。
XML——数据交换格式。
XSLT——将XML转换为XHTML（用CSS修饰样式）。
XMLHttp——用XMLHttpRequest来和服务器进行异步通信，是主要的通信代理。
JavaScript--用来编写Ajax引擎的脚本语言
<1>.为什么需要AJAX
有时候需要将本次的响应结果和前面的响应结果内容在同一个页面展现给用户
解决: 1.在后台服务器端将多次响应的内容重新拼接成一个jsp页面响应(单是这样的话会造成很多内容会被重复的响应)
2.使用AJAX技术
<2>.AJAX访问原理
2.XMLHttpRequest对象
当需要异步与服务器交换数据时,需要XMLHttpRequest对象来异步交换。XMLHttpRequset对象的主要属性有:
·onreadystatechange--每次状态改变所触发事件的事件处理程序
·responeText--从服务器进程返回数据的字符串形式
·responeXML--从服务器进程返回的Dom兼容的文档数据对象
·status--从服务器返回的数字代码如404(未找到)和200(已就绪)
·status Text--伴随状态码的字符串信息
·readyState--对象状态值。对象的状态值有以下几个
·0-(未初始化)还没有调用send()方法
·1-(载入)已调用send()方法,正在发送请求
·2-(载入完成)send()方法执行完成
·3-(交互)正在响应内容解析完成,可以在客户端调用了
注意:对于readyState的状态值,其中"0"状态是在定义后自动具有的状态值,而对于成功访问的状态(得到信息)我们大多数采用"4"进行判断
AJAX的核心就是JavaScript对象XmlHttpRequest,这个对象为向务器发送和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求处理响应,而不阻塞用户
XHR对象由IE5率先引入,在IE5中XHR对象是通过MSXML库中一个ActuiveX对象实现的,根据I版本不同可能会遇到不同XHR对象,而IE7+与其他现代浏览器均支持原生的XHR对象在这些浏览器中我们只需要使用XMLHttpRequest构造函数就可以创造XHR对象的函数方法
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else{
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
<2>.XMLHttpRequest对象用法
XMLHttpRequest对象有两个重要的方法open和send
1.open(method,url,async)
规定请求的类型,URL以及是否异步吃力请求
method:请求类型 get||post
url:文件在服务器上的位置
async:true(异步)或false(同步)
2.send(String)
将请求发送到服务器
String:仅用于post请求
ajax.open('get','AjaxDemo01/Ajaxdemo.jsp',true);
ajax.send(null);
注意:open方法
URL是相对于当前页面的路径，也可以似乎用绝对路径。
open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送。
只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。
3.使用jQuery的方式来实现ajax
<1>使用$.ajax({})的方式
使用:
function fun(){
$.ajax({
url:"UserServlet",
type:"get",
data:{"username":"jack","age":23},
success:function(data){
alert(data);
},
error:function(){
alert("出错了");
},
dataType:"text"
});
}
<2>$.get():发送get请求
*语法:$.get(url,[data],[callback],[type])
url:请求路径
data:请求 参数
callback:回调函数
type:响应结果的类型
4.JSON对象
<1>.概念
JavaScript Object Notation JavaScript对象表示法--
Person p=new Person(); p.setName("张三"); p,setAge(23); p.setGender('男');
var p={"name":" 张三","age":23,"gender":"男"};
JSON多用于存储和交换文本信息的语法
进行数据的传输
JSON比XML更小,更快,更易解析
<2>.语法
1.基本规则:
数据在名称值/对中:在JSON中数据是由键值对创建的
*键用引号(单双都可以)引起来,也可以不适用引号
*值得取值类型:
1.数字(整数和浮点型)
2.字符串(在双引号中)
3.逻辑值(true和false)
4.数组(在方括号中){"person"[{""},{""}]}
5.对象(在花括号中){"address"{"province":"山西"}}
6.null
数据由逗号分开:多个键值对由逗号分隔
花括号保存对象:使用{}来定义json格式
方括号保存数组:[]
<script>
var person = {"name" : "jack","age" : 23,"gender" : true};
var persons = {
"persons" : [ {"name" : "张三","age" : 23,"gender" : true},
{"name" : "李斯","age" : 23,"gender" : true},
{"name" : "王五","age" : 23,"gender" : false} ]};
alert(persons);
var ps = [ {"name" : "张三","age" : 23,"gender" : true},
{"name" : "李斯","age" : 23,"gender" : true},
{"name" : "王五","age" : 23,"gender" : false} ];
alert(ps);
</script>
<2>.获取数据
1.json对象.键名
var name=person.name;
2.json对象["键名"]
var name=person["name"];
3.数组对象[索引]
var name1=persons.persons[2].name;
ps[1].name
<3>.json遍历
<script>
var person = {"name" : "jack","age" : 23,"gender" : true};
var ps = [ {"name" : "张三","age" : 23,"gender" : true},
{"name" : "李斯","age" : 23,"gender" : true},
{"name" : "王五","age" : 23,"gender" : false} ];
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for ( var key in p) {
alert(key + ":" + p[key]);
}
}
</script>
<4>.JSON数据和Java对象的相互转化
*JSON解析器:常见的解析器 Jsonlib,Gson,fastjson,jackson
1.JSON转为java对象
1>.使用步骤
1).导入jackson的相关的jar包
2).创建jackson核心对象 ObjectMapper
3).调用ObjectMapper的相关方法进行转换
1*.readValue(json字符串数据,Class);
2.java对象转化为json
1>使用步骤
1).导入jackson的相关的jar包
2).创建jackson核心对象 ObjectMapper
3).调用ObjectMapper的相关方法进行转换
2>注解:
1).@JsonIgnore:排除属性
2).@JsonFormat:属性值格式化
@JsonFormat(pattern="yyyy-MM-dd")
3>复杂Java对象的转换
1).List:数组
2).Map:对象格式一致
json(重点)方便实用其实就是讲述按照json的格式拼接好的字符串,方便实用eval方法将接受的字符串数据直接转换为js对象
json格式:
var 对象名={
属性名:属性值;
属性名:属性值;
....
}
json是什么?
JSON是一种轻量级的数据交换格式。适用于ajax应用程序的一种有效格式,它使js对象和字符串值之间得以快速转化JSON同时也是一种传递对象的语法,对象可以是name/value对,数组和其他对象
JSON传递的对象为函数时候必须是在js中进行传递,非js语言没有办法辨别它的语法的
JSON是基于文本的数据格式,相对于基于二进制的数据,所以JSON在传递的时候是传递符合JSON这种格式的字符串,而不是一个对象
JSON特征及用途:
JSON是一种格式,基于文本,优于量级,用于交换数据
·一种数据格式
·基于文本的数据格式
·轻量级的数据格式
相同的数据以JSON的格式占据的带宽更小,这里有大量数据请求和传递的情况下有明显优势的
·被广泛地用于数据交换
书写格式:
名称/值对
名称/值对组合中的名称写在前面(在双引号中),值对写在后面,中间用冒号隔开,2个组合之间用逗号隔开,其中值可以是:数字整数活浮点数,字符串(在双引号中),逻辑值(true和false),数组(在方括号中),对象(在花括号中),null
使用方式: var josn={"name":"myname","password":123456};
关于客户端和服务器的渲染
1.服务器端和客户端不会一起崩
2.前后端分离的基本