Merge pull request #11 from JSREI/dev

CC11001100 · web-flow · commit d8b469a4a987 · 2024-12-20T23:29:44.000+08:00
feat: 增加jQuery的测试靶场
diff --git a/src/debugger/debugger.js b/src/debugger/debugger.js
@@ -11,9 +11,9 @@ class Debugger {
      * 创建一个断点
      *
      * @param urlPattern {String | RegExp} 用于与script类型的请求的URL做匹配进入断点，只有这一个是必须指定的
-     * @param enableRequestDebugger {Boolean} 是否开启请求断点，开启请求断点会在请求发送之前进入断点，不指定的话默认开启
-     * @param enableResponseDebugger {Boolean} 是否开启响应断点，开启响应断点会在响应处理之前进入断点，不指定的话默认开启
-     * @param callbackFunctionParamName {String} 传递jsonp回调函数名字的参数，比如 "callback"，如果不指定的话会自动推测
+     * @param enableRequestDebugger {Boolean | null} 是否开启请求断点，开启请求断点会在请求发送之前进入断点，不指定的话默认开启
+     * @param enableResponseDebugger {Boolean | null} 是否开启响应断点，开启响应断点会在响应处理之前进入断点，不指定的话默认开启
+     * @param callbackFunctionParamName {String | null} 传递jsonp回调函数名字的参数，比如 "callback"，如果不指定的话会自动推测
      */
     constructor(urlPattern, enableRequestDebugger = true, enableResponseDebugger = true, callbackFunctionParamName) {
         this.urlPattern = urlPattern;
diff --git a/test/jQuery/jquery.html b/test/jQuery/jquery.html
@@ -2,12 +2,48 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Test jQuery jsonp</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSONP Request Example</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(to right, #ff7e5f, #feb47b); /* 暖色系渐变背景 */
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #requestButton {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
 </head>
 <body>
-<script src=""></script>
-<script type="text/javascript">
-    
+
+<button id="requestButton">发起JSONP请求</button>
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script>
+    $(document).ready(function(){
+        $('#requestButton').click(function(){
+            $.ajax({
+                url: 'http://localhost:10010/',
+                dataType: 'jsonp', // 指定预期的服务器响应数据类型
+                success: function(data) {
+                    // 处理返回的数据
+                    console.log(data);
+                },
+                error: function(err) {
+                    // 处理错误情况
+                    console.error(err);
+                }
+            });
+        });
+    });
 </script>
+
 </body>
-</html>
+</html>
diff --git a/test/jQuery/server.js b/test/jQuery/server.js
@@ -0,0 +1,16 @@
+const http = require("http");
+const url = require("url");
+
+// 测试用的，忽略即可
+
+http.createServer((request, response) => {
+    response.writeHead(200, {"Content-Type": "application/javascript"});
+    const jsonpCallbackFunctionName = url.parse(request.url, true).query.callback;
+    console.log(`jsonpCallbackFunctionName = ${jsonpCallbackFunctionName}`);
+    const result = {
+        "foo": "blablabla",
+        "bar": Math.random()
+    };
+    // 客户端会自动执行这个函数来处理结果
+    response.end(`${jsonpCallbackFunctionName}(${JSON.stringify(result)})`);
+}).listen(10010);
