AjaxJSONjQueryWord文件下载.docx
- 文档编号:6205329
- 上传时间:2023-05-06
- 格式:DOCX
- 页数:47
- 大小:84.85KB
AjaxJSONjQueryWord文件下载.docx
《AjaxJSONjQueryWord文件下载.docx》由会员分享,可在线阅读,更多相关《AjaxJSONjQueryWord文件下载.docx(47页珍藏版)》请在冰点文库上搜索。
2:
(发送数据)send方法已调用。
3:
(数据传送中)已接收部分数据,此时,数据不完整。
4:
(响应结束),此时,可以通过responseText/responseXml获取数据了。
②编程步骤:
step1获取XmlHttpRequest对象
step2使用XmlHttpRequest对象
发送请求:
1).get请求
varurl="
some?
username=zs"
;
xmlHttpRequest.open('
get'
url,true);
//建立连接
get:
请求方式,可以是get/post,大小写都可以。
url:
请求的地址,如果有请求参数,加在url之后。
true:
表示发送的是异步请求。
false表示同步请求,跟表单提交一样。
xmlHttpRequest.onreadystatechange=fun1;
/*在fun1函数中获取数据,更新界面*/
/*注册一个回调函数,用于处理服务器的响应。
*/
/*fun1监听readstatechange事件,xmlHttpRequest对象与服务器通讯过程当中,会经历5个状态,每当状态发生改变,就会产生该事件。
可以在fun1中,编写代码更新页面。
xmlHttpRequest.send(null);
//发送数据
//只有调用send方法,才开始发送数据。
//对于get请求,参数必须是null。
2).post请求
与get请求步骤基本一样,
xmlHttpRequest.open("
POST"
url,true);
xmlHttpRequest.setRequestHeader("
Content-Type"
"
application/x-www-form-urlencoded"
因为post方式提交需要http请求数据包。
step3在服务器端编写相应代码处理请求。
在服务器端,一般不需要返回完整的html页面,只需要返回部分的数据。
step4在回调函数中(即fun1),通过xmlHttpRequest获取数据,然后更新页面。
例:
实现用户名是否存在验证;
服务器端的servlet和jsp文件,需要配置web.xml文件
publicclassAjaxTestextendsHttpServlet{
publicvoidservice(HttpServletRequestrequest,
HttpServletResponseresponse)throwsServletException,IOException{
PrintWriterout=response.getWriter();
System.out.println("
serviceexecutevaliusername..."
Stringusername=request.getParameter("
username"
if(username.equals("
zs"
)){
out.print("
exist"
}else{
ok"
}
}
<
html>
head>
scriptsrc="
prototype-1.6.0.3.js"
>
/script>
script>
functionfun1()
{
varxmlH=null;
if((typeofXMLHttpRequest)!
{
xmlH=newXMLHttpRequest();
else{//IE浏览器
xmlH=newActiveXObject('
varurl="
AjaxTest.do?
username="
+$F('
usrname'
xmlH.open('
encodeURI(url),true);
xmlH.onreadystatechange=function(){
if(xmlH.readyState==4)
{
vartxt=xmlH.responseText;
$('
info'
).innerHTML=txt;
没有输入时
if(txt=='
ok'
)
{
$('
).style.color='
blue'
}
else{
red'
输入”zs”
}
xmlH.send(null);
输入其它
/head>
body>
<
table>
<
tr>
td>
username:
inputtype="
text"
id="
usrname"
name="
onblur="
fun1();
"
/>
<
spanid="
info"
style="
color:
red;
/span>
/td>
/tr>
password:
password"
pwd"
submit"
sb"
value="
OK"
/table>
/body>
/html>
3.ajax编程中的中文问题
①当采用get方式向服务器发送请求时,IE采用gb2312/gbk来编码,而firefox采用utf-8来编码。
解决方案:
step1:
encodeURI(url地址):
采用utf-8来编码url。
step2:
URIEncoding="
utf-8"
②采用post方式向服务器发送请求时,不管是ie/firefox,都会采用utf-8来编码。
request.setCharacterEncoding="
综合例
%@pagecontentType="
text/html;
charset=utf-8"
pageEncoding="
%>
scripttype="
text/javascript"
src="
js/prototype1.6.js"
functiongetXmlHttpRequest(){
varxmlHttpRequest=null;
)
{//非ie浏览器
xmlHttpRequest=newXMLHttpRequest();
}else{//ie浏览器
xmlHttpRequest=newActiveXObject('
returnxmlHttpRequest;
functionvaliusername(){
varxmlReq=getXmlHttpRequest();
varurl="
valiusername.do?
username'
xmlReq.open("
get"
/*指定使用utf-8进行编码*/
xmlReq.onreadystatechange=function(){
if(xmlReq.readyState==4){
if(xmlReq.status==200){/*没有系统错误的情况*/
varresText=xmlReq.responseText;
$('
username_msg'
).innerHTML=resText;
}else{
).innerHTML='
systemerror'
}
}else{
checking...'
xmlReq.send(null);
/*-----------------------------------------采用post方式---------------------------------------------*/
functionvaliusername2(){
varurl='
valiusername.do'
xmlReq.open('
post'
xmlReq.setRequestHeader("
if(xmlReq.readyState==4){
if(xmlReq.status==200){
系统错误'
xmlReq.send('
username='
));
bodystyle="
font-size:
30pt;
formaction="
regist.do"
method="
post"
用户名:
valiusername2();
spanstyle="
username_msg"
br/>
年龄:
age"
确认"
/form>
publicclassUserServletextendsHttpServlet{
publicvoidservice(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
Stringuri=request.getRequestURI();
Stringpath=uri.substring(uri.lastIndexOf("
/"
),uri.lastIndexOf("
."
request.setCharacterEncoding("
response.setContentType("
charset=utf-8"
if(path.equals("
/valiusername"
System.out.println("
Stringusername=request.getParameter("
+username);
if(username.equals("
out.println("
}else{
/regist"
intage=Integer.parseInt(request.getParameter("
response.sendRedirect("
login.jsp"
用Ajax实现级联下拉菜单的动态更新
style>
#d1{width:
400px;
height:
300px;
background-color:
#ff88ee;
margin:
40pxauto;
padding-left:
30px;
padding-top:
/style>
{//非ie浏览器
}else{//ie浏览器
returnxmlHttpRequest;
functionchange(val){
$('
s2'
).innerHTML='
'
varxmlReq=getXmlHttpRequest();
xmlReq.open('
'
prodList'
true);
xmlReq.setRequestHeader("
"
xmlReq.onreadystatechange=function(){
varresText=xmlReq.responseText;
//bmw,bmw520;
qq,qqme;
cherry,cherry100
varstr=resText.split('
for(i=0;
i<
str.length;
i++){
varstr1=str[i];
varstr2=str1.split('
varop=newOption(str2[1],str2[0]);
).options[i]=op;
prodType='
+val);
divid="
d1"
tablecellpadding="
0"
cellspacing="
产品类型<
产品名称<
selectname="
s1"
width:
120px;
onchange="
change(this.value);
optionvalue="
car"
汽车<
/option>
ryp"
日用品<
/select>
s2"
/div>
publicclassProductListextendsHttpServlet{
StringprodType=request.getParameter("
prodType"
Stringlist=null;
if(prodType.equals("
list="
bmw,bmw520;
cherry,cherry100"
}elseif(prodType.equals("
list="
r1,ryp1;
r2,ryp3;
r3,ryp3;
r4,ryp4"
out.println(list);
out.close();
练习:
写一个股票报价程序。
可以每隔5秒钟动态显示某一支股票的价格。
JSON
1.JSON:
javascriptobjectnotation,它是一种轻量级的数据交换语言,一般用于客户端(浏览器)与服务器端进行数据交换(即服务器端生成符合json语法格式的字符串,发送给服务器,然后,客户端再将该字符串转换成javascript对象)。
JSON示意图
JSON是一种中间的数据格式。
(1)json语法
对象:
{'
propName'
:
value'
其中,propName代表属性名,必须用'
或者"
括起来,value代表值,如果值是string,也必须用'
或者"
括起来。
值还可以是null,true/false,当然,也可以是一个对象。
比如:
{'
address'
{'
city'
bj'
room'
200'
}}
数组:
[{'
},{'
}];
(2)如何将java对象或者集合转换成符合json语法格式的字符串
step1导入json相关的包
step2使用json中的两个类:
JSONObject,JSONArray来做转换。
对于java对象,使用JSONObject转换;
对于java对象数组或者List,使用JSONArray
可以自定义转换规则(参考下例相应代码),其步骤是:
step1写一个转换器,该类要实现JsonValueProcessor
step2注册转换器
step3转换
publicclassTest{
//将一个对象转换成符合json格式的字符串
publicstaticvoidtest1(){
Useruser=newUser();
user.setName("
user.setAge(22);
user.setBirthday(newDate());
user.setIdCa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AjaxJSONjQuery