使用jQuery发送ajax
首先我们来看一波js的原声ajax。
我们先准备好servlet,之后不会改动，所以先看一波。
package cn.curry.servlet;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
/**
* Created by zl on 2017/3/18.
*/
public class RegisterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name=request.getParameter("name");
if("admin".equals(name)){
//打回浏览器 “已经注册”
response.getWriter().write("Your Account Is Already Registered");
}
else{
//可以注册
response.getWriter().write("You Can Register This Account");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
很简单的servlet页面，然后我们看前台jsp展示页面，我写的是发送post，请求。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
<script type="text/javascript">
function checkUser(){
var value=document.getElementById("username").value;
var url="RegisterServlet";
var xhr;
if(window.XMLHttpRequest){
//非IE浏览器 Chrome 等
xhr=new XMLHttpRequest();
}else{
//IE
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('post',url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var content=xhr.responseText;
document.getElementById("msg").innerText=content;
}
}
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send("name="+value);
}
</script>
</head>
<body>
<input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
<input name="userpwd"/>
</body>
</html>
简单改一下就可以实现发送get请求。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
<script type="text/javascript">
function checkUser(){
var value=document.getElementById("username").value;
var url="RegisterServlet?name="+value;
var xhr;
if(window.XMLHttpRequest){
//非IE浏览器 Chrome 等
xhr=new XMLHttpRequest();
}else{
//IE
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('get',url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var content=xhr.responseText;
document.getElementById("msg").innerText=content;
}
}
xhr.send(null);
}
</script>
</head>
<body>
<input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
<input name="userpwd"/>
</body>
</html>
接下来看jQuery的，简单了很多。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript">
function checkUser() {
var value=document.getElementById("username").value;
$.ajax({
url : "RegisterServlet",
type : "GET",
data : "name="+value,
dataType : "text",
success : function(result){
document.getElementById("msg").innerText=result;
},
error:function () {
document.getElementById("msg").innerText=result;
}
});
}
</script>
</head>
<body>
<input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
<input name="userpwd"/>
</body>
</html>
发送post请求直接把get改为post就可以了。这里就不做概述了。
当然除了$.ajax jQuery还提供了$.get()，$.post(),$(select).load等方法。以上方法用法和$.ajax()语法并没有不同，是对$.ajax()的封装，但是$.ajax()更灵活，通常使用$.ajax()可以完成我们的开发。所以你懂得。
