jquery框架的ajax请求（附有HTML5代码以及实现） - sdk社区

阅读前，先声明请使用C#的.net或者JAVA的spring框架，因为本人主攻C语言和java的页面，不搞PHP，所以如果C和JAVA都没学过的，可能只有HTML的代码有用，感谢理解。 ajax() 方法简单易用的高层实现有$.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。最简单的情况下，$.ajax() 可以不带任何参数直接使用。 语法：

jQuery.ajax([settings])

补充：[settings]用于配置 Ajax 请求的键值对集合，且可以为空。注意：我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。 举个实际的例子： 假入我们把传递给 spring 的控制器一个字符串，然后用服务器的返回值作为弹窗结果显示出来，该怎么操作呢？首先：html先进行ajax的书写，为了方便大家阅读，我将注释打在了每个代码的旁边。以下是HTML5的页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="??" method="get">
    <input type="text" value="用户名" onclick="checkUserName()" id="userName">
    <input type="text" value="密码" id="passWord">
    <input type="submit" value="提交">
</form>
</body>
<script type="text/javascript" src="../static/js/jquery-3.5.1.js">
</script>
<script>
    var ajaxStar = "";
    function checkUserName(){
        ajaxStar = getXmlHttpObject();
        if( ajaxStar ){
            alert("引擎success");
            //通过ajax请求时，第一个参数为请求方式get或者post。第二个参数为url
            //第三个参数表示是否使用异步机制
            // var url = "http://127.0.0.1:8080/ajaxTest?userName="+$("userName").value;//get
            var url = "http://127.0.0.1:8080/ajaxTest";//post
            // alert(url);
            // ajaxStar.open("get",url,true);
            ajaxStar.open("post",url,true);
            //设置请求方式
            // 如果想要使用post提交数据,必须添加此行
            ajaxStar.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // ajaxStar.setRequestHeader("cache-control", "no-cache");
            //指定回调函数
            ajaxStar.onreadystatechange=dealFunction;
            // ajaxStar.send(null);//get填空，post填数据
            var userNameString = $("userName").value;
            // alert(userNameString);
            ajaxStar.send( "userName="+ userNameString);
        }
        else{
            alert("引擎error");
        }
    }
    //创建ajax引擎
    function getXmlHttpObject(){
        var xmlHttpRequest;
        if(window.ActiveXObject){
            // alert("ie用户欢迎您");
            xmlHttpRequest = new ActiveXObject( "Microsoft.XMLHTTP" );
        }
        else{
            // alert("非ie用户欢迎您");
            xmlHttpRequest = new XMLHttpRequest();
        }
        return xmlHttpRequest;
    }
    function $(id){
        return document.getElementById(id);
    }
    function dealFunction(){
        alert("处理函数被调用" + ajaxStar.readyState);
        //readyState:4的原因 0初始化，1未读取，2读取中，3交互中，4完成
        //但是html5测试结果只有1次，数字是4
        //status:200——交易成功
        if( ajaxStar.readyState == 4 && ajaxStar.status == 200 ){
            alert("服务器返回" + ajaxStar.responseText);
        }
    }
</script>
</html>

因为ajax的异步刷新主要用于前后端交互，所以我用spring框架的控制器作为服务器端代码书写：

package com.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
public class PageBrowserController {

     @RequestMapping("/ajaxTest")
     @ResponseBody
     //返回json的写法
//     public Map ajaxTest(String userName){
//         Map jsonMap = new HashMap();
//         jsonMap.put("userName",userName);
//         System.out.println(userName);
//         return jsonMap;
//     }
     /*
     * 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,
     * 而客户端使用post请求时,服务器端使用Request.Form来获取参数.
     * */
    public String ajaxTest(@RequestParam("userName") String userName,
                           HttpServletRequest request,
                           HttpServletResponse response){
//        System.out.println(userName);
        String curOrigin = request.getHeader("Origin");
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Access-Control-Allow-Origin",
                curOrigin == null ? "true" : curOrigin);
        response.setHeader("Access-Control-Allow-Credentials",
                "true");
        response.setHeader("Access-Control-Allow-Methods",
                "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept");
        return userName;
    }

     @RequestMapping("/ajaxReq")
//     @ResponseBody
     public String ajaxReq(){
         return "ajax请求.html";
     }

}

运行结果： 在这里插入图片描述