Ajax学习总结升级版.docx
《Ajax学习总结升级版.docx》由会员分享，可在线阅读，更多相关《Ajax学习总结升级版.docx（24页珍藏版）》请在冰豆网上搜索。
Ajax学习总结升级版
Ajax学习总结
作者：
金含
QQ交流群:
243639561
个人博客网站:
备注：
相信自己，每天不断学习，一定会成为大神，一定会在IT行业中有所作为。
1、获取ajax引擎对象XMLHttpRequest
1.编写一index.jsp文件，代码如下:
functiongetXml（）{
varxml;
if（window.XMLHttpRequest）{
xml=newXMLHttpRequest（）;
}else{
xml=newActiveXObject（"microsoft.xmlhttp"）;
}
alert（"当前搜索引擎是：
"+xml）;
}
2.程序运行如下:
2、使用ajax实现从服务器获得时间
1.java程序:
packagecom.eduask;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.Date;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
//编写一个时间日期函数，当用户点击显示时间按钮，服务器会自动显示当前系统时间;
publicclassDemo1extendsHttpServlet{
@Override
protectedvoidservice（HttpServletRequestreq,HttpServletResponseresp）
throwsServletException,IOException{
req.setCharacterEncoding（"utf-8"）;
resp.setCharacterEncoding（"utf-8"）;
resp.setContentType（"text/html;charset=utf-8"）;
Datedate=newDate（）;
PrintWriterout=resp.getWriter（）;
out.print（"当前系统时间是：
"+date）;
}
}
2.date.jsp文件
varinput1=document.getElementById（"input1"）;
input1.onclick=function（）{
varxhr=getXhr（）;
xhr.onreadystatechange=function（）{
if（xhr.readyState==4）{
if（xhr.status==200）{
varmsg=xhr.responseText;
document.write（msg）;
}
}
};
xhr.open（"get","/ajax/Demo1",true）;
xhr.send（null）;
};
functiongetXhr（）{
varxhr;
if（window.XMLHttpRequest）{
xhr=newXMLHttpRequest（）;
}else{
xhr=newActiveXObject（"microsoft.xmlhttp"）;
}
returnxhr;
}
3.web.xml配置文件
Demo1
com.eduask.Demo1
Demo1
/Demo1
4.程序运行如下:
3、使用Ajax验证用户是否可以注册
1．Java代码如下:
packagecom.eduask;
importjava.io.IOException;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
//测试用户名在服务器中的测试;
publicclassDemo2extendsHttpServlet{
@Override
protectedvoidservice（HttpServletRequestreq,HttpServletResponseresp）
throwsServletException,IOException{
resp.setContentType（"text/html;charset=utf-8"）;
Stringname=req.getParameter（"name1"）;
name=newString（name.getBytes（"ISO8859-1"）,"utf-8"）;
if（"tom".equals（name））{
resp.getWriter（）.write（"该用户已存在！
"）;
}else{
resp.getWriter（）.write（"该用户可以注册！
"）;
}
}
}
2.demo2.jsp代码如下:
请输入用户名:
varinput1=document.getElementById（"input1"）;
input1.onblur=function（）{
varxhr=getXhr（）;
xhr.onreadystatechange=function（）{
if（xhr.readyState==4）{
if（xhr.status==200）{
varmsg=xhr.responseText;
varspan1=document.getElementById（"span1"）;
span1.innerHTML=msg;
}
}
}
xhr.open（"get","/ajax/Demo2?
name1="+input1.value,true）;
xhr.send（null）;
}
functiongetXhr（）{
varxml;
if（window.XMLHttpRequest）{
xml=newXMLHttpRequest（）;
}else{
xml=newActiveXObject（"microsoft,xmlhttp"）;
}
returnxml;
}
3.web.xml配置文件如下:
--demo2-->
Demo2
com.eduask.Demo2
Demo2
/Demo2
4.程序运行如下:
4.使用Ajax测试post请求方式:
1.java代码如下:
packagecom.eduask;
importjava.io.IOException;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
//测试Ajax请求方式为post;
publicclassDemo3extendsHttpServlet{
@Override
protectedvoidservice（HttpServletRequestreq,HttpServletResponseresp）
throwsServletException,IOException{
req.setCharacterEncoding（"utf-8"）;
resp.setCharacterEncoding（"utf-8"）;
resp.setContentType（"text/html;charset=utf-8"）;
//接受用户的输入的name;
Stringname=req.getParameter（"name1"）;
if（"tom".equals（name））{
resp.getWriter（）.write（"该用户已经注册"）;
}else{
resp.getWriter（）.write（"用户可以注册"）;
}
}
}
2.demo3.jsp代码如下:
<%@pagelanguage="java"contentType="text/html;utf-8"
pageEncoding="utf-8"%>
ajax测试post请求方式请输入用户名:
vargetName1Id=document.getElementById（"name1"）;
getName1Id.onblur=function（）{
varxhr=getXhr（）;
xhr.onreadystatechange=function（）{
if（xhr.readyState==4）{
if（xhr.status==200）{
varmsg=xhr.responseText;
varspan1=document.getElementById（"span1"）;
span1.innerHTML=msg;
}
}
}
xhr.open（"post","/ajax/Demo3"）;
//设置消息头，告诉浏览器携带请求体数据;
xhr.setRequestHeader（"content-type","application/x-www-form-urlencoded"）;
xhr.send（"name1="+getName1Id.value）;
}
functiongetXhr（）{
varxhr;
if（window.XMLHttpRequest）{
xhr=newXMLHttpRequest（）;
}else{
xhr=newActiveXObject（"microsoft,xmlhttp"）;
}
returnxhr;
}
3.web.xml配置文件如下:
--demo3-->
Demo3
com.eduask.Demo3
Demo3
/Demo3
4.程序运行如下:
5.使用xml格式ajax的post请求
1．Java代码如下:
packagecom.eduask;
importjava.io.IOException;
importjava.util.Date;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassDemo4extendsHttpServlet{
@Override
protectedvoidservice（HttpServletRequestreq,HttpServletResponseresp）
throwsServletException,IOException{
req.setCharacterEncoding（"utf-8"）;
resp.setCharacterEncoding（"utf-8"）;
resp.setContentType（"text/xml;charset=utf-8"）;
Stringname=req.getParameter（"name1"）;
if（"tom".equals（name））{
resp.getWriter（）.write（"abc"+""+"用户名不可以注册"+""+""）;
}else{
resp.getWriter（）.write（"abc"+""+"用户名可以注册"+""+""）;
}
}
}
2.xmldemo4.jsp代码如下：
请输入用户名:
vargetName1Id=document.getElementById（"name1"）;
getName1Id.onblur=function（）{
varxhr=getXhr（）;
xhr.onreadystatechange=function（）{
if（xhr.readyState==4）{
if（xhr.status==200）{
vardoc=xhr.responseXML;
vare1=doc.getElementsByTagName（"msg"）[0];
varmsg=e1.firstChild.nodeValue;
//alert（msg）;
varspan=document.getElementById（"span1"）;
span.innerHTML=""+msg+"";
}
}
}
xhr.open（"post","/ajax/Demo4"）;
//设置消息头，告诉浏览器携带请求体数据;
xhr.setRequestHeader（"content-type","application/x-www-form-urlencoded"）;
varspan=document.getElementById（"span1"）;
span.innerHTML="正在加载数据"
xhr.send（"name1="+getName1Id.value）;
}
functiongetXhr（）{
varxhr;
if（window.XMLHttpRequest）{
xhr=newXMLHttpRequest（）;
}else{
xhr=newActiveXObject（"microsoft,xmlhttp"）;
}
returnxhr;
}
3.web.xml配置文件如下:
--demo4-->
Demo4
com.eduask.Demo4
Demo4
/Demo4
4.程序运行如下:
6.json格式ajax的post请求方式
1.java代码如下:
packagecom.eduask;
importjava.io.IOException;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassDemo5extendsHttpServlet{
@Override
protectedvoidservice（HttpServletRequestreq,HttpServletResponseresp）
throwsServletException,IOException{
resp.setContentType（"text/xml;charset=utf-8"）;
Stringname=req.getParameter（"username1"）;
resp.setCharacterEncoding（"utf-8"）;
Stringmsg="";
if（"tom".equals（name））{
msg="{'msg':
'failed'}";
resp.getWriter（）.write（msg）;
}else{
msg="{'msg':
'success'}";
resp.getWriter（）.write（msg）;
}
}
}
2.json.jsp代码如下:
--functionPerson（id,name,pwd）{
this.id=id;
this.name=name;
this.pwd=pwd;
}
varp=newPerson（1234,"tom","1234"）;
alert（p.id+"--"+p.name+"--"+p["pwd"]）;
varp1={
'id':
234,
'name':
"jack",
'pwd':
"123"
};
functionPerson（）{
this.name="tom";
this.age=23;
}
alert（p1.id+"--"+p1.name+"--"+p1["pwd"]）;
-->
username1:
//===================post=====================================================
varpost=document.getElementById（"username1"）;
post.onblur=function（）{
varxhr=getXhr（）;
xhr.onreadystatechange=function（）{
if（xhr.readyState==4）{
if（xhr.status==200）{
//字符串格式的数据
varmsg1=xhr.responseText;
//转换为json对象
msg1=eval（"（"+msg1+"）"）
varspan=document.getElementById（"msg1"）;
//通过对象.属性名称获取属性的值
span.innerHTML=""+msg1.msg+"";
}
}
}
xhr.open（"post","/ajax/Demo5"）;
//设置消息头，告诉浏览器携带请求体数据
xhr.setRequestHeader（"content-type","application/x-www-form-urlencoded"）;
/**/varspan=document.getElementById（"msg1"）;
span.innerHTML="正在加载数据..
升级会员 