AJAX学习（四）

发表于 2023-07-08 分类于计算机学习， AJAX 阅读次数：

AJAX学习（四）

相关学习代码

package com.xiaoguan.bWebServlet;

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("/hello")
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        response.setHeader("Access-Control-Allow-Origin","http://localhost:8080");
        response.setHeader("Access-Control-Allow-Origin","*");//允许全部
        response.getWriter().print("hello ajax!!!");
    }
}

package com.xiaoguan.bWebServlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet("/jsonp1")
public class JsonpServlet1 extends HelloServlet{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        System.out.print("jsonp完成跨域");
//        response.getWriter().print("sayHello()");
        String fun = request.getParameter("fun");
        response.getWriter().print(fun+"({\"name\":\"jsonsp1\"})");
    }
}

package com.xiaoguan.bWebServlet;

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("/jsonp2")
public class JsonpServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String fun = request.getParameter("fun");
        response.getWriter().print(fun+"({\"username\":\"kangkang\"})");
    }
}

package com.xiaoguan.bWebServlet;

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("/jsonp3")
public class JsonpServlet3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String callback = request.getParameter("fun");
        response.getWriter().print(callback+"({\"username\":\"Lily\"})");
    }
}

package com.xiaoguan.bWebServlet;

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("/user/reg")
public class UserRegServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print(username+":"+password);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b应用的index页面</title>
</head>
<body>
<h1>应用b的index页面</h1>
</body>
</html>

1	alert("b应用中的js");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试ajax能否跨域</title>
</head>
<body>
<script type="text/javascript">
  window.onload= () =>{
    document.getElementById("btn").onclick= () =>{
      var xmlHttpRequest = new XMLHttpRequest();
      xmlHttpRequest.onreadystatechange= ()=> {
        if (xmlHttpRequest.readyState == 4) {
          if (xmlHttpRequest.status >= 200||xmlHttpRequest.status<300) {
            document.getElementById("mydiv").innerHTML=xmlHttpRequest.responseText;
          }else {
            alert(xmlHttpRequest.status);
          }
        }
      }
       xmlHttpRequest.open("GET","http://localhost:8081/b/hello",true);
       xmlHttpRequest.send();
      }
  }
</script>
<button id="btn">发送ajax请求</button>
<div id="mydiv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp实现跨域</title>
    <script type="text/javascript">
      function sayHello(data){
        alert("hello,"+data.name);
      }
    </script>
</head>
<body>
<script type="text/javascript" src="http://localhost:8081/b/jsonp1?fun=sayHello"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域</title>
<!--    <script type="text/javascript" src="http://localhost:8081/b/jsonp2?fun=sayHello"></script>-->


</head>
<body>
<script type="text/javascript">
  function sayHello(data){
    document.getElementById("mydiv").innerHTML=data.username;
  }
  window.onload=()=>{
    document.getElementById("mybtn").onclick=()=>{
      var htmlScriptElement = document.createElement("script");
      htmlScriptElement.type="text/javascript";
      htmlScriptElement.src="http://localhost:8081/b/jsonp2?fun=sayHello";
      document.getElementsByTagName("body")[0].appendChild(htmlScriptElement);
    }
  }
</script>
<button id="mybtn">发送jsonp</button>
<div id="mydiv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp的JQuery封装解决ajax跨域问题</title>
</head>
<body>
<script type="text/javascript" src="/a/js/Jquery.js"></script>
<script type="text/javascript">
    function sayHello(data){
        $("#mydiv").html(data.username);
    }
    $(function(){
      $("#btn").click(function (){
        $.ajax({
          type:"GET",
          url:"http://localhost:8081/b/jsonp3",
          dataType:"jsonp",//指定数据类型是jsonp格式
          jsonp:"fun",
          jsonpCallback:"sayHello",
          // success:function (data){
          //   $("#mydiv").html(data.username);
          // }
        })
      })
    })
</script>
<button id="btn">jsonp的JQuery封装解决ajax跨域问题</button>
<div id="mydiv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a应用的index页面</title>
</head>
<body>
<a href="http://localhost:8081/b/index.html">b的index页面</a>
<form action="http://localhost:8081/b/user/reg" method="POST">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="注册">
</form>
<br>
<button onclick="window.location.href='http://localhost:8081/b/index.html'">b的index页面（跨域访问问题）</button>
<script type="text/javascript" src="http://localhost:8081/b/my.js"></script>
</body>
</html>