本文介绍了AJAX的基础知识，包括异步概念、JavaScript原生的AJAX用法，详细讲解了GET和POST请求以及响应处理。还展示了使用jQuery简化AJAX操作，实现用户名注册验证和导航栏搜索功能的应用示例。
目录
列：使用Js（JavaScript）原生Ajax，发送get和post请求
列：使用Jquery的Ajax ，发送get，post，ajax请求
列：使用js原生ajax的get请求，实现查看用户名是否被注册
列：使用js中ajax post请求，实现查看用户名是否被注册
列：使用js的ajax中的post方法 ，实现查看用户名是否被注册
列：使用jquery的ajax 的post方法实现注册时判断用户名是否存在
列： 使用jquery中ajax的post方法实现导航栏中的搜索
零散知识回顾
<script type="text/javascript">
window.onload = function(){
//修改li中的aa
document.getElementById("myul").getElementsByTagName("li")[0].innerHTML = "yy";
}
</script>
</head>
<body>
<ul id="myul">
<li>aa</li>
</ul>
</body>AJAX学习网站
www.runoob.com/ajax/ajax-tutorial.html
- AJAX = Asynchronous JavaScript and XML（ajax=异步+ JavaScript+XML）。
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容（局部刷新）。
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
Ajax的优点:实现局部刷新功能
Ajax的核心对象—XMLHttpRequest对象
- 发送请求
- 接收响应信息
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
什么是同步、异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死
javaScript原生的Ajax技术
get请求
注： xmlhttp.open("GET","/try/ajax/demo_get.php",true);中true规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
方法1：得到缓存的结果
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
方法2：
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
方法3：发送信息
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();post请求
简单的post请求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定您希望发送的数据
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");响应
服务器响应
用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
- responseText 获取字符串形式的响应
- responeXML 获取xml形式的响应数据
responeText属性
如果来自服务器的响应并非 XML，请使用 responseText 属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;responeXML属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;列：使用Js（JavaScript）原生Ajax，发送get和post请求
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.getWriter().write("zhangsan");
/*try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
String parameter = request.getParameter("name");
response.getWriter().write(Math.random()+parameter);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fn1(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
// readyState 0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
//status 200: "OK" 404: 未找到页面
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
}
}
//3、绑定地址 open(请求的类型；GET 或 POST, url, async：true（异步）或 false（同步);
xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
//4、发送请求
xmlHttp.send();
}
function fn2(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span2").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("POST","/WEB22/ajaxServlet",false);
//4、发送请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=wangwu");
}
</script>
</head>
<body>
<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
</body>
</html>Jquery的Ajax
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种
- $.get(url, [data], [callback], [type])
- $.post(url, [data], [callback], [type])
其中：
- url：代表请求的服务器端地址
- data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
- callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
- type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
- $.ajax( { option1:value1,option2:value2... } );
常用的option有如下：
- async：是否异步，默认是true代表异步
- data：发送到服务器的参数，建议使用json格式
- dataType：服务器端返回的数据类型，常用text和json
- success：成功响应执行的函数，对应的类型是function类型
- type：请求方式，POST/GET
- url：请求服务器端地址
列：使用Jquery的Ajax ，发送get，post，ajax请求
public class AjaxServlet2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name+" "+age);
//java代码只能返回一个json格式的字符串
response.setContentType("text/html;charset=UTF-8");
//write("{"name\":"汤姆","age":21}") 数据格式前加\
response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");//使用json响应数据
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function fn1(){
//get异步访问
$.get(
"/WEB22/ajaxServlet2", //url地址
{"name":"张三","age":25}, //请求参数
function(data){ //执行成功后的回调函数
//{\"name\":\"tom\",\"age\":21}
alert(data.name);
},
"json"
);
}
function fn2(){
//post异步访问
$.post(
"/WEB22/ajaxServlet2", //url地址
{"name":"李四","age":25}, //请求参数
function(data){ //执行成功后的回调函数
alert(data.name);
},
"json"
);
}
function fn3(){
$.ajax({
url:"/WEB22/ajaxServlet2",
async:true,
type:"POST",
data:{"name":"lucy","age":18},
success:function(data){
alert(data.name);
},
error:function(){
alert("请求失败");
},
dataType:"json"
});
}
</script>
</head>
<body>
<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
<br>
<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
<br>
</body>
</html>列：使用js原生ajax的get请求，实现查看用户名是否被注册
创建ajax.jsp文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlhttp;
function createXMLhttpRequest(){
xmlhttp=new XMLHttpRequest(); //创建ajax的核心对象
}
function check(){
var userName=document.getElementById("username").value;
createXMLhttpRequest();
xmlhttp.open("get","ajax.do?username="+userName);//请求
xmlhttp.send(null); //发送内容
xmlhttp.onreadystatechange=callBack;
}
//接受服务器响应就绪
function callBack(){
//xmlhttp.readyState==4 && xmlhttp.status==200响应已就绪
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//接收响应数据
var content=xmlhttp.responseText; //服务器以字符串方式的返回
//alert(content+"****")
var message=document.getElementById("message");
message.innerHTML="<font color='red'>"+content+"</font>";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username"><span id="message"></span>
<input type="button" id="btn" value="检查" onclick="check();"/>
</body>
</html>创建AjaxServlet.java文件
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 AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
//ajax.do
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
String userName=request.getParameter("username");
String result=null;
if("aaa".equals(userName)){
result=userName+"巳注册";
}else{
result=userName+"可以使用";
}
System.out.println(result);
out.print(result); //响应输出客户端
out.flush();
out.close();
}
}
列：使用js中ajax post请求，实现查看用户名是否被注册
ajax2.jsp文件
<script type="text/javascript">
var xmlhttp;
function createXMLhttpRequest(){
xmlhttp=new XMLHttpRequest(); //创建ajax的核心对象
}
function check(){
var userName=document.getElementById("username").value;
createXMLhttpRequest();
xmlhttp.open("post","ajax.do",true);
//设置响应头信息
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username="+userName);
xmlhttp.onreadystatechange=callBack;
}
//接受服务器响应就绪
function callBack(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//接收响应数据
var content=xmlhttp.responseText; //服务器以字符串方式的返回
//alert(content+"****")
var message=document.getElementById("message");
message.innerHTML="<font color='red'>"+content+"</font>";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username"><span id="message"></span>
<input type="button" id="btn" value="检查" onclick="check();"/>
</body>AjaxServlet.java 使用post方法来传输数据
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
//ajax.do
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
String userName=request.getParameter("username");
String result=null;
if("liayin".equals(userName)){
result=userName+"巳注册";
}else{
result=userName+"可以使用";
}
System.out.println(result);
out.print(result); //输出客户端
out.flush();
out.close();
}
//ajax.do
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
this.doGet(req, resp);
}
}
列：使用js的ajax中的post方法 ，实现查看用户名是否被注册
首选需要导入json2.js文件和导入json相关包
json.jsp文件
<title>Insert title here</title>
<script type="text/javascript">
var xmlhttp;
function createXMLhttpRequest(){
xmlhttp=new XMLHttpRequest(); //创建ajax的核心对象
}
function check(){
var userName=document.getElementById("username").value;
createXMLhttpRequest();
xmlhttp.open("get","json.do?username="+userName);
xmlhttp.send(null); //发送内容
xmlhttp.onreadystatechange=callBack;
}
//接受服务器响应就绪
function callBack(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//接收响应数据
var content=xmlhttp.responseText; //服务器以字符串方式的返回
//alert(content+"****")
var obj=JSON.parse(content); //键context转化为json对象
alert(obj)
var message=document.getElementById("message");
//输出json对象的username
message.innerHTML="<font color='red'>"+obj.username+"</font>";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username"><span id="message"></span>
<input type="button" id="btn" value="检查" onclick="check();"/>
</body>JsonServlet.java
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;
import net.sf.json.JSONObject;
public class JsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");//设置响应编码
response.setContentType("application/x-json"); //设置响应类型
PrintWriter out=response.getWriter();//获取响应的流
String username=request.getParameter("username");//获取参数值
JSONObject jsonObject=new JSONObject();//创建json对象
if("laowang".equals(username)){
jsonObject.put("username", "巳被注册");
}else{
jsonObject.put("username", "可以使用");
}
System.out.println(jsonObject.toString());
out.println(jsonObject); //输出客户端
out.flush();
out.close();
}
}列：使用jquery的ajax 的post方法实现注册时判断用户名是否存在
<form class="form-horizontal" style="margin-top: 5px;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username"
placeholder="请输入用户名">
<span id="usernameInfo"></span>
</div>
。。。。。。
</form>
<script type="text/javascript">
$(function(){
//为输入框绑定事件 blur失去焦点监听事件
$("#username").blur(function(){
//1、失去焦点获得输入框的内容
var usernameInput = $(this).val();
//2、去服务端校验该用户名是否存在---ajax
$.post(
"${pageContext.request.contextPath}/checkUsername",//a.url地址
{"username":usernameInput}, //b.请求参数
function(data){ //c.执行成功后的回调函数
var isExist = data.isExist;
//3、根据返回的isExist动态的显示信息
var usernameInfo = "";
if(isExist){
//该用户存在
usernameInfo = "该用户名已经存在";
$("#usernameInfo").css("color","red");
}else{
usernameInfo = "该用户可以使用"
$("#usernameInfo").css("color","green");
}
$("#usernameInfo").html(usernameInfo); //将获取到的值在页面中显示出来
},
"json"
);
});
});
</script>UserDao.java
public class UserDao {
public Long checkUsername(String username) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select count(*) from user where username=?";
Long query = (Long) runner.query(sql, new ScalarHandler(), username);
return query;
}
}UserService.java
public class UserService {
public boolean checkUsername(String username) throws SQLException {
UserDao dao = new UserDao();
Long isExist = dao.checkUsername(username);
return isExist>0?true:false;
}
}CheckUsernameServlet.java
public class CheckUsernameServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获得要校验的用户名
String username = request.getParameter("username");
//传递username到service
UserService service = new UserService();
boolean isExist = false;
try {
isExist = service.checkUsername(username);
} catch (SQLException e) {
e.printStackTrace();
}
response.getWriter().write("{\"isExist\":"+isExist+"}");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}列： 使用jquery中ajax的post方法实现导航栏中的搜索
html
<form class="navbar-form navbar-right" role="search">
<div class="form-group" style="position:relative">
<input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
<div id="showDiv"
style="display:none; position:absolute;z-index:1000;background:#fff; width:179px;border:1px solid #ccc;">
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- 完成异步搜索 -->
<script type="text/javascript">
//单鼠标移入下拉列表框时，实行变色
function overFn(obj){
$(obj).css("background","#DBEAF9");
}
//单鼠标移出下拉列表框时，恢复为原来的白色
function outFn(obj){
$(obj).css("background","#fff");
}
//当点击搜索下拉列表时 ,将值传到搜索框并隐藏搜索下拉列表
function clickFn(obj){
$("#search").val($(obj).html());
$("#showDiv").css("display","none");
}
function searchWord(obj){
//1、获得输入框的输入的内容
var word = $(obj).val();
//2、根据输入框的内容去数据库中模糊查询---List<Product>
var content = "";
$.post(
"${pageContext.request.contextPath}/searchWord",//url
{"word":word}, //请求参数
function(data){
//3、将返回的商品的名称 现在showDiv中
//[{"pid":"1","pname":"小米 4c 官方版","market_price":8999.0,"shop_price":8999.0,"pimage":"products/1/c_0033.jpg","pdate":"2016-08-14","is_hot":1,"pdesc":"小米 4c 标准版 全网通 白色 移动联通电信4G手机 双卡双待 官方好好","pflag":0,"cid":"1"}]
if(data.length>0){
for(var i=0;i<data.length;i++){
content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
}
$("#showDiv").html(content);
$("#showDiv").css("display","block");
}
},
"json"
);
}
</script>导入Gson包
ProductDao
public List<Object> findProductByWord(String word) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
//根据名称查询商品表，只显示8条数据
String sql = "select * from product where pname like ? limit 0,8";
List<Object> query = runner.query(sql, new ColumnListHandler("pname"), "%"+word+"%");
return query;
}ProductService
//根据关键字查询商品
public List<Object> findProductByWord(String word) throws SQLException {
ProductDao dao = new ProductDao();
return dao.findProductByWord(word);
}SearchWordServlet
public class SearchWordServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获得关键字
String word = request.getParameter("word");
//查询该关键字的所有商品
ProductService service = new ProductService();
List<Object> productList = null;
try {
productList = service.findProductByWord(word);
} catch (SQLException e) {
e.printStackTrace();
}
//["xiaomi","huawei",""...]
//使用json的转换工具将对象或集合转成json格式的字符串
/*JSONArray fromObject = JSONArray.fromObject(productList);
String string = fromObject.toString();
System.out.println(string);*/
Gson gson = new Gson();
String json = gson.toJson(productList);
System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
扫一扫
1743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
