AJAX
什么是ajax
asynchronous javascript and xml（异步的js和xml）-->异步的js与json(当下主流) 是一种改善用户体验度的技术，实质上是利用浏览器内置的ajax对象(数据类型是XMLHttpRequest)向服务器发送异步(ajax向服务器发送请求时，不会打断用户当前的操作)的请求，服务器将处理之后的结果返回给ajax，通过脚本获取服务器返回的数据更新页面，整个过程当中，页面不会被销毁。 优点: 1.页面不会刷新，用户体验度较好(表单验证) 2.减少了浏览器与服务器的数据交互量，提高了响应速度 3.是一个标准的技术，不需要安装任何插件就可以直接使用
获取ajax对象
ActiveXObject XMLHttpRequest
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
//低版本的IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
ajax对象相关属性
onreadystatechange:给ajax对象绑定一个事件函数(注册监听器) readyState:ajax对象与服务器通讯的状态 0 1 2 3 4，当状态发生改变时，事件函数会被触发 0(未初始化):对象已创建，但是尚未调用open方法 1(已初始化):对象已创建，但是尚未调用send方法 2(发送数据):已调用send方法 3(数据传送中):ajax已接收部分返回数据 4(响应结束)：ajax已接收了全部数据 responseText:服务器返回的是文本数据类型 responseXML：服务器返回的是xml数据类型 status:服务器响应的状态码(200 500 404)
ajax向服务器发送请求
--get请求 step1.获取ajax对象 step2.初始化，建立连接 xhr.open("get","check.do?username=zs",true/false); true：ajax向服务器发送异步请求，请求过程中，不会打断用户操作 false:ajax向服务器发送同步请求，请求过程中，页面会被锁住，用户做不了其他操作 step3.给ajax绑定事件函数 xhr.onreadystatechange = function(){ } step4.发送请求 xhr.send(); --post请求 step1.同上 step2.初始化 xhr.open("post","check.do",true/false); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); step3.同上 step4.发送请求 xhr.send("username=zs&password=1234");
JSON
javascript object notation 是一种轻量级的数据交换标准，一般用于浏览器与服务器的数据交换。比如将java对象转成浏览器可以识别的js对象。 数据交换:将数据转成一个中间的，与平台无关的数据发送给另一方处理。 轻量级:相对于xml而言，json编写更简单，数据量更小，解析的速度更快。
json语法创建js对象
{属性名:属性值,属性名:属性值}
单个对象:{"name":"zs","age":10}
数组对象:[{},{}]
java对象与json数据转换
fastjosn.jar包中提供的API 1.java对象转成json字符串 String:JSON.toJSONString(Object); 2.json字符串转成java对象 --JSON.parSEObject(str,User.class);//将json字符串转成单个对象 --JSON.parseArray(str,User.class);//将json字符串转成多个对象
js对象与json数据转换
1.js对象转成json字符串 JSON.stringify(jsObj); 2.json字符串转成js对象 JSON.parse(str);
热卖商品动态展示，每隔5秒钟，查找当前卖的最好的三件商品 1.设计表 create table sale( id int primary key auto_increment, prodName varchar(30), qty int ); insert into sale values (null,'小米手机',88); insert into sale values (null,'小米手环',78); insert into sale values (null,'小米电脑',60); insert into sale values (null,'小米音箱',98); insert into sale values (null,'小米手环',79); 2.后台--处理数据 step1.定义实体类Sale step2.定义接口SaleDAO step3.定义实现类SaleImpl step4.ActionServlet调用DAO，获取数据--List<Sale> 转成jsonStr，传给ajax 3.前台--展示数据 step1.使用ajax发送请求 step2.在事件回调函数中，获取jsonStr-->js数组对象 遍历数据，生成商品信息，展示在页面中 step3.启动定时器
同源政策
同源政策: 在某些情况下，A源页面不能直接访问B源的数据，即不能跨源。只有在同源的情况下，才能访问。 同源: 协议相同 域名相同 端口号相同 目的: 为了保护用户的信息安全，防止恶意的网站获取用户的信息。 限制范围: ajax不能跨源 cookie，LocalStorage DOM节点无法获取 解决方案:CORS（cross-origin resource sharing）跨资源共享 CORS将跨源请求分为了两类: 简单请求 1.请求方式是 head get post 2.编码方式 text/plain application/x-www-form-urlencoded multipart/form-data 非简单请求 只要不符合以上两种情况的就算非简单请求 比如:请求方式 put delete 编码方式 application/json 简单请求: 当浏览器发现是跨域请求，浏览器会在请求数据包中，自动添加一个消息头(origin),用于说明本次请求来源于哪一个源(协议+IP+端口)，服务器根据这个值，决定是否同意这次请求。 默认情况下，服务器不同意，需要添加额外的设置: resp.setHeader("Access-Control-Allow-Origin",req.getHeader("Origin")); 跨域请求，默认不支持cookie数据传递 设置1: //服务器同意接受cookie数据 resp.setHeader("Access-Control-Allow-Credentials","true"); 设置2: 给ajax对象打开cookie的withCredentials设置 xhr.withCredentials = true; 非简单请求:比如请求方式是put/delete 浏览器会在正式发送跨域请求之前，增加一次http查询请求，请求方法是OPTIONS(询问),浏览器询问服务器是否运行跨源访问以及请求方式是否被允许，只有得到肯定的答复，浏览器才会使用ajax对象发送真正的请求。 //如果是非简单请求，需要设置消息头，告诉浏览器，该请求被允许调用 resp.setHeader("Access-Control-Allow-Methods","PUT"); 当前应用目录与目标访问目录不属于同一个源，拒绝访问 http://localhost:8080/sale.do http://localhost:8081/sale.do 端口号 https://localhost:8080/sale.do 协议 http://www.qf.com/sale.do 域名
jQuery
1.简介
jquery是js的框架，利用了选择器(借鉴了css的选择器)查找要操作的dom节点(dom对象)，将dom节点对象封装成jquery对象，调用jquery提供的方法或者属性操作dom节点。 目的: 1.简化代码 2.解决了兼容性问题
2.编程步骤
1.引入jquery.js文件<script src=""></script> 2.使用juqery提供的选择器查找节点，var $obj = $("#id") 3.调用jquery提供的属性或方法，操作该节点 $obj.css();
3.dom节点对象转成jquery对象
$(dom对象)
4.jquery对象转成dom对象
a.$(obj).get()[0] b.$(obj).get(0) c.$(obj)[0]
5.基本选择器
#id:id选择器 element:元素选择器 .class:类选择器 *:匹配所有元素 select1,select2...:组合选择器
6.查看dom节点数据
html(); 等同于 innerHTML text(); innerText val(); value attr(); 获取dom节点属性值 attr("value") attr("value","jack") prop(); 获取dom节点属性值 若是自定义的属性，建议使用attr 若是标签自带的属性，建议使用prop
7.dom节点的操作
创建dom节点:$("标签") 比如:$("<span class=''>span-txt</span>")
a.添加
append(); 内部追加
prepend();内部前置
after();追加兄弟节点
before();前置兄弟节点
b.删除
remove(); $("#d1").remove();
remove(选择器); $("#u1").remove("#li2");
empty();
c.复制
clone(); 只复制节点，不复制行为
clone(true); 复制节点，也复制行为
8.样式操作
attr("class","");
addClass("");添加样式
removeClass("");移除样式
toggleClass("s1");样式切换
.s1{
backgroud-color:red;
}
9.遍历节点
children();只考虑子元素，不考虑其他后代元素 next();下一个兄弟 prev();上一个兄弟 siblings();查找所有的兄弟节点
10.事件处理
a.事件绑定
$obj.bind(事件类型，function(){});
$obj.click(function(){});
<a οnclick=""></a>
b.合成事件
$obj.hover(f1,f2);
11.动画
show("slow/fast/normal/1000");显示
hide();隐藏
fadeIn()/fadeOut();//改变元素的透明度实现隐藏 显示的效果
slideDown()/slideUp();//改变元素的高度实现隐藏 显示的效果
animate()；//自定义动画效果
12.jquery操作数组的方法
$(obj).each(function(index,obj){});//$(obj)-->jquery对象，返回的是数组
index：当前遍历的下表
obj:当前遍历的对象[是一个dom对象] jquer对象还是dom对象???
1.length：数组长度
2.get(index)-->返回index下标所对应的元素--->dom对象
3.eq(index)-->返回index下标所对应的元素--->jquery对象
4.index(obj)-->返回obj对象的下标，可以传dom对象也可以传jquery对象
13.jquery对ajax的支持
json语法:{"属性名":属性值,"属性名":属性值}
get请求:list.do?page=1
post请求:send(page=1)
$.ajax({
"url":"请求地址"，//list.do
"type":"请求方式",//get[缺省值]/post
"data":"请求参数",//"page=1&pageSize=2"/{"page":1,"pageSize":2}
"dataType":"服务器返回的数据类型",//json,xml,js,text,html
"success":function(data,txt){
//data：服务器返回的数据,如果返回的数据类型是json，此处data已经被jquery转成js对象
//txt:状态描述信息
}
"error":function(xhr,txt){
//xhr：ajax对象
//txt:状态描述信息
}
});
简写:
$.get(url,[data],[callback],[type]);
url：请求地址
data:请求参数，可以是字符串拼接也可以是json格式的js对象
callback:成功的回调函数
type:服务器返回的数据类型
$.post(url,[data],[callback],[type]);
15.$obj.load();
$obj.load(url,[data],[callback]); dom节点对象调用load方法，载入远程数据，插入到dom节点。
#####
练习: 1.实现二级联动 select * from 表 where 省=“js”； 一级:省份 二级:城市 省份信息静态数据(写死),城市信息动态从服务器获取(模拟城市文本信息返回即可，不用查库)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
