1. 手动把ajax封装到js库 28
代码在com.bjpowernode.ajax.servlet
AjaxRequest10Servlet
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;
//将ajax代码进行封装，封装到jQuery库当中 28
@WebServlet("/ajaxrequest10")
public class AjaxRequest10Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
//{"uname" : "zhangsan"}
//响应一个json格式的字符串
response.getWriter().print("{\"uname\" : \""+username+"\"}");
}
}
E:\java学习\Ajax\course\course8\web
ajax11.html
<!--将ajax代码进行封装，封装到jQuery库当中 28-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将ajax代码进行封装，封装到jQuery库当中</title>
</head>
<body>
<!--导入js库-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
/*var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(this.readyState==4){
if(this.status==200){
// 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
var jsonObj = JSON.parse(this.responseText);
// 返回的json格式的数据：{"uname" : "zhangsan"}
document.getElementById("mydiv").innerHTML = jsonObj.uname
}
}
}
xhr.open("POST","/ajax/ajaxrequest10",true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
var username = document.getElementById("username").value
xhr.send("username="+username)*/
var username = document.getElementById("username").value
// 调用jQuery的工具类中的ajax方法来发送ajax请求
$.ajax({
type : "POST",
url : "/ajax/ajaxrequest10",
data : "username="+username,
async : true,
// 程序响应回来之后，对于客户端来说要拿到响应的数据，然后解析这个数据，展示到页面上。
success : function (json){
document.getElementById("mydiv").innerHTML = json.uname
}
})
}
}
</script>
<button id="btn">发送ajax请求</button><br>
用户名：<input type="text" id="username"><br>
<div id="mydiv"></div>
</body>
</html>
E:\java学习\Ajax\course\course8\web\js
js库 jQuery-1.0.0.js
// 将jQuery单独写到js文件中使用是引入库 27
/*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
/*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
/*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
//下面这段代码是进行封装
function jQuery(selector){
//根据id获取元素 22
if(typeof selector=="string"){
// selector可能是#id，也可以能是其他的选择器，例如类选择器：.class
if(selector.charAt(0)=="#"){//解释这个selector就是一个变量,#号是封装的线索（也就是传过来的必须是以#号开头）
//selector是一个id选择器
//selector.substring(1)解释，利用substring截取字符串函数将传来的#id，截取留下id
//var domObj = document.getElementById(selector.substring(1));
//注意如果不写var domObj就是一个全局变量 25
domObj = document.getElementById(selector.substring(1));
//返回domObj
//return domObj
//返回jQuery对象
return new jQuery()
}
}
//页面加载完毕后注册回调函数 23
//typeof是判断参数的类型这里的typeof selector=="function"是判断类型是不是函数
if(typeof selector=="function"){
window.onload = selector
}
//定义一个html()函数，代替：domObj.innerHTML = "" 25
this.html = function (htmlStr){
//domObj全局变量
domObj.innerHTML = htmlStr
}
//定义一个click()函数，代替：domObj.onclick = function(){} 25
this.click = function (fun){
domObj.onclick = fun
}
//还可以封装很多事件 25
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
// ....
//封装获取文本框中的用户名的value函数 ，代替domObj.value 26
this.val = function (v){
if(v==undefined){//如果没传参，就返回文本框的输入的
return domObj.value
}else{//传参了，姐把参数赋值
domObj.value = v
}
}
//定义一个静态的方法发送ajax请求 28
/**
* 分析：使用ajax函数发送ajax请求的时候，需要程序员给我们传过来什么？
* 请求的方式(type)：GET/POST
* 请求的URL(url)：url
* 请求时提交的数据(data)：data
* 请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
*/
jQuery.ajax = function (jsonArgs){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(this.readyState==4){
if(this.status==200){
// 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
var jsonObj = JSON.parse(this.responseText);
//调用函数
jsonArgs.success(jsonObj)
}
}
}
if(jsonArgs.type.toUpperCase()=="POST"){
xhr.open("POST",jsonArgs.url,jsonArgs.async)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(jsonArgs.data)
}
if(jsonArgs.type.toUpperCase()=="GET"){
xhr.open("GET",jsonArgs.url+"?"+jsonArgs.data,jsonArgs.async)
xhr.send()
}
}
}
//但是我们嫌jQuery太长，就将jQuery赋值给$符号
$ = jQuery
new jQuery()//这里new一下这个类，是为了保证静态的方法能被调用
2. 全方位测试我们自己开发的jQuery库 29
com.bjpowernode.ajax.servlet
AjaxRequest11Servlet
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.util.Locale;
//测试我们自己写的jQuery库 29
@WebServlet("/ajaxrequest11")
public class AjaxRequest11Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
//{"uname" : "zhangsan"}
//响应一个json格式的字符串
response.getWriter().print("{\"uname\" : \""+username.toUpperCase()+"\"}");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
//{"uname" : "zhangsan"}
//响应一个json格式的字符串
response.getWriter().print("{\"uname\" : \""+username.toLowerCase()+"\"}");
}
}
E:\java学习\Ajax\course\course8\web
ajax12.html
<!--全方位的测试jQuery库 29-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全方位的测试jQuery库</title>
</head>
<body>
<!--引入自己写的jQuery库-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
$(function (){
$("#btn").click(function (){
//发送ajax请求
$.ajax({
//type : "GET",
type : "POST",
url : "/ajax/ajaxrequest11",
data : "username="+ $("#username").val(),
async : true,
success : function (json){
$("#div1").html(json.uname)
}
})
})
})
</script>
<button id="btn">发送ajax get请求</button><br>
用户名:<input type="text" id="username"><br>
<div id="div1"></div>
</body>
</html>
E:\java学习\Ajax\course\course8\web\js
js库 jQuery-1.0.0.js
// 将jQuery单独写到js文件中使用是引入库 27
/*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
/*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
/*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
//下面这段代码是进行封装
function jQuery(selector){
//根据id获取元素 22
if(typeof selector=="string"){
// selector可能是#id，也可以能是其他的选择器，例如类选择器：.class
if(selector.charAt(0)=="#"){//解释这个selector就是一个变量,#号是封装的线索（也就是传过来的必须是以#号开头）
//selector是一个id选择器
//selector.substring(1)解释，利用substring截取字符串函数将传来的#id，截取留下id
//var domObj = document.getElementById(selector.substring(1));
//注意如果不写var domObj就是一个全局变量 25
domObj = document.getElementById(selector.substring(1));
//返回domObj
//return domObj
//返回jQuery对象
return new jQuery()
}
}
//页面加载完毕后注册回调函数 23
//typeof是判断参数的类型这里的typeof selector=="function"是判断类型是不是函数
if(typeof selector=="function"){
window.onload = selector
}
//定义一个html()函数，代替：domObj.innerHTML = "" 25
this.html = function (htmlStr){
//domObj全局变量
domObj.innerHTML = htmlStr
}
//定义一个click()函数，代替：domObj.onclick = function(){} 25
this.click = function (fun){
domObj.onclick = fun
}
//还可以封装很多事件 25
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
// ....
//封装获取文本框中的用户名的value函数 ，代替domObj.value 26
this.val = function (v){
if(v==undefined){//如果没传参，就返回文本框的输入的
return domObj.value
}else{//传参了，姐把参数赋值
domObj.value = v
}
}
//定义一个静态的方法发送ajax请求 28
/**
* 分析：使用ajax函数发送ajax请求的时候，需要程序员给我们传过来什么？
* 请求的方式(type)：GET/POST
* 请求的URL(url)：url
* 请求时提交的数据(data)：data
* 请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
*/
jQuery.ajax = function (jsonArgs){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(this.readyState==4){
if(this.status==200){
// 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
var jsonObj = JSON.parse(this.responseText);
//调用函数
jsonArgs.success(jsonObj)
}
}
}
if(jsonArgs.type.toUpperCase()=="POST"){
xhr.open("POST",jsonArgs.url,jsonArgs.async)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(jsonArgs.data)
}
if(jsonArgs.type.toUpperCase()=="GET"){
xhr.open("GET",jsonArgs.url+"?"+jsonArgs.data,jsonArgs.async)
xhr.send()
}
}
}
//但是我们嫌jQuery太长，就将jQuery赋值给$符号
$ = jQuery
new jQuery()//这里new一下这个类，是为了保证静态的方法能被调用
