正文
ajax+jquery+JSON笔记
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
ajax (asynchronous javascript and xml -- 基于javascript和xml的异同步通讯技术)
特征： 异步通讯 异步的请求-响应模式
1.传统的web模式：同步的请求-响应模式
1) 客户端浏览器通过当前页面的表单，向服务器发送请求；
发送请求之后，当web服务器反馈新的页面到达时，浏览器废弃当前页面；
2) 这导致客户端在等待响应页面到来之前将不能进行下一步操作，这种等待服务响应到来之后，
客户端才能执行进一步操作的请求-响应模式,是同步的请求-响应模式
2.ajax模式:异步请求-响应模式
1) 什么是ajax?
asynchronous javascript and xml的首字母提取,形成了ajax：基于javascript和xml的异步通讯技术.
2) ajax对象
是利用XMLHttpRequest构造函数创建的javascript对象。
① 现代浏览器都会定义一个名称为XMLHttpRequest的function,并允许用户利用这个function创建对象.
该对象可以向web服务器单独发送请求,并实施响应处理.因此XMLHttpRequest类型的对象
又叫ajax对象或称为xhr对象.
② ajax对象与服务器交互时,使用的还是http协议.通讯数据可以是:
普通文本数据、xml格式数据 或 json格式的数据。
3.异步请求-响应模式的特点：
1) html页面可以通过ajax对象,单独完成和web服务器的通讯工作，同时自身与服务器的通讯能力仍然保持。
2) 依靠ajax对象和web服务器通讯，不必废弃当前页面，
ajax对象获得服务器的响应之后，可以对当前页面实施局部更新。
#tips:
① 传统的servlet jsp是同步的请求-响应模式；而ajax是异步的请求响应模式。
② 先有同步请求响应模式 后有异步请求响应模式。
③ 当请求到达tomcat时 服务器会给每个请求开一个线程。
④ javascript执行单位是函数，java执行单位是类和对象
⑤ 事件
onclick: 点击触发;
onblur : 失去焦点时触发 -- 光标离开文本框;
⑥ <span>在span后面开辟一片区域</span>
4.同步的请求响应模式：
1> 表单提交
2> 超链接
3> 地址栏输入
同步请求响应模式的弊端：
只要服务器的反馈 没有到达浏览器 ，浏览器就停止在提交页面静止不动。
不做特殊处理情况下(请求转发优化处理) 当响应到达浏览器，浏览器会呈现一个新的页面来加载反馈信息。
需要等待响应信息到达之后才可以进行下一步。
用户体验度不高，等待服务器反馈回路的信息到达浏览器，才能进入下一步。
5.异步请求响应模式：
优点:不需要等待服务器响应到达就可以进行下一步。
6.ajax对象
1> ajax对象不是java对象，是javascript对象
2> 通过构造函数XMLHttpRequest()创建XMLHttpRequest对象，也就是ajax对象。
XMLHttpRequest是已经定义了的 内置的构造函数
XMLHttpRequest 是javascript的内置函数，用来创建对象 ，
XMLHttpRequest 功能函数 一般浏览器都会提供该构造方法
如果浏览器很老 譬如ie6之前的浏览器 可以通过借助操作平台，调用windows提供的方法ActiveXObject()来创建ajax构造
7.ajax对象包含的方法
1>建立连接方法
open("请求方式", "请求地址"+value, true);
① 参数一：请求方式 get/post
② 参数二：请求地址，如果是get请求方式传参需要在后面再加一个参数值 例："path?username="+uservalue，明码提交。
如果是post请求就不需要。私密提交。
post请求步骤：
①> 设置请求报头，向服务器汇报所提交的是普通文本字符串还是文件。
ajaxObj.setRequestHeader("Content-Type", "...");
<①>文本字符串:application/x-www-form-urlencoded
<②>文件:multipart/form-data
②> send(参数);
ajaxObj.send("username="+uservalue);
③ 参数三：true 表示是异步请求响应模式；
false表示不是异步请求响应模式。
该方法的作用是：通过ajax对象建立和web服务器的连接并准备请求(ajax会单起一个线程)
可以在浏览器中单起一个链接 对服务器发起一个新的线程请求，
2>发送请求方法
send();
① 如果是get请求 ：send(null);
② 如果是post请求 ：send(参数);
3>当服务器给浏览器反馈响应时，由ajax对象接收反馈
8.ajax的属性
1> status属性 ： 服务器反馈回来的响应头信息，是反馈回的状态码; (正常状态码200 异常时500)
2> responseText属性 ：服务器反馈回来的响应信息，具体的响应数据结果，存储反馈回来的信息的属性;
3> readyState属性 ：就绪状态
readyState属性是ajax对象的就绪状态.在ajax对象的生命周期中,ajax对象的就绪状态有5种情形:
① readyState=0,表示ajax对象刚刚诞生但还未初始化,还没有建立连接;
② readyState=1,表示ajax对象与web服务器建立了连接;
③ readyState=2,表示请求发送之后接收到响应数据(接收了整个完整的响应信息,status属性已经得到设置);
④ readyState=3,表示ajax对象开始解析响应数据(表明ajax对象开始把指针指向响应正文,还没有解析完数据);
⑤ readyState=4,表示ajax对象解析响应数据完毕! (此时就可以对ajax进行下一步操作)
(当ajax就绪状态readyState的数值发生改变时,就说是发生了一个事件，就可以执行其绑定的函数)
9.ajax的事件
1> onreadystatechange
该事件发生时，它所绑定的方法会执行。
当ajax对象的就绪状态(readyState)发生变化时,表明readystatechange事件发生,会触发匿名函数的执行;
10.Ajax对象即能提交异步请求和又能实施响应处理:
1)Ajax对象可以在一个独立的线程中,单独和web服
务器建立连接,并发送请求;
2)ajax对象利用自己的属性存储响应结果,通过
javascript编程处理响应结果,并针对当前页面实施
局部更新.
---------------------------------------------------------------------------------------------------------------------------------
#在javascript中创建对象的方法示例
//创建构造函数，通过构造函数可以创建一个对象，然后可以调用其属性及方法
<script type="text/javascript">
//定义一个构造函数 为了创建js的对象
function Person(name, age){
this.name = name;
this.age = age; //定义javascript的属性
this.show = function(){ //定义javascript的方法， 变量引用函数的首地址 就可以用show代表该方法
alert(this.name + "\t" + this.age);
}
}
//定义功能函数
function fn(){
//创建js对象 js对象的属性不分公有私有，都是私有
var person = new Person("wangda",18); //调用上方定义的构造函数
//输出属性
alert(person.name + "\t" + person.age);
//调用方法
person.show();
}
</script>
-----------------------------------------------------------------------------------------------------------------
#ajax对象的获得示例
<script type="text/javascript">
//创建ajax对象
function getXMLHttpRequest(){
var xhr;
if(typeof XMLHttpRequest != "undefined"){ // 表明浏览器中定义了XMLHttpRequest构造函数
//创建ajax对象
xhr = new XMLHttpRequest();
}else{
//如果当前浏览器没有定义 创建ajax对象的构造函数 就借助于windows平台
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
//测试函数
function fn(){
var ajaxObj = getXMLHttpRequest();
alert(ajaxObj); // [object XMLHttpRequest] javascript对对象的表现[object 对象类型]
}
</script>
----------------------------------------------------------------------------------------------------------------
#ajax对象创建以及使用方法示例
<script type="text/javascript">
//创建ajax对象
function getXMLHttpRequest(){
var xhr;
if(typeof XMLHttpRequest != "undefined"){ // 表明浏览器中定义了XMLHttpRequest构造函数
//创建ajax对象
xhr = new XMLHttpRequest();
}else{
//如果当前浏览器没有定义 创建ajax对象的构造函数 就借助于windows平台
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
//创建失去焦点函数， 失去焦点时执行的函数
function check_username(){
// 第一步： 获得ajax对象(创建了ajax对象)
var ajaxObj = getXMLHttpRequest();
// 第二步：通过ajax对象建立和web服务器的连接并准备请求(ajax会单起一个线程)
//获得用户名表单项的dom对象
var unameObj = document.getElementById("uname");
var unameValue = unameObj.value;
ajaxObj.open("get", "servlet/ActionServlet?username="+unameValue, true);
// 第三步： 发送请求
ajaxObj.send(null);
// 第四步：实施响应数据的处理
var spanObj = document.getElementById("unameMsg");// 当想把一个标签变成对象时，给它一个id，然后通过该语句将其封装为对象
ajaxObj.onreadystatechange = function(){ //给onreadystatechange事件绑定匿名函数
alert("readyState= "+ajaxObj.readyState+"\n"+
"status= "+ajaxObj.status+"\n"+
"responseText= "+ajaxObj.responseText);
if(ajaxObj.readyState == 4){
if(ajaxObj.status == 200){
spanObj.innerHTML = ajaxObj.responseText; //spanObj.innnerHTML代表span标签体 ，动态显示span标签内容
}else{
spanObj.innerHTML = "服务器端异常...";
}
}else{
spanObj.innerHTML = "ajax对象正在处理响应数据...";
}
}
}
</script>
-----------------------------------------------------------------------------------------
# 动态生成下拉框
function change(v){
alert("1");
// 1>创建ajax对象
var xhr = getXMLHttpRequest();
// 2>建立连接
xhr.open("post", "SelectCity.do", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 3>发送请求
xhr.send("selectname=" + v);
// 4>处理响应数据
xhr.onreadystatechange = function(){
alert("1");
var errorMsgObj = document.getElementById("errorMsg");
errorMsgObj.innerHTML="";//清空原有列表
if(xhr.readyState == 4){
if(xhr.status == 200){
var txt = xhr.responseText;
var jsObj = JSON.parse(txt);
var s2Obj = document.getElementById("s2");
s2Obj.innerHTML = "";//清空原有列表项
for(var index in jsObj){
var op = new Option(jsObj[index].cityName, jsObj[index].cityValue);
s2Obj.options[index] = op;
}
}else{
errorMsgObj.innerHTML="服务器错误";
}
}else{
errorMsgObj.innerHTML="正在读取数据。。。";
}
}
}
-------------------------------------------------------------------------------
servlet通配符配置
'*.do'
' /* '
requestURI : /项目名/资源名
URL : http://localhost:8888/项目名/资源名
ajax应用功能：
页面的局部刷新，ajax功能的校验
jpg格式图片 可伸缩
jQuery
jQuery框架是javascript技术的封装，js的框架之一。
其他的部分的框架:
1>客户对页面有特殊要求使用ExtJS框架(专业的重型的)。
2>dojo框架
3>prototype框架(轻型)
1.jQuery框架原理：
#利用css选择器，通过选择器定位到具体位置，将该位置dom对象封装成jquery对象
1) 将DOM对象封装为jQuery对象。存到自己内部的Array数组中。
封装：
$("参数") -- 代表jquery对象
html标签->dom对象->$对象
var domObj = document.getElementById("#id");
var $Obj = $(domObj); // $的核心函数
如何封装：
2.jQuery函数
1> 核心函数：
$(function(){
});
jQuery("选择器"); --别名： $("选择器"); （别名：jQuery = $）
3.jQuery的方法
1> get();
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。
2> html();
无参html()，输出标签体的内容。
有参html(参数)，用参数内容替换标签体内容。
3> text();
只输出文本，不输出标签(忽略标签)
设置样式：
4> css();
设置样式方法。专门添加style样式(行样式)。
设置符合样式时使用JSON格式。
例：$("#id").css("font-size", "20px");
5> attr(参数);
属性方法。
① 显示属性值，
② 对元素动态的添加新的属性。
6> addClass(参数);
动态的添加属性。
7> removeClass();
动态的删除属性。
8> toggleClass(参数);
切换样式方法。第一次点击添加样式，第二次点击删除。
9> boolean | hasClass(参数);
判断是否有该样式属性
1> $ | children();
获得一组子元素封装成一个$对象
2> next();
紧邻的下一个元素。
3> siblings();
同级别元素，兄弟姐妹。
4> find(参数);
元素查找。
1> append();
内部追加，添加到后面。参数可以是jQuery对象也可以是html标签
2> prepend();
内部添加，前加。
3> after();
元素外部添加，在元素之后添加。
4> before();
元素外部添加，在元素之前添加。
$参数是多变的： dom对象 标签元素 标签选择器。。。。。
4.jQuery的事件方法
5.jQuery框架的执行结构(*****):
$(function(){
});
jquery不使用事件触发机制，定义了事件方法。事件方法是必须有事件发生才执行。
匿名函数或者命名函数作为事件方法的参数。
事件方法的参数是函数：
① 匿名函数，需要传整个函数，包括函数主体。
② 命名函数，将函数名传递进去。
1>ready()方法是jquery的执行结构。
ready事件方法: （代替了onload事件，当浏览器加载完html页面后自动执行）
$(document).ready(function(){
.....
});
ready()方法的简化方法：
$(function(){
.....
});
2>jquery事件执行方法示例:
// jquery执行结构，当浏览器加载完html页面后自动执行
$(function(){
$().click(function(){
// click事件方法代码，当click事件发生执行
....
});
});
#tips:
//第一次点击执行第一个匿名函数，第二次点击执行第二个匿名函数。
$("a").toggle(function(){...}, function(){...});
优势：代码和标签分离。
6.对无序列表的操作：
效果：
1> empty();
把标签体置空。
2> remove();
把标签删除。
3> mouseover: 鼠标覆盖 mouseout:鼠标离开
$(function(){
$("ul li").mouseover(function(){ //父子选择器 这样指每一个<li>列表; mouseover: 鼠标覆盖事件
$(this).addClass("") // this是当前dom对象; addClass添加类选择器
})
});
7.无序列表的遍历
（只有each方法有index参数）
$obj.each(function(index){
if(index == 0){
//this指当前dom对象
$(this).next().val();
}
});
#tips：
① $("input:text:eq(0)").val()
解释:下标是0; 类型是text的元素,input也可以不写; .val()获得用户输入值
② $(":text")
解释：类型是text的所有元素封装成的jquery对象
自动填写表单
$("需要填写的dom").val("需要填写的字符");
例： $(":text").val("name");
获取列表项的值
$(":text").val();
2)自定义的动画效果
$().animate(运动的终点位置 终点坐标是JSON格式, 用时数值);
eg: $().animate({}, 3000); // 设置position:relative;之后 指：相对于初始位置
$().animate();
8.简化ajax技术(*****) （jquery函数可以直接用，方法必须需要别人来调用它）
1)核心函数：$.ajax() （其他函数方法最终底层调用该核心方法）
1> XMLHttpRequest | jQuery.ajax([options]);
options代表选项对象,是设置具体请求和响应的参数,用json格式定义。
2)函数：$.get()
1> XMLHttpRequest | jQuery.get(url, [data], [callback], [type]);
① url:请求地址
② data:请求参数
③ callback:回调,即响应到达才会调用该方法。
④ type:返回响应的类型
url,[data],[callback],[type] : String,Map,Function,String
3)函数：$.post()
1> XMLHttpRequest | jQuery.post(url, [data], [callback], [type]);
参数 同上。
4)方法：load() jQuery对象的load方法
1> jQuery | load(url, [data], [callback]);
① url:请求地址
② data:请求参数,发送至服务器的 key/value 数据。在jQuery 1.3 中也可以接受一个字符串了。
③ callback:载入成功时回调函数。回调,即响应到达才会调用该方法。
load方法要求的返回响应的类型是普通文本。
url, [data], [callback] : String,Map/String,Callback
# tips:
①dom、java、jQuery区别：
dom对象可以直接使用属性。s.name;
java从来不使用属性，通过调用方法。s.getName();
jQuery对象也是通过使用方法。jQuery对象更加接近java对象。
② css 三大选择器：
1>id选择器： #id
2>类选择器： .class
3>元素选择器 （*代表页面的所有元素）
>复合选择器 (三大选择器组合使用)
③ xml标签体包含空白
④ <b></b>加重加粗标签
⑤ #u1 li:eq(1) : 父子选择器 #u1标签下的下标为1的<li>标签
<ul id="u1">
<li></li> ：下标为0
<li></li> ：下标为1
</ul>
⑥ css样式属性：
display:none; css样式属性，初始时不显示
opacity:0.2; 不透明度,1/5不透明,4/5透明
position:relative; 相对定位,即以后可能会运动，以后的运动相对于初始的位置。如果该元素有子元素，子元素的位置是相对于该元素
jQuery的重点：
1>jQuery的四个核心方法
2>动画效果
3>执行结构
4>选择器
JSON
定义javabean对象的作用是封装数据,定义了一个数据传输的规范。
JSON对象定义格式：{"属性名称":属性值, "属性名称":属性值, "属性名称":属性值}
1 JSON对象的类型：
1> 单个对象
{"属性名称":属性值, "属性名称":属性值, "属性名称":属性值}
2> 数组对象(集合对象)
格式： [{}, {}, {}]
[{"属性名称":属性值, "属性名称":属性值, "属性名称":属性值},
{"属性名称":属性值, "属性名称":属性值, "属性名称":属性值},
{"属性名称":属性值, "属性名称":属性值, "属性名称":属性值}]
2 http协议下
1)在服务器端：
1>获得大量复杂数据，封装到一组java对象中。
2>把一组java对象转化成JSON对象是的字符串格式，发给浏览器。
即: 一组java对象 --> JSON对象
2)在浏览器端：
1>把JSON字符串对象首先转成javascript对象
即: JSON对象 --> JavaScript对象
3. 一组java对象 --> JSON对象 第三方工具类
1> 针对单个对象(class JSONObject)
2> 针对一组对象(class JSONArray)
4 JSON对象--> JavaScript对象
JSON.parse(json格式字符串); -- 新浏览器
js调试工具插件：firebug
-------------------------------------------------------------------------------------------------------
# java对象 --> JSON对象
// 1> 单个java对象的JSON格式
private static void singleObjectTran() {
// ①定义一个选项对象
Option op = new Option("海淀", "hd");
// ②转换
JSONObject jsonObj = JSONObject.fromObject(op);
// ③输出
System.out.println(jsonObj.toString()); // {"cityName":"海淀","cityValue":"hd"}
}
// 2> 一组java对象的JSON格式
private static void arrayObjectTran() {
// ①定义一组选项对象
Option op1 = new Option("海淀","hd");
Option op2 = new Option("东城","dc");
Option op3 = new Option("西城","xc");
// ②添加到list集合中
List<Option> olist = new ArrayList<Option>();
olist.add(op1);
olist.add(op2);
olist.add(op3);
// ③转换
JSONArray jsonArray = JSONArray.fromObject(olist);
// ④输出
System.out.println(jsonArray.toString());
-------------------------------------------------------------------------------------------------------
# JSON对象--> JavaScript对象
<script type="text/javascript">
function fn1(){
var str='{"cityName":"岳阳", "cityValue":"yy", "cityAge":800}';
//转换: 单个对象的json格式字符串 --> javascript对象
var jsObj = JSON.parse(str);
alert(jsObj.cityName+"--"+jsObj.cityValue+"--"+jsObj.cityAge);
}
function fn2(){
var str2='[{"cityName":"海淀", "cityValue":"hd"}, {"cityName":"东城", "cityValue":"dc"}, {"cityName":"西城", "cityValue":"xc"}]';
//转换：一组对象的json格式字符串 --> javascript对象（数组对象）
var jsObj2 = JSON.parse(str2);
alert("jsObj2 is Array? " + (jsObj2 instanceof Array)); //true
// 动态生成下拉框
var selectObj = document.getElementById("select");
selectObj.innerHTML = "";
for(var index in jsObj2){ //for循环的增强结构
//alert(jsObj2[index].cityName +"--"+jsObj2[index].cityValue);
//形成下拉框选项
var op = new Option(jsObj2[index].cityName, jsObj2[index].cityValue);
// 把下拉框选项添加到下拉框中
selectObj.options[index] = op;
}
}
</script>
--------------------------------------------------------------------------------------------------
Q；web服务器给浏览器发送数据？
首选：JSON
次选：XML 、
--------------------------------------------------------------------------------------------------
异步jquery<例>：
$.ajax({
type: "POST", //请求方式
async:true, // 异步
cache:false, //缓存
url: basePath + 'pc/queryOutTimeCount.do', //请求地址
dataType : "json", //数据类型
success:function(data){ //如果请求成功响应，得到返回的数据，data封装queryOutTimeCount.do return的数据 <此处为int>
if(data != 0){
$("#pcExprieControl").html("");
$("#pcExprieControl").html("存在"+data+"个已过期主机，请及时处理！");
$("#pcExprieControl").show();
}else{
$("pcExprieControl").hide();
}
},
error : function(xhr, status, errMsg) {
com.message("error","主机监控失败！");
}
});
