原生Ajax学习笔记_要学习原生ajax吗-CSDN博客

本文链接：https://blog.csdn.net/Xx9437/article/details/106266581

很早之前也接触过Ajax，用的是JQuery里封装的Ajax，用起来十分的方便简洁，但是每次浏览器在加载整个网页的时候就需要将JQuery文件加载进来，这必然会导致客户端打开速度缓慢。所以就来学习一下原生Ajax怎么请求数据，摆脱对JQuery中的Ajax依赖。

什么是Ajax？

Ajax 全称为Asynchronous Javascript And XML，是一种用于创建快速动态网页的技术。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。在传统的方式更新网页内容是需要重新加载整个网页。有了Ajax技术后，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax的异步请求

在AJAX 出现之前，很多在服务器执行的任务都相当费时，总会引起应用程序挂起或停止。使用Ajax异步请求后，在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。

Ajax创建对象

//创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();

Ajax的一些方法

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步)
send(string)	将请求发送到服务器 string：仅用于POST请求
setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

Ajax的一些属性

属性	描述
centered responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

示例

后端代码示例

@Controller
@RequestMapping("/user")
public class UserController {
    @RequestMapping(value = "/testAjax",method = RequestMethod.POST)
    public @ResponseBody User testAjax(@RequestBody User user){
        //客户端发送ajax请求，传的是json字符串，后端把json字符串封装到user对象中
        System.out.println(user);
        //做响应,这里又会把ajax的传值返回给页面
        return user;

    }
}

html代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f() {
            var data = {
                username:'你好呀',
                password:'今天521',
                age:18
            }
            var xmlHttp = new XMLHttpRequest();
            //绑定监听函数
            xmlHttp.onreadystatechange = function(){
                //判断数据是否正常返回
                if(xmlHttp.readyState==4&&xmlHttp.status==200){
                    //接收数据
                    var result = xmlHttp.responseText;
                    document.getElementById("s_test").innerHTML = result;
                }
            }
            //绑定请求路径，设置请求方式，true为异步，false为同步
            xmlHttp.open("POST","/user/testAjax",true);
            //POST提交设置的协议头
            xmlHttp.setRequestHeader("Content-type","application/json");
            //POST提交将参数，如果是GET提交send不用提交参数
            //JSON.stringify()将data转为json格式传给后台
            xmlHttp.send(JSON.stringify(data));
        }
    </script>
</head>
<button onclick="f()">你好</button>
<span id="span1"></span>
<body>
</body>
</html>