Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
- 目前JavaScript提供的基础ajax都很少使用,在日常使用中都是用JQuery的$ajax.
少啰嗦,先看东西
$('#submit').click(function () {
//获取页面的输入框的值
var $username=$('#username').val();
var $password=$('#password').val();
//查看值是否获取到了
console.log($username);
console.log($password);
//ajax应用
$.ajax({
type: 'post',//传输方法通常get和post
url: "${pageContext.request.contextPath}/login",//Servlet请求路径
data: {username:$username,password:$password},//向后台传输的数据
dataType: "text",//数据格式通常text,json,xml
success: function (data) {//ajax请求成功后,后台返回的数据
var mydata =data;
console.log(mydata)//查看数据
if (mydata == "1") {
console.log("成功");
}
else {
console.log("失败");
}
}
})
});
Servlet代码
String username =request.getParameter("username");
String password =request.getParameter("password");
username =new String(username.getBytes("iso-8859-1"),"UTF-8");
password =new String(password.getBytes("iso-8859-1"),"UTF-8");
UserService userService=new UserServiceImpl();
User user =userService.getUserByUsernameAndPassword(username,password);
if(user!=null){
System.out.println("登录成功");
//session作用域,一次会话有效
HttpSession session=request.getSession();
session.setAttribute("user",user);
String code ="1";
response.getWriter().write(code);
}else {
System.out.println("登录失败");
String code ="0";
response.getWriter().write(code);
}
注意事项:如果没有导入本地的jQuery文件,请加上下面代码才有效。
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
ajax优点
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
各参数解释
1.url:
要求为String类型的参数,(默认为当前页地址)发送请求的地址。
2.type:
要求为String类型的参数,请求方式(post或get)默认为get。
3.data:
要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。
4.dataType:
要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。
5.success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
6.error:
要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}