1. 局部刷新
2. 按需取数据
二、创建Ajax对象, 这是学习Ajax的第一步
主要是把浏览器分成两种
一种是IE系列的浏览器(IE5.0 IE5.5 IE6.0, IE7 IE8)
一种是非IE浏览器(都是按W3C标准) FF Mozilla NetScape
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返回完整的headers
getResponseHeader("headerLabel") 作为字符串返回单个的header标签
send(content) 发送请求
onreadystatechange 状态改变的事件触发器
readyState 对象状态(integer):
0 = 未初始化 1 = 读取中2 = 已读取3 = 交互中4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
statusText 服务器返回的状态文本信息
有了一个这样的页面之后,我们要回到请求页,相信学过网页的同学对script标签应该非常熟悉把,是的,接下来的代码就是要书写在script标签中。大家应该知道我们网页中是事件,如鼠标点击事件,鼠标悬停事件,键盘起落事件等等,而发送Ajax请求就是要通过事件来完成,下面我们就用代码来给大家建立一个最基本的Ajax请求:
script ="text/javascript"> functionvarnewvar url = "ajax.jsp?q=" + val; url = url + "&sid=" + Math.random(); xmlHttp.open("GET", url, true); xmlHttp.send(); document.getElementById("sun").innerHTML = xmlHttp.responseText; } scriptheadbodyforminput ="text"="tname"="" /> <type name value onclickform 你提交的数据是: span ="sun"></> </> </>
因为要对数据进行的操作很少,所以ajax.jsp页面的代码异常简单:
body<% name = request.getParameter(); out.print(name); %> bodyhtml
script ="text/javascript"="jQuery1.11.1.js"></> <type sayHi(){ $.ajax({ cache: , type: "POST", url:"ajax.jsp", data:$('#frm').serialize(), async: , error: (request) { alert("请求失败!"); }, success: (data) { $("#d").html(data); } }); } scriptheadbodyform ="frm" > <type name valueinput ="button"="提交"="sayHi();"/> <iddivformbodyhtml
body<% userName = request.getParameter(); out.print(userName+); %> bodyhtml