简单来说,Ajax就是异步通讯机制,实现局部刷新。
优点
缺点
不需要插件支持
浏览器对XMLHttpRequest对象的支持度不足
优秀的用户体验
破坏浏览器的前进后退按钮的正常使用
提高Web程序的性能
对搜索引擎的支持不足
减轻服务器和宽带的负担
开发和调试工具的缺乏
2.Ajax的XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。
利用XMLHttpRequest(XHR)对象,每次构建Ajax应用必须遵循以下步骤:
(1)创建XMLHttpRequest对象
(2)创建Ajax请求
(3)发送Ajax请求
(4)处理服务器响应
3.XMLHttpRequest属性:
(1)ReadyState
0“未初始化”,(XMLHttpRequest)对象已经创建,但还没有调用open()方法。
1“发送”状态,已经准备好把一个请求发送到服务器。
2“发送完成”状态,已经把一个请求发送到服务器端,但还没有响应。
3“正在接收”状态,已经接收,还没有完全接收结束。
4“已加载”状态,响应已经被完全接收。
(2)responseText和responseXML请求返回的文本或XML内容
(3)statusHttp状态码
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
4.方法
labort()暂停请求,并重置到未初始化状态
lopen()加载要链接的页面
lsend()把该请求发送到服务器
说明:1)send方法有一个content参数,它标识要向服务器发送的数据,其格式为
查询字符串的形式,例如:
varcontent=“userName=li&sex=male&age=25″;
xmlHttp.send(content);
2)如果提交方法是get方式,则这些参数作为查询字符串提交;如果指定的
是post方式,则这些参数是放入请求体提交。
3)Request.getParameter(“参数名”)获取对应的值
xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
事件onreadystatechange———readyState值发生改变时候触发
二、JQUERY的AJAX实现(一)
jQuery对Ajax进行了封装。
JQuery中的Ajax请求方法:
$.load(url,[data],[callback])
$.get(url,[data],[fn],[type])
$.post(url,[data],[callback])
$.getJSON(url,[data],[fn])
$.getScript(url,[callback])
$.ajax([options])
1、load()方法
能够载入远程HTML代码并插入DOM中。
语法:
load(url[,data][,callback])
url:请求HTML页面的URL地址
data:发送至服务器的数据
callback:请求完成时的回调函数,无论请求成功或失败
例子:创建一个HTML文件,名字为inner.html,然后再建一个页面test.html,添加一个button元素,添加一个id为resTest的元素,当单击button时,resText显示追加的HTML内容。
HTML代码略。
jQuery代码如下:
$(function){$(“#send”).click(function(){$(“#resTest”).load(“test.hmtl.para”);});}2.$.get()方法
使用get方法来进行异步请求.
$.get(url[,data][,callback][,type])
url:请求的HTML页的URL地址例如:test.jsp
data:发送至服务器的数据会作为QueryString附加到请求URL中。如:
{name:’zhangs’}
callback:载入成功时回调函数(只有当Response的返回状态是success
才调用该方法)自动将请求结果和状态传递给该方法。例如
function(dt){alert(dt)}
type:服务器返回内容的格式,包括xmlhtmlscriptjsontext
例子:
页面搭建:
第一种:
方法与get()差不多只是把传参方式改成post
4.$ajax()
写一个.js文件
在调用json时,需要导入jar
json:
[{"username":"张三","content":"沙发"},{"username":"李四","content":"板凳"},{"username":"王五","content":"没有"}]GetJsonServlert:
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//编码request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");PrintWriterout=response.getWriter();//获取表单控件值Stringusername=request.getParameter("username");Stringcontent=request.getParameter("content");//输出到客户端out.print("{\"username\":\""+username+"\",\"content\":\""+content+"\"}");out.flush();out.close();}