Ajax（JavaScript原生Ajax实现）

最新推荐文章于 2024-07-24 10:40:52 发布

清风挽歌

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量171

点赞数 1

分类专栏： JavaScript 文章标签： ajax js jquery 前端 javascript

本文链接：https://blog.csdn.net/zxy144/article/details/109707432

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Ajax

ajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML），其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

使用Ajax异步请求可以实现页面无刷新的效果，在不重新加载整个网页的情况下更新页面中的一些内容

异步请求：

发送一个请求不需要等待响应返回，发送请求后直接去做其他的事情，等响应返回了，再去执行响应后需要执行的相关代码
如果是同步方式发送请求，请求发送后，在响应返回之前什么都不能做，只能等待响应的完成，才会继续执行后面的代码

JavaScript原生Ajax实现

步骤：

创建XMLHttpRequest对象
向服务器发送请求，并绑定地址和参数
设置onreadystatechange事件
获取服务器响应返回的数据

XMlHttpRequest对象

现在所有的浏览器都支持XMLHttpPRequest对象

就是因为有了XMLHttpPRequest对象，我们就可以在后台发送请求与服务器进行数据交换，从而在不重新加载页面的情况下动态的改变一些网页的内容

var xhr=new XMLHttpRequest();

向服务器发送请求

XMLHttpPRequest对象有两个方法，可以完成我们发送请求到服务器的工作

open(method,url,async);规定请求类型、地址和是否为异步请求
- method:get/post
- url:请求的路径
- async:true异步请求(默认) / flase同步请求
send(string);将请求发送到服务器
- string仅适用于post请求，放置请求参数（get请求的参数都是直接写在地址后的）

	xhr.open("请求方式","请求地址");
	xhr.send();

设置onreadystatechange事件

当请求发送后，我们就要根据响应的结果来进行一些不同的callback任务

readyState中存有XMLHttpRequest的状态信息，每当readyState改变时，就会触发onreadystatechange事件

XMLHttpPRequest对象中的三个属性：

status：状态码。
- 200：ok响应成功；404：未找到页面
readyState：存储XMLHttpRequest的状态。（0-4）
- 0：请求未初始化
- 1：已和服务器建立连接
- 2：请求已被接收
- 3：请求处理中
- 4：请求完成，响应就绪
onreadystatechange：存储一个函数，每当readyState属性改变时，就会自动调用这个函数

    xhr.onreadystatechange = function (){
        if (xhr.status==200&&xhr.readyState==4){
            //状态码为200并且xhr的状态也是4时，执行的代码
        }
    }

获取服务器响应给客户端的数据

XMLHttpPRequest对象中的两个属性，用来获取服务器返回的数据：

responseText：获得字符串格式的响应数据
responseXML：获得XML格式的响应数据

	var string = xhr.responseText;
	var xml = xhr.responseXML;

示例：

实现功能：注册阶段验证用户名是否可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script>
        //创建一个请求对象
        var xhr = new XMLHttpRequest();
        function ajaxPost(){
            var usernmae  = document.getElementById("username").value;
            xhr.open("post","ajaxServlet");
            //发送一个请求头，表示内容是请求提交的是经过url重写的表单信息
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("username="+usernmae);
            xhr.onreadystatechange = function (){
                if (xhr.status==200&&xhr.readyState==4){
                    document.getElementById("span").innerHTML = xhr.responseText;
                }
            }
        }
    </script>
</head>
<body>

用户名：<input id="username" type="text" onchange="ajaxPost()">
<span id="span"></span>

</body>
</html>

@WebServlet(urlPatterns = {"/ajaxServlet"})
public class AjaxServletDemo1 extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String username = req.getParameter("username");
        //模拟一些已被注册的用户名数据
        List<String> list = List.of("zhangsan","lisi","wangwu");
        boolean flag = false;
        for (String name :list){
            if (name.equals(username)){
                flag =true;
            }
        }
        PrintWriter out = resp.getWriter();
        if (flag){
            out.print("<span style=\"color: red\" >该用户名已被注册！</span>");
        }else {
            out.print("<span style=\"color: green\" >恭喜，用户名可用</span>");
        }
    }
}

清风挽歌

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax（JavaScript原生Ajax实现）

Ajaxajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML），其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。使用Ajax异步请求可以实现页面无刷新的效果，在不重新加载整个网页的情况下更新页面中的一些内容异步请求：发送一个请求不需要等待响应返回，发送请求后直接去做其他的事情，等响应返回了，再去执行响应后需要执行的相关代码如果是同步方式发送请求，请求发送后，在响应返回之前什么都不能
复制链接

扫一扫

专栏目录