1. 第一个Ajax请求 6
代码在E:\java学习\Ajax\course\course2\web
ajax1.html
<!--我的第一个ajax get请求 6-->
<!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请求")
//第一步：创建ajax核心对象XMLHttpRequest
var xhr = new XMLHttpRequest();
//第二布：注册回调函数
// 这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
xhr.onreadystatechange = function (){
// 这里的回调函数会被调用多次。
// 0 -> 1 被调用一次
// 1 -> 2 被调用一次
// 2 -> 3 被调用一次
// 3 -> 4 被调用一次
//console.log(xhr.readyState)
// 当XMLHttpRequest对象的readyState的状态是4的时候，表示响应结束了。
//两种写法
//第一种
/*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图层当中，渲染
//提示innerHTML会把后面的内容当作html代码解释执行
//innerText会把后面当作一个普通字符串执行
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
// 第三步：开启通道（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)
//第四步：发送请求
xhr.send()
}
}
</script>
<!--给一个按钮，用户点击这个按钮的时候发送ajax请求-->
<input type="button" value=" hello ajax" id="helloBtn">
<!--给一个div图层，ajax接收了响应的数据之后，在div中进行渲染-->
<div id="mydiv">
</div>
</body>
</html>
com.bjpowernode.ajax.servlet
AjaxRequest1Servlet
package com.bjpowernode.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//我的第一个ajax get请求 6
@WebServlet("/ajaxrequest1")
public class AjaxRequest1Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//Servlet像浏览器响应一段数据
PrintWriter out = response.getWriter();
// out对象向浏览器输出信息
// 服务器的代码实际上和以前的代码还是完全一样的。
// 只不过这个out在响应的时候，浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息。
out.print("welcome to study ajax!!!");
}
}2. 再次熟悉ajax的写法 7
发送AJAX get请求
代码在E:\java学习\Ajax\course\course2\web
ajax2.html
<!--熟悉发送ajax get请求的写法 7-->
<!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 (){
//创建AJAX核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if(this.readyState==4){//只有等于4是表示结束了
if(this.status == 200){//只有等于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)//打印出不正常的状态码
}
}
}
//开启通道
xhr.open("GET","/ajax/ajaxrequest2",true)
//发送请求
xhr.send()
}
}
</script>
<button id="btn">发送ajax get请求</button>
<span id="myspan"></span>
<div id="mydiv"></div> <!--div是独自占一行-->
</body>
</html>
com.bjpowernode.ajax.servlet
AjaxRequest2Servlet
package com.bjpowernode.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//熟悉发送ajax get请求的写法 7
@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("用户名已存在");
}
}2.2 前端的写法改变一种写法 7
代码在E:\java学习\Ajax\course\course2\web
ajax3.html
<!--熟悉发送ajax get请求的写法，改进版 7-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax get请求</title>
</head>
<body>
<script type="text/javascript">
//创建AJAX核心对象
var xhr = new XMLHttpRequest();
window.onload = function (){
document.getElementById("btn").onclick = function (){
//注册回调函数
xhr.onreadystatechange = callback
//开启通道
xhr.open("GET","/ajax/ajaxrequest2",true)
//发送请求
xhr.send()
}
}
//这里相当于把回调函数单独的定义了出来
function callback(){
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById("myspan").innerHTML = xhr.responseText
}else {
alert(xhr.status)
}
}
}
</script>
<button id="btn">发送ajax get请求</button>
<span id="myspan"></span>
<div id="mydiv"></div> <!--div是独自占一行-->
</body>
</html>
3. AJAX get请求如何提交数据呢？ 8
get请求提交数据是在“请求行”上提交，格式是：url?name=value&name=value&name=value....
其实这个get请求提交数据的格式是HTTP协议中规定的，遵循协议即可。
代码在E:\java学习\Ajax\course\course2\web
ajax2.html
<!--熟悉发送ajax get请求的写法 7-->
<!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 (){
//创建AJAX核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if(this.readyState==4){//只有等于4是表示结束了
if(this.status == 200){//只有等于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)//打印出不正常的状态码
}
}
}
//开启通道
//ajax get请求提交的数据 8
//获取用户填写usercode和username
var usercode = document.getElementById("usercode").value
var username = document.getElementById("username").value
xhr.open("GET","/ajax/ajaxrequest2?usercode="+usercode+"&username="+username,true)
//发送请求
xhr.send()
}
}
</script>
<!--ajax get请求提交的数据 8-->
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> <!--div是独自占一行-->
</body>
</html>
com.bjpowernode.ajax.servlet
AjaxRequest2Servlet
package com.bjpowernode.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//熟悉发送ajax get请求的写法 7
@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("用户名已存在");
//获取ajax get请求提交的数据 8
String usercode = request.getParameter("usercode");
String username = request.getParameter("username");
out.print("usercode="+usercode+",username="+username);
}
}
