目录：
（1）将ajax请求封装到jQuery库中
（2）全方位测试自己写的jQuery库
（1）将ajax请求封装到jQuery库中
把原来在html页面中写的ajax请求代码，封装到一个js文件中，等以后调用的时候直接调用方法就行了，来简化开发
封装的jQuery库：jQuery-1.0.0.js:
function jQuery(selector){
if (typeof selector == "string") {
if (selector.charAt(0) == "#") {
domObj = document.getElementById(selector.substring(1))
return new jQuery()
}
}
if (typeof selector == "function") {
window.onload = selector
}
this.html = function(htmlStr){
domObj.innerHTML = htmlStr
}
this.click = function(fun){
domObj.onclick = fun
}
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
this.val = function(v){
if (v == undefined) {
return domObj.value
}else{
domObj.value = v
}
}
// 静态的方法，发送ajax请求 静态的方法也需要把对象创建出来
/**
* 分析：使用ajax函数发送ajax请求的时候，需要程序员给我们传过来什么？
* 请求的方式(type)：GET/POST
* 请求的URL(url)：url
* 请求时提交的数据(data)：data
* 请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
*/
//接收的是一个json字符串参数
jQuery.ajax = function(jsonArgs){
// 1.
var xhr = new XMLHttpRequest();
// 2.
xhr.onreadystatechange = function(){
if (this.readyState == 4) {
if (this.status == 200) {
// 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
var jsonObj = JSON.parse(this.responseText)
// 调用函数
jsonArgs.success(jsonObj)
}
}
}
//如果是POST请求，如果传递的是小写转换为大写
if (jsonArgs.type.toUpperCase() == "POST") {
// 3.
xhr.open("POST", jsonArgs.url, jsonArgs.async)
// 4.
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send(jsonArgs.data)
}
//如果是GET请求，如果传递的是小写转换为大写
if (jsonArgs.type.toUpperCase() == "GET") {
xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async)
xhr.send()
}
}
}
$ = jQuery
// 这里有个细节，执行这个目的是为了让静态方法ajax生效。 上面有jQuery.ajax静态方法，需要new jQuery否则静态方法不起作用
new jQuery()
ajax11.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将AJAX代码进行封装，封装到jQuery库当中</title>
</head>
<body>
<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 (){
/*// 1.
var xhr = new XMLHttpRequest();
// 2.
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
}
}
}
// 3.
xhr.open("POST", "/ajax/ajaxrequest10", true)
// 4.
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
var username = document.getElementById("username").value
xhr.send("username=" + username)*/
// 调用jQuery的工具类中的ajax方法来发送ajax请求
var username = document.getElementById("username").value
$.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>AjaxRequest10Servet:
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;
/**
* @program: 代码
* @ClassName: AjaxRequest10Servet
* @version: 1.0
* @description: 将AJAX请求封装到jQuery当中
* @author: bjpowernode
* @create:
**/
@WebServlet("/ajaxrequest10")
public class AjaxRequest10Servet 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"}
response.getWriter().print("{\"uname\" : \""+username+"\"}");
}
}
输入内容，点击发送ajax请求
（2）全方位测试自己写的jQuery库
通过自己写的jQuery库前端就变得很简单了
ajax12.html
<!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(){
$("#btn1").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="btn1">发送ajax请求</button><br>
用户名：<input type="text" id="username"><br>
<div id="div1"></div>
</body>
</html>AjaxRequest11Servlet：
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.util.Locale;
/**
* @program: 代码
* @ClassName: AjaxRequest11Servlet
* @version: 1.0
* @description: 测试自己写的jQuery库
* @author: bjpowernode
* @create:
**/
@WebServlet("/ajaxrequest11")
public class AjaxRequest11Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
response.setContentType("text/html;charset=UTF-8");
// {"uname":"zhangsan"}
response.getWriter().print("{\"uname\":\""+username.toUpperCase()+"\"}");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
response.setContentType("text/html;charset=UTF-8");
// {"uname":"zhangsan"}
response.getWriter().print("{\"uname\":\""+username.toLowerCase()+"\"}");
}
}
type : "GET"请求时：
输入点击发送ajax get请求
当type : "POST"请求时：
