首页 > 代码库 > ajax发送post请求
ajax发送post请求
前言：在上篇中，我们使用ajax技术，以get方式发起请求，达到了网页端局部刷新的效果。这次，我们使用post方式来实现局部刷新。
在上篇的基础上，.jsp/web.xml/servlet三个部分都要改动或新写
步骤核心(就是修改index.jsp文件)：
第一步：在js中创建XMLHttpRequest对象
第二步：获取用户在id="username"的input元素中输入的信息
第三步：通过XMLHttpRequest对象发起post请求
要点
(1)ajax发起post请求，需要先设置好请求头(就得按下面那样写)
xhr.setRequestHeader(
"content-type","application/x-www-form-urlencoded");
(2)向XMLHttpRequest对象中放入请求
(3)发送请求时，xhr.send方法的参数不再是null了，需要传入我们在第二步中获取到的用户名。代码为：
xhr.send("name="+name);
注意：send方法中，写入的参数的形式必须是："参数名="+参数值
第四步：
(1)设置触发请求的事件(本例中的是onblur，光标离开事件)
(2)设置服务器返回响应的内容在浏览器的哪个位置局部刷新出来
第五步：创建回调函数，检测readyState属性的值
第六步：当readyState值为4且status值为200时，服务器返回相应完毕，从响应中获取返回的内容，显示到浏览器上指定的位置
一、index.jsp文件
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
</head>
......(上篇的代码部分)
<script type="text/javascript">
//检查用户名是否可用
function checkname(){
//这次发起请求时，还要将用户输出的用户名也发给服务器
//获取请求参数
var name = document.getElementById("username").value;
//获取XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//将post请求放到XMLHttpRequest对象中
xhr.open("post","/ajax01/check.do")
//ajax发起post请求，需要先设置好请求头(就得按下面那样写)
xhr.setRequestHeader(
"content-type","application/x-www-form-urlencoded");
//注册回调函数
xhr.onreadystatechange = function(){
//1、readyState状态码为4表示服务器返回响应完毕
//2、XMLHttpRequest对象的status属性：
//(1)该属性值可为：404/500/200/...
//(2)当xhr.status==200时，表示请求处理成功
//如果请求处理完毕
if(xhr.readyState == 4 && xhr.status == 200 ){
//获取响应的内容信息
var msg = xhr.responseText;
//将该信息追加到指定的网页位置
document.getElementById("username_msg").innerHtml = msg;
}
};
//发送请求(必须是("参数名="+参数值)的形式)
xhr.send("name="+name);
//发起请求后，显示正在检测
document.getElementById("username_msg").innerHtml = "正在检测...";
};
</script>
<body>
......(上篇的代码部分)
<hr/>
<table>
<tr>
<td>新闻标题</td>
<td>时间</td>
</tr>
<tr>
<td>习近平和英九在新加坡相会</td>
<td>2015-11-11</td>
</tr>
<tr>
<td>经济指数有所改观</td>
<td>2015-11-10</td>
</tr>
<tr>
<td>大宗商品价格下跌</td>
<td>2015-11-10</td>
</tr>
</table>
<hr/>
<!-- onblur属性：鼠标失去焦点事件(就是鼠标的光标离开了文本框) -->
<input type="text" id="username" onblur="checkname()">
//服务器返回的信息在这里局部刷新出来
<span id="username_msg"></span>
</body>
</html>
二、创建一个servlet,用于检查浏览器端发来的用户名是否可用
package org.tarena.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet
extends HttpServlet{
public void service(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException{
System.out.println(1);
//模拟实际请情况，延迟3s后返回结果(延迟时显示请求正在处理)
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
System.out.println(2);
//设置返回的文件类型和编码集
response.setContentType("text/plain;charset=utf-8");
//获取一条输出流，用于向浏览器端显示信息
PrintWriter out = response.getWriter();
System.out.println(3);
//对于请求带过来的数据，用utf-8来解码
request.setCharacterEncoding("utf-8");
System.out.println(4);
//获取请求中name参数的值
String name = request.getParameter("name");
System.out.println(5);
//检测name值是否可用
if("scott".equals(name)){
out.println("用户名已被占用");
}else{
out.println("用户名可用");
}
System.out.println(6);
out.flush();
out.close();
}
}
三、在web.xml文件中为CheckServlet这个servlet设置接收的请求，我们设置该servlet接收的请求是"/check.do"(代码就不赘述了)
操作：
(1)发起请求，进入index.jsp页面
请求为：http://localhost:8080/ajax01/index.jsp
浏览器显示如图：
(2)在文本框中输入用户名，显示为：
ajax发送post请求