Ajax——的概念、get请求和post请求

1.Ajax的概念

Ajax是一种在无需加载整个网页的情况下，能够更新部分网页的技术。
Ajax=异步 js和XML
Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新，这意味着可以在不用重新加载整个页面的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须加载整个页面。

2.XMLHttpRequest对象

XMLHttpRequest 是Ajax的基础，所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个页面的情况下，对网页的某部分进行刷新。

XMLHttpRequest的使用流程

1.创建XMLHttpRequest对象
2.请求（同步或异步请求）
3.响应

Request的open方法

open(method,url,async)
规定请求的类型，URL以及是否是异步处理请求
method:请求的类型，get或者post
URL：文件在服务器上的位置
async：true（异步）或者false（同步）
默认方法是异步的，也就是开子线程，同步方法已经被废弃，不能再用。
send(string)
将请求发送到服务器
string：参数用于post请求，也就是get请求不需要传string参数

案例：get请求登录

1.以前的servlet方式登录

创建jsp登录页面LoginServlet

<form action="${pageContext.request.contextPath}/LoginServlet">
用户名：<input type="text" name="username"><br>
密码:<input type="password" type="password" name="password"><br>
<input type="submit" value="登录">
</form>

创建登录servlet

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet{
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
String username=request.getParameter("username");
String password=request.getParameter("password");
if("szl".equals(username)&&"123".equals(password)){
response.getWriter().write("success");
}else{
response.getWriter().write("failure");
}
}
}

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doGet(request,response);
}

2.Ajax登录，servlet和前面一样，就不写了

创建jsp登录页面LoginServlet

<script type="text/javascript">
//js登录方法
function login(){
//使用ajax往servlet发送get请求
//1.获取表单数据
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
//2.拼接表单数据
var params='username'+username+'&password'+password;
//3.URL
var url='${pageContext.request.contextPath}/LoginServlet?'+params;
//4.使用ajax发送get请求
//4.1创建一个请求对象
var request=new XMLHttpRequest();
//4.2调用get请求方法，调用open方法的时候，都用异步请求true
request.open('get',url,true);
request.send();
//4.3接收服务器的响应
request.onreadystatechange=function(){
console.log('准备状态码:'+request.readyState+'---响应状态码:'+request.status);
if(request.readState==4&&request.status==200){
//接收服务器响应的数据
var rspText=request.responseTest;
console.log(rspText);
//获取span标签
var tipTag=document.getElementById('tip');
if(resTest=='success'){
tipTag.innerHTML='登录成功';
}else{
tipTag.innerHTML='登录失败';
}
}
}
}
</script>

 <span style="color:red" id='tip';></span>
<form>
用户名：<input type="text" name="username" id='''username'><br>
密码:<input type="password" type="password" name="password" id="password"><br>
<input type="button" value="登录" onclick="login()">
</form>

ajax准备状态码
request.readyState
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成，且响应已就绪
http响应状态码
request.status
200:OK
404:未找到网页
405:用来访问本页面的HTTP谓词不被允许（方法不被允许），也就是post不能请求get

案例：post请求登录，servlet也是一样的，不多写

<script type="text/javascript">
//js登录方法
function login(){
//使用ajax往servlet发送post请求
//1.获取表单数据
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
//2.拼接表单数据
var params='username'+username+'&password'+password;
//3.URL
var url='${pageContext.request.contextPath}/LoginServlet';
//4.使用ajax发送post请求
//4.1创建一个请求对象
var request=new XMLHttpRequest();
//4.2调用post请求方法，调用open方法的时候，都用异步请求true
request.open('post',url,true);
//设置post请求头,每台电脑可能请求头不一样，用不了就自己找自己浏览器的网络请求头
request.setRequestHeader('content-type','application/x-www-from-urlencoded');
request.send(params);
//4.3接收服务器的响应
request.onreadystatechange=function(){
console.log('准备状态码:'+request.readyState+'---响应状态码:'+request.status);
if(request.readState==4&&request.status==200){
//接收服务器响应的数据
var rspText=request.responseTest;
console.log(rspText);
//获取span标签
var tipTag=document.getElementById('tip');
if(resTest=='success'){
tipTag.innerHTML='登录成功';
}else{
tipTag.innerHTML='登录失败';
}
}
}
}
</script>

 <span style="color:red" id='tip';></span>
<form>
用户名：<input type="text" name="username" id='''username'><br>
密码:<input type="password" type="password" name="password" id="password"><br>
<input type="button" value="登录" onclick="login()">
</form>