ajaxjsonjquery等学习笔记jiadpWord文档格式.docx
- 文档编号:16340889
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:11
- 大小:139.93KB
ajaxjsonjquery等学习笔记jiadpWord文档格式.docx
《ajaxjsonjquery等学习笔记jiadpWord文档格式.docx》由会员分享,可在线阅读,更多相关《ajaxjsonjquery等学习笔记jiadpWord文档格式.docx(11页珍藏版)》请在冰豆网上搜索。
比如,将业务逻辑如果写在servlet类里面的话,只有部署
整个应用才能测试,如果将业务逻辑写在java类里面,可以直接
测试。
(3)方便分工协作、也方便代码的维护:
可以按照mvc思想对整个软件分层:
一般分为表示层(v和c),业务层(m),持久层(m中的数据访问部分)。
下一层为上一层提供服务,上一层通过接口来调用下一层,这样一来,只有接口不变,即使下一层的代码发生了改变,也不会影响到上一层。
比如持久层(dao)发生改变,不会影响到业务层。
缺点:
使用mvc以后,会增加软件设计的难度以及代码量,相应地软件
开发的成本也会增加。
asynchronousjavascriptandxml(异步的javascript和xml)。
是一种改善用户体验的技术,其实质是利用浏览器内置的一个特殊对象(XMLHttpRequest)异步地向服务器发请求(浏览器不会销毁当前页面,用户仍然可以使用当前页面做其它操作),在浏览器端,可以使用javascript获得服务器返回的处理结果(处理结果保存在XMLHttpRequest对象上)并部分更新当前页面。
整个过程,不打断用户的操作,页面无刷新。
1)获得XMLHttpRequest对象(ajax对象)。
XMLHttpRequest没有标准化,要区分浏览器来获得。
functiongetXhr(){
varxhr=null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr=newXMLHttpRequest();
}else{
//ie浏览器
xhr=newActiveXObject('
Microsoft.XMLHttp'
);
}
returnxhr;
}
2)XMLHttpRequest对象的重要属性
a,onreadystatechange:
绑订一个事件处理函数(监听器),当XMLHttpRequest对象的readyState值发生改变,就会产生readystatechange事件。
b,responseText:
获得服务器返回的文本数据。
c,responseXML:
获得服务器返回的xml数据。
d,readyState:
其值是一个整数(0,1,2,3,4),当XMLHttpRequest对象在与服务器进行通讯时,readyState值会发生改变,当值为4时,表示这个对象已经收到了服务器返回的所有的数据。
e,status:
状态码
3)编程步骤
step1,先获得XMLHttpRequest对象
比如:
varxhr=getXhr();
step2,使用ajax对象发请求
xhr.open(请求方式,请求地址,异步/同步);
请求方式:
"
get"
或者"
post"
请求地址:
如果是get方式,要将请求参数添加到这儿,如果是post方式,要将请求参数添加到send()方法里。
true:
表示异步,即ajax对象在向服务器发送请求时,用户仍然可以操作当前页面。
flase:
表示同步,即ajax对象在向服务器发送请求时,浏览器会锁定当前页面。
方式一:
发送get请求
xhr.open('
get'
'
check_username.do?
username='
+$F('
username'
),true);
xhr.onreadystatechange=f1;
xhr.send(null);
方式二:
发送post请求
post'
check_username.do'
true);
xhr.setRequestHeader('
content-type'
application/x-www-form-urlencoded'
xhr.send('
+$F('
));
step3,编写服务器端的处理代码,一般只需要返回部分的数据。
step4,编写事件处理函数(监听器)
unctionf1(){
if(xhr.readyState==4){
vartxt=xhr.responseText;
//使用txt更新页面dom
}
4)编码问题
a,当使用get方式发请求时,ie浏览器内置的那个ajax对象会对中文参数使用gbk编码格式进行编码;
而其它浏览器使用utf-8。
解决方式:
step1,明确告诉容器如何解码
比如,可以修改tomcat的server.xml文件,添加URIEncoding="
utf-8"
step2,使用encodeURI函数对请求地址中的中文参数值统一编码。
b,当使用post方式向服务器发请求时,浏览器内置的那个ajax对象,都统一使用"
编码格式进行编码。
解决方式:
request.setCharacterEncoding("
1)页面无刷新,不打断用户的操作。
2)按需获取数据,大大减少了浏览器与服务器数据传输量。
3)ajax是一种标准化的技术,不需要下载任何的插件。
练习:
对于验证码,使用ajax技术进行验证:
即当用户输入完验证码并失出焦点后立即提示用户验证码是否正确。
写一个级联下拉列表。
(javascriptobjectnotation)
(1)json是什么?
是一种轻量级的数据交换标准。
数据交换:
就是将一种数据格式转换成一种中间的、与平台无关的数据格式,然后传递给接收方。
轻量级:
相对于xml而言,解析的速度更快、数据量更小。
(2)json的基本语法
1)表示一个对象
{属性名称:
属性值,属性名称:
属性值...}
注意:
a,属性名称必须要用引号括起来
b,属性值的类型可以是string,number,boolean,null,object
c,属性值如何是string,必须要用引号括起来。
{'
name'
:
'
zs'
age'
22}
ww'
address'
{
'
city'
beijing'
street'
ca'
room'
1008'
}
2)表示一个数组
[{},{}...]
比如:
[{'
22},{'
32}]
(3)使用json来编写ajax应用
1)java对象--->
json字符串
使用jsonlib提供的JSONObject,JSONArray的方法来实现转换。
2)json字符串--->
js对象
使用prototype提供的evalJSON函数。
完成“商品热卖"
显示功能。
代码已上传ajax02.zip
3、缓存问题
(1)缓存问题是什么?
当发送get请求时,对于ie浏览器,会先查看是否访问过该地址,如果访问过,则不再访问。
(2)如何解决?
在请求地址后面添加一个随机数。
4、发送同步请求
给交友应用中的注册页面添加表单验证:
a,用户名不能为空,并且用户名不能被占用
b,验证码必须正确
满足以上条件才能提交表单。
1、jQuery基础
(1)jQuery介绍
是一个js文件(js框架),它的最大特点是,使用jQuery选择器(借鉴了css选择器的语法)找到要操作的dom节点,然后将这些dom节点封装成jQuery对象(封装的目的有两个:
第一是为了简化代码;
第二个是为兼容不同的浏览器之间的差异)。
只需要调用jQuery对象提供的属性或者方法就可以实现对底层的dom节点的操作。
(2)编程步骤
step1, 使用jQuery选择器找到要操作的节点。
step2, 调用jQuery对象的属性或者方法。
(3)jQuery对象与dom对象的转换
1)dom对象--->
jQuery对象
$(dom对象);
2)jQuery对象--->
dom对象
$obj.get(0)或者$obj.get()[0]
<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=UTF-8"
>
title>
第一个jQuery程序<
/title>
scripttype="
text/javascript"
src="
js/jquery-1.4.3.js"
/script>
functionf1(){
////为了强调获得的是一个jQuery对象,通常,会在变量前加"
$"
。
var$obj=$('
#d1'
$obj.html('
hellojava'
}
functionf2(){
//$('
).css('
font-size'
60px'
)
//.css('
font-style'
italic'
color'
red'
$('
).css({'
90px'
'
yellow'
});
//dom对象--->
jQuery对象
functionf3(){
varobj=document.getElementById('
d1'
$(obj).css('
//jQuery对象-->
dom对象
functionf4(){
//varobj=$obj.get(0);
varobj=$obj.get()[0];
obj.innerHTML='
/head>
body>
<
divid="
d1"
hellojQuery<
/div>
ahref="
javascript:
;
"
onclick="
f4();
Clickme<
/a>
/body>
/html>
(4)如何同时使用prototype与jQuery
var$a=jQuery.noConflict();
prototype与jquery的$符冲突问题<
!
--在这里,如果先导入prototype,那么jquery的$就会把prototype的$替换掉。
-->
js/prototype-1.6.0.3.js"
).innerHTML='
//将jQuery的$函数改名为$a
var$a=jQuery.noConflict();
).innerHTML='
$a('
).html('
f2();
2、jQuery选择器
1)基本选择器selector/s1.html
#id
.class
element
selector1,select2...selectn
*
2)层次选择器selector/s2.html
select1select2
select1>
select2
select1+select2
select1~select2
3)过滤选择器
(1)基本过滤选择器selector/s3.html
:
first
last
not(selector)
even
odd
eq(index)
gt(index)
lt(index)
(2)内容过滤选择器selector/s4.html
contains(text)匹配包含给定文本的元素
empty匹配所有不包含子元素或者文本的空元素
has(selector)匹配含有选择器所匹配的元素的元素
parent匹配含有子元素或者文本的元素
(3)可见性过滤选择器
hidden匹配所有不可见元素,或者type为hidden的元素
visible匹配所有的可见元素
(4)属性过滤选择器
[attribute]
[attribute=value]
[attribute!
=value]
(5)子元素过滤选择器
nth-child(index/even/odd)
(6)表单对象属性过滤选择器
enabled
disabled
checked
selected
5、表单选择器
:
input
text
pasword
radio
checkbox
submit
image
reset
button
file
hidden
浏览器差异有哪些?
1.IE第一个节点为空节点,火狐就没有。
2.事件对象,IE和firefox在获得事件对象时,所使用的方法不同。
3.在更改样式时,IE和firefox使用不同。
Prototype与jQuery在使用$时,所遇到的问题?
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ajaxjsonjquery 学习 笔记 jiadp
![提示](https://static.bdocx.com/images/bang_tan.gif)