手写的JQuery
// 封装一个函数,通过这个函数就可以获取页面中的元素了
function JQuery(selector)//可能时#id或者.class这样的类选择器
{
if(typeof selector === "string")
{
// 设计思路根据CSS语法
if (selector.charAt(0) === "#")
{
// 根据ID获取元素
//这个是全局对象,是根据我们的ID获取的dom对象
IE = document.getElementById(selector.substring(1));
//返回JQuery对象,这个有html方法
return new JQuery();
}
}
if(typeof selector === "function")
{
window.onload = selector;
}
//定义一个HTML方法
this.html = function(htmlStr)
{
IE.innerHTML = htmlStr;
}
//定义一个click函数代替onclick方法
this.click = function(fun)
{
IE.onclick = fun;
}
//由此可知
this.val = function(value)
{
if(value === undefined)
{
return IE.value;
}
else
{
IE.value = value;
}
}
//定义一个静态方法用来发送AJAX请求
//JS中的静态方法也还是需要有这个对象的
//传递参数如下,1.传递的数据2.请求方法3.url地址4.是否异步执行
JQuery.ajax = function(JsonArgs)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (this.readyState === 4)
{
if (this.status === 200)
{
var JsonObj = JSON.parse(this.responseText);
JsonArgs.success(JsonObj);
}
else
{
alert(this.status);
}
}
}
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")
{
JsonArgs.type = "GET";
xhr.open("GET",JsonArgs.url+"?"+JsonArgs.data,JsonArgs.async);
xhr.send();
}
}
}
$ = JQuery;
//执行这个的目的是为了让静态方法能生效
new JQuery();
测试页面A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ</title>
<script src="JS/jQuery-1.0.0.js"></script>
</head>
<body>
<script type="text/javascript">
function User(userCode,username)
{
this.userCode = userCode;
this.username = username;
this.doSome = function()
{
console.log(this.userCode,this.username);
}
}
$(function()
{
$("#btn").click(function()
{
$("#myDiv").html("<font color='red'>哈哈哈</font>");
var user = new User(111,"Tom");//创建对象,堆中分配空间
// User();//当作函数,不创建对象,堆中没有这个对象
user.doSome();
User.prototype.getUser = function()
{
alert(this.username);
}
// user.getUser();
});
$("#MyBtn").click
(function()
{
$.ajax({
type : "gEt",
url : "resp",
data : "username=" + $("#username").val(),
async : true,
success : function(value){
console.log(value);
$("#myClass").html(value.name);
}
})
$("#username").val("获取了");
});
$("#Hello").click(function(){
alert($("#uio").val());
})
});
</script>
<button id="btn">显示信息</button>
<div id="myDiv"></div>
<input name="aiHao" type="checkbox">
<input name="username" id="username" type="text">
<button id="MyBtn">按下</button>
<span id="myClass"></span>
<button id="Hello">Hello</button>
<input id="uio" type="text">
<span class="myClass"></span>
</body>
</html>
测试页面B
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq</title>
</head>
<body>
<script type="text/javascript" src="JS/jQuery-1.0.0.js"></script>
<script type="text/javascript">
$(function()
{
$("#btn").click(function()
{
$.ajax({
type : "POST",
url : "/ajax/resp",
data : "username=" + $("#username").val(),
async : true,
//对于程序响应回来如何解析
success : function(JsonObj)
{
//这里的JSON就是响应回来的数据了
console.log(JsonObj);
$("#myDiv").html(JsonObj.name);
}
});
});
});
</script>
<button id="btn">发送AJAX请求</button>
用户名:<input type="text" id="username">
<div id="myDiv"></div>
</body>
</html>
后端信息处理页面
package com.bjpowernode.AJAX.servlet;
import com.alibaba.fastjson.JSON;
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;
@WebServlet("/resp")
public class resp extends HttpServlet
{
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
Student student = new Student(1L,username,20,"BeiJing");
System.out.println(student);
response.getWriter().println(JSON.toJSONString(student));
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
Student student = new Student(1L,username,20,"BeiJing");
System.out.println(student);
response.getWriter().println(JSON.toJSONString(student));
}
}