Ajax的定义
Ajax被认为是(Asynchronous JavaScript and XML的缩写）。 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。
Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
一、使用JavaScript实现Ajax技术
1.首先建立一个jsp页面,导入js页面并且新建一个测试按钮。
<script type="text/javascript" src="ajaxGet.js"></script> <!-- src导入相应的JavaScript实现Ajax代码 -->
</head>
<body>
<input type="button" id="btn" value="ajax"/> <!-- 测试按钮 -->
</body>
2.其中我们在js页面先需要获取XmlHttpRequest对象,并且需要处理兼容问题
获取XmlHttpRequest对象
function getXMLHttpRequest() {
var xmlHttpReq=null;
if (window.XMLHttpRequest) {//Mozilla 浏览器
xmlHttpReq = new XMLHttpRequest();
}else {
if (window.ActiveXObject) {//IE 浏览器
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {//IE 浏览器
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
}
}
}
}
return xmlHttpReq;
3.接着在相同页面下开始写onload事件(get方法发送数据)
window.onload = function(){
var btnDom=document.getElementById("btn");
btnDom.onclick = function(){
//ajax步骤
//1
var xhr = getXMLHttpRequest();
//2.监听响应 如何判断能够正确请求和响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //响应结束
if(xhr.status == 200){ //正确响应
//接收响应数据
var data = xhr.responseText;
alert(data);
}
}
};
//3.打开连接
/*
* method: get 或 post
* url: 请求路径
* async: true(表示异步，默认) false
*/
xhr.open("get","../ajaxGetServlet?age=18&userName=jack",true);
//4.发送数据
xhr.send(null); //使用get请求send发送的数据都为null,且不能省略这一步
};
};
或者使用(post请求//第3第4步骤有区别)
window.onload = function(){
var btnDom=document.getElementById("btn");
btnDom.onclick = function(){
//1
var xhr = getXMLHttpRequest();
//2.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
alert(data);
}
}
};
//3.
xhr.open("post","../ajaxPostServlet",true);
/*
* 4.发送数据
* send() string或null
* String类型一般为键值对 "username=zhangsan"
* get请求 都是send(null)
* post请求要send数据需要设置请求头
*/
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("user=admin&age=12");
};
};
其中步骤3的url需要我们创建一个servlet
public class AjaxGetServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String age = request.getParameter("age");
String userName = request.getParameter("userName");
System.out.println(age+"------"+userName);
//响应数据
response.getWriter().print("hello"); //js中步骤2监听响应
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
代码写完以后,我们只需要按一下(value="ajax")测试按钮就可以使用ajax技术实现异步请求与响应。
二、使用jQuery实现Ajax技术
案例:如何使用ajax技术实现用户注册时用户名是否被占用?
1.jsp注册页面
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script><!-- 导入jQuery包 -->
<body>
<h3>jquery 实现 ajax</h3>
<p>用户名：<input id="userName" name="userName"/><span id="msg"></span></p>
<script type="text/javascript" src="jqdemo.js"></script><!-- jqdemo.js使用jquery实现ajax -->
</body>
2.js页面(无需手动获取XmlHttpRequest对象)
$(function(){
$("#userName").blur(function(){
var name = $(this).val();
if(name.trim() == ""){
return;
}
//jquery 实现 ajax
$.ajax({
url:"../jqueryUserName", //请求的路径
type:"post", // 请求方式 默认是get
data: { //要发送的数据
"name":name
},
dataType:"text", //响应数据的类型
success:function(result){ // 正确响应
if(result == "yes"){
$("#msg").html("用户名可以使用");
}else{
$("#msg").html("用户名被占用");
}
},
error:function(){
alert("请求失败！");
}
});
});
});
3.servlet页面(获取用户名比较是否被占用)
public class JqueryUserName extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("jquery ajax 验证用户名！");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
if("ajax".equals(name) || "admin".equals(name) || "jack".equals(name)){
//用户名已被使用
out.print("no");
}else{
out.print("yes");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
时间： 2024-08-24 16:28:28