原生Ajax和Jquery的Ajax使用示例

一、文章前言

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

二、原生Ajax访问Servlet

后台代码

@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req,resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
PrintWriter writer = resp.getWr
4000
iter();
if (name.equals("123456")) {
writer.print("success");
} else {
writer.print("error");
}
writer.close();
}
}

Ajax代码

function sendRequestByPost(){
//定义异步请求对象
var xmlReq;
//检测浏览器是否直接支持ajax
if(window.XMLHttpRequest){
xmlReq=new XMLHttpRequest();
}else{
xmlReq=new ActiveObject('Microsoft.XMLHTTP');
}

//设置回调函数
xmlReq.onreadystatechange=function(){
if (xmlReq.readyState==4&&xmlReq.status==200) {
//获取服务器的响应值
var result=xmlReq.responseText;
if(result=="success"){
document.getElementById("account").style.borderColor = "green";
}else {
document.getElementById("account").style.borderColor = "red";
}
}
};

/*
* 创建异步Get请求
*  //创建异步get请求
* var name = document.getElementById("account").value;
* var url="Hello?name="+name;
* xmlReq.open("GET",url,true);
* //发送请求
* xmlReq.send(null);
*
* */

//创建异步Post请求
var url="/myServlet";
xmlReq.open("POST",url,true);
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
var name = document.getElementById("account").value;
var data = "name=" + name;
xmlReq.send(data);
}

Jquery中的Ajax

需要引入jquery.js文件代码如下

<input type="text" name="name" id="account"><br>
<button id="sub">提交</button>
<script src="jquery.min.js"></script>
<script>
$("#sub").click(function () {
var name = $("#account").val();
alert(name);
$.ajax({
//提交数据的类型 POST GET
type:"POST",
//提交的网址
url:"myServlet",
//提交的数据
data:{name:name},
//返回数据的格式
dataType: "text",//"xml", "html", "script", "json", "jsonp", "text".
//在请求之前调用的函数
//     beforeSend:function(){alert("发送请求")},
//成功返回之后调用的函数
success:function(data){
if (data=="success") {
$("#account").css("borderColor","green");
}else {
$("#account").css("borderColor","red");
}
}   ,
//调用执行后调用的函数
//complete: function(){
//alert("请求结束");
//HideLoading();
//},
//调用出错执行的函数
error: function(){
//请求出错处理
alert("请求出错");
}
});
});
</script>