ajax是目前项目上使用
比较频繁的技术，非常的实用。本人目前做的项目中几乎都使用了ajax去后台请求数据。现在讲本人的学习笔记以及练习使用心得分享给大家，纯手打，大家多多支持。本分享为基础的ajax使用方法，掌握了基础使用，在根据实际业务来适当的调整参数的设置，请求成功方法的编写。就完成了ajax这个强大的使用。
一：html中ajax的使用
通过一个小domo帮助大家理解ajax的使用：首页登录动态刷新验证账号是否存在，这里不从数据库抽取数据了，直接将已存在的账号写死来验证。
通过AJAX （Asynchronous J AvaScript and XML）实现异步刷新。
1. 首先写我们的登录页面：
<body>
账号：<input type="text" onkeyup="check()" id="account"></input>
<span id="checkResult"></span>
</body>
<script type="text/javascript" src="../js/ajax.js"></script>解析：onkeyup属性是：键盘按下弹起之后的响应，回去执行引用的js文件中check()方法。
span是用来显示是否存在的文本提示。
截图如下：
2. 此时当输入账号时，会响应ajax.js中的check方法。
var xmlhttp;
function check() {
var name = document.getElementById("account").value;
var url = "http://localhost:8080/test1/html/checkName.jsp?name="+name;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = checkResult;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function checkResult() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("checkResult").innerHTML=xmlhttp.responseText;
}分部解析：
①整体过程为浏览器创建XMLHTTPRequest对象，并设置好响应函数，设置好服务器访问的页面地址，执行访问。
服务器端调用响应函数，判断是否响应成功 ，获取文本，显示文本。
②创建xmlhttp为对象 XMLHTTPRequest，通过这个对象与服务器端实现动态交互效果；
③当ajax请求传到服务器，并完成响应之后，浏览器端需要接收这个响应，通过onreadystatechange完成服务器端的接收。并将这个接收操作通过checkResult方法来完成 。也就是说，服务器端处理了这个ajax请求，并访问了url地址，拿到了结果。此时返回到浏览器，通过onreadystatechange调用checkResult方法，判断服务器端状态为（请求已完成，响应已就绪）并且200（响应成功），此时将span文本框中插入服务器返回来的结果信息。
④.open函数设置将要访问的地址。
⑤.send函数为发送给服务器。null表示没有参数，只有用POST请求时，才可能用到参数。
⑥checkResult处理服务器的响应结果。
3. 最后为检验页面的代码，使用JSP。代码如下：
<body>
<%
String name = request.getParameter("name");
if("吴先生".equals(name))
out.print("<font color='red'>已经存在</font>");
else
out.print("可以使用");
%>
</body>
完成了动态刷新验证。
二：通过jquery完成ajax请求刷新验证：
首先导入jquery.main.js文件。
1. 在jquery中通过$.ajax({param1.param2,param3})实现ajax请求。
前端页面同样，有输入框和提示框组成。
2. 在js中代码如下：
$(function(){
$("#in1").keyup(function() {
var page = "../html/checkName.jsp";
var value = $(this).val();
$.ajax({
url:page,
data:{"name":value},
success:function(result) {
$("#check").html(result);
}
});
});
});分布解析：
$(function() {})为预加载函数，学习过jquery的同志们应该都懂。
page为我们需要请求的页面，此URL可以为前端页面不变，也可根据实际项目需求设置为后端请求地址。
data为我们需要传递的参数以及参数的值。
success为请求成功后，对应的响应函数，也就相当于onreadystatechange对应的checkResult方法的作用。
成功实现如下
3. 在jquery中提交ajax的方式还有很多种，常见的有$.get（专门提交get请求）、$.post（专门提交post请求）、load（最简易的ajax请求），均可实现ajax请求。代码如下：
$(function(){
$("#in1").keyup(function() {
var value = $(this).val();
var page = "../html/checkName.jsp?name="+value;
/* $.ajax({
url:page,
data:{"name":value},
success:function(result) {
$("#check").html(result);
}
});*/ //$.ajax方式提交
/* $.get(
page,
{"name":value},
function(result) {
$("#check").html(result);
}
)*/ //$.get方式提交
$("#check").load(page);
//load方式提交，需要注意的是：$("#check")为显示提示信息的文本框，此时直接将输入框中的值通过page的URL中传递参数到请求页面中。load的参数可以有两个$("#**").load(page,[date]);
});
});4. 有时候我们需要提交验证多个输入框的内容，此时可以使用serialize()把输入的数据格式化成字符串，然后传递到URL中。
代码如下：
<a href="http://localhost:8080/test1/html/checkName.jsp">http://localhost:8080/test1/html/checkName.jsp</a>
<form id="form">
姓名：<input type="text" id="name" name="name"><br/>
年龄<input type="text" id="age" name="age"><br/>
性别<input type="text" id="sex" name="sex">
</form> $("input").keyup(function() {
var data = $("#form").serialize();
var url = "http://localhost:8080/test1/html/checkName.jsp";
var link = url+"?"+data;
$("a").html(link);
$("a").attr("href",link);
});解析：$("input")是选择input的所有。
$("#form").serialize()可以获取到form表单中，所有的name属性，并将这些name拼接在一起，拼接方式为：name1&name2&name3。然后将link的值设为url+"?"+data，这样就完成了三个参数的赋值给url。
通过attr("href",link)，就可以改变a链接的属性href的值。
完成了动态将输入的值传递到参数的实现。
特别注意：input中name属性不可少，不然serialize无法识别。
截图如下：
技术有限，目前对ajax的理解就到这里了，欢迎大家批评指导。谢谢。