目录:
(1)js按钮实现绑定事件:
(2)ajax发送get请求详细过程:
(3)ajax Get请求提交数据:
(4) Http状态信息总结
(1)js按钮实现绑定事件:
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>先能看懂下面这个代码,再学习AJAX。</title>
</head>
<body>
<script type="text/javascript">
function sayHello(){
alert("hello javascript")
}
</script>
<!--需求:页面上有一个按钮,用户点击按钮之后,执行一段JS代码。-->
<input type="button" value="hello" onclick="sayHello()">
<!--以上的实现方式,当然,大家都是没有问题的,但是通过JS代码给按钮绑定事件,这个你会吗?-->
<input type="button" value="hello2xxxxxxxxxxxxxxx" id="helloBtn">
<script type="text/javascript">
// 页面加载完毕之后,给id="helloBtn"的元素绑定鼠标单击事件
// 这个function就是一个回调函数,这个回调函数什么时候执行?当load事件发生之后,这个回调函数才会执行。
// 什么是load事件?load事件什么时候发生?注意:页面加载完毕之后,load事件发生。
window.onload = function(){
// 获取id="helloBtn"的对象
var helloBtn = document.getElementById("helloBtn");
// 给id="helloBtn"元素绑定click事件
// 这个function也是一个回调函数,这个回调函数什么时候执行?
// 当helloBtn被click的时候,被鼠标单击的时候,这个回调函数会执行。
// 鼠标单击五次,这个回调函数就会被调用五次。
helloBtn.onclick = function(){
//alert("hello javascript2")
//alert(this)
// 这个回调函数中的this是谁呢?
// this是发生事件的事件源对象。是按钮发生了鼠标单击,那么this代表的就是这个按钮对象。
alert(this.value)
}
}
</script>
</body>
</html>
点击hello
点击hello2xxxxxxxx
Ajax发送请求需要一个核心的对象:XMLHttpRequest对象,浏览器内置了这个对象,现代浏览器都是支持的
readyState: 表明请求和响应的处理过程
(2)ajax发送get请求详细过程:
ajaxGet.html:分为4步过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax get请求</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById("helloBtn").onclick = function (){
// 发送ajax get请求
//console.log("发送ajax get请求")
// 1.第一步:创建AJAX核心对象XMLHttpRequest
var xhr = new XMLHttpRequest();
// 2.第二步:注册回调函数
// 这是一个回调函数,这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
xhr.onreadystatechange = function (){
// 这里的回调函数会被调用多次。
// 0 -> 1 被调用一次
// 1 -> 2 被调用一次
// 2 -> 3 被调用一次
// 3 -> 4 被调用一次
//console.log(xhr.readyState) 会输出0-4
// 当XMLHttpRequest对象的readyState的状态是4的时候,表示响应结束了。下方的this表示xhr
/*if (xhr.readyState == 4) {
}*/
if (this.readyState == 4) {
// 响应结束了。
//console.log("响应结束了")
// 响应结束之后,一般会有一个HTTP的状态码。
// HTTP状态码常见的包括:200表示成功了,404表示资源找不到,500表示服务器内部错误。
// HTTP状态码是HTTP协议的一部分,HTTP协议中规定的。服务器响应之后都会有一个状态码。
// 获取HTTP状态码
//console.log("HTTP响应状态码:" + this.status)
if (this.status == 404) {
alert("对不起,您访问的资源不存在,请检查请求路径")
} else if(this.status == 500){
alert("对不起,服务器发生了严重的内部错误,请联系管理员")
} else if(this.status == 200){
//alert("响应成功,完美")
// 200表示完全响应完毕,成功结束了。
// 通过XMLHttpRequest对象获取响应的信息。
// 通过XMLHttpRequest对象的responseText属性来获取响应的信息。
//alert(this.responseText)
// 把响应信息放到div图层当中,渲染
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
// 3.第三步:开启通道(open只是浏览器和服务器建立连接,通道打开,并不会发送请求)
// XMLHttpRequest对象的open方法
// open(method, url, async, user, psw)
// method: 请求的方式,可以是GET,也可以是POST,也可以是其它请求方式。
// url:请求的路径
// async: 只能是true或者false,true表示此ajax请求是一个异步请求,false表示此ajax请求是一个同步请求。(大部分请求都是true,要求异步。极少数情况需要同步,以后再说。)
// user:用户名 pwd: 密码,用户名和密码是进行身份认证的,说明要想访问这个服务器上的资源,可能需要提供一些口令才能访问。需不需要用户名和密码,主要看服务器的态度。
xhr.open("GET", "/ajax/ajaxrequest1", true);
// 4.第四步:发送请求
xhr.send()
}
}
</script>
<!--给一个按钮,用户点击这个按钮的时候发送ajax请求-->
<input type="button" value="hello ajax" id="helloBtn">
<!--给一个div图层,ajax接收了响应的数据之后,在div中进行渲染。-->
<div id="mydiv"></div>
</body>
</html>
AjaxRequestServlet:
package com.bjpowernode.ajax.servlet;
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;
import java.io.PrintWriter;
@WebServlet("/ajaxrequest1")
public class AjaxRequestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*String s = null;
s.toString();
返回500
*/
// Servlet向浏览器响应一段数据
PrintWriter out = response.getWriter();
// out对象向浏览器输出信息
// 服务器的代码实际上和以前的代码还是完全一样的。
// 只不过这个out在响应的时候,浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息。
out.print("<font color='red'>welcome to study ajax!!!!</font>");
}
}
点击按钮:
ajaxGet3.html:单独写一个函数callback,然后再调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax get请求</title>
</head>
<body>
<script type="text/javascript">
//1. 创建AJAX核心对象
var xhr = new XMLHttpRequest();
window.onload = function () {
document.getElementById("btn").onclick = function () {
//2. 注册回调函数
xhr.onreadystatechange = callback
//3. 开启通道
xhr.open("GET", "/ajax/ajaxrequest2", true)
//4. 发送请求
xhr.send()
}
}
function callback(){
if(xhr.readyState == 4){
if (xhr.status == 200) {
document.getElementById("mydiv").innerHTML = xhr.responseText
}else{
alert(xhr.status)
}
}
}
</script>
<button id="btn">发送ajax get请求</button>
<div id="mydiv"></div>
</body>
</html>
AjaxRequest22Servlet:
package com.bjpowernode.ajax.servlet;
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;
import java.io.PrintWriter;
@WebServlet("/ajaxrequest22")
public class AjaxRequest22Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置响应的内容类型以及字符集
response.setContentType("text/html;charset=UTF-8");
// 获取响应流
PrintWriter out = response.getWriter();
// 响应
out.print("<font color='red'>用户名已存在!!!</font>");
}
}
(3)ajax Get请求提交数据:
ajaxGet2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax get请求</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
//1. 创建AJAX核心对象
var xhr = new XMLHttpRequest();
//2. 注册回调函数
xhr.onreadystatechange = function(){
if (this.readyState == 4) {
if (this.status == 200) {
// 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
// 并且不管服务器响应回来的是什么,都以普通文本的形势获取。(服务器可能响应回来:普通文本、XML、JSON、HTML...)
// innerHTML属性是javascript中的语法,和ajax的XMLHttpRequest对象无关。
// innerHTML可以设置元素内部的HTML代码。(innerHTML可以将后面的内容当做一段HTML代码解释并执行)
//document.getElementById("myspan").innerHTML = this.responseText
document.getElementById("mydiv").innerHTML = this.responseText
// innerText也不是AJAX中的,是javascript中的元素属性,和XMLHttpRequest无关。
// innerText也是设置元素中的内容,但是即使后面是一段HTML代码,也是将其看做一个普通字符串设置进去。
//document.getElementById("myspan").innerText = this.responseText
}else{
alert(this.status)
}
}
}
//3. 开启通道
// 获取到用户填写的usercode和username
var usercode = document.getElementById("usercode").value
var username = document.getElementById("username").value
//xhr.open("GET", "/ajax/ajaxrequest2?usercode="+usercode+"&username="+username, true)
// 避免低版本的IE浏览器,走缓存,搞一个时间戳
//alert(new Date().getTime())
//xhr.open("GET", "/ajax/ajaxrequest2?t="+new Date().getTime()+"&usercode="+usercode+"&username="+username, true)
//或者加一个随机数,解决缓存问题
xhr.open("GET", "/ajax/ajaxrequest2?t="+Math.random()+"&usercode="+usercode+"&username="+username, true)
//4. 发送请求
xhr.send()
}
}
</script>
usercode<input type="text" id="usercode"><br>
username<input type="text" id="username"><br>
<button id="btn">发送ajax get请求</button>
<span id="myspan"></span>
<div id="mydiv"></div>
</body>
</html>
控制器:AjaxRequest2Servlet:
package com.bjpowernode.ajax.servlet;
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;
import java.io.PrintWriter;
@WebServlet("/ajaxrequest2")
public class AjaxRequest2Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置响应的内容类型以及字符集
response.setContentType("text/html;charset=UTF-8");
// 获取响应流
PrintWriter out = response.getWriter();
// 响应
//out.print("<font color='red'>用户名已存在!!!</font>");
// 获取ajax get请求提交的数据
String usercode = request.getParameter("usercode");
String username = request.getParameter("username");
out.print("usercode=" + usercode + ", username=" + username);
}
}
(4) Http状态信息总结