Ajax实现
原始js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function createxmlhttp(){
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
window.onload=function () {
//点击事件
document.getElementById("btn").onclick=function () {
//请求参数如何被传递？ 服务器响应内容如果被接收？
//发送ajax（异步请求）请求步骤：
//1.创建XMLHttpRequest对象
var xmlhttp=createxmlhttp();
//2.建立连接 里面参数：1.请求方式 2.请求的路径 3.判断是否是异步 true表是异步是真 false表示不是
xmlhttp.open("GET","/tomcat/servletAJAXDemo1",true);
//3.发送请求
xmlhttp.send();
}
}
</script>
</head>
<body>
<!--点击这个按钮无需加载整个网页就可以对局部或者部分进行刷新，将内容展现在下面的div中-->
<button id="btn">发送异步请求</button><br/>
<div></div>
</body>
</html>
package com.swlz.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/servletAJAXDemo1")
public class ServletAJAXDemo1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
System.out.println("hi"+username);
System.out.println("servletAJAXDemo1......被访问了哦。。。。。。。。。。。");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
jquery实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
/**
* 1.请求方式
* 2.请求路径
* 3.请求参数
* 4.响应数据
*/
$(function () {
$("#btn").click(function () {
// $.get("/ajaxServlet","username=bianyiit")
$.get("/ajaxServlet",{username:"tom",password:"123"},function (data) {
$("#div1").html(data)
})
});
$("#btn1").click(function () {
$.post("/ajaxServlet",{username:"tom",password:"123"},function (data) {
$("#div1").html(data)
})
});
})
</script>
</head>
<body>
<button id="btn"> 发送get异步请求</button><br>
<button id="btn1"> 发送post异步请求</button><br>
<input type="text"> <br>
<div id="div1">
</div>
</body>
</html>
三种方式：
$.ajax();
$.get();
$.post();
Jquery对象发送异步请求常用的三种方式 $.ajax $.post $.get
1.$.ajax是jquery发送异步请求的基本方式
$.ajax能够设置http请求的各种请求信息
2.$.get和$.post是基于$.ajax封装的更加简单的异步请求方式
$.get和$.post只能发送普通的表单类型请求
Json Json：JavaScript1. Json基本介绍
javaScript对象表示法
JavaScript ：
ECMAScript(核心语法) + DOM(文档对象模型) + BOM（浏览器对象模型）