AJAX学习笔记

最新推荐文章于 2024-10-04 20:50:40 发布

蠢豆包

最新推荐文章于 2024-10-04 20:50:40 发布

阅读量109

点赞数

文章标签： ajax 学习 javascript

本文链接：https://blog.csdn.net/LJJ521521/article/details/126517700

版权

介绍：

	快速创建动态网页技术，可以实现网页的异步更新，也就是在不加载整个页面的情况下，对网页部分内容进行更新。

常见功能：

核心对象 ： XMLHttpRequest
	用于在后台与服务器交换数据，可以在不重新加载整个网页的情况下，对网页莫部分进行更新
打开链接：Open(methode,url,async)
	Method；请求类型 GET POST
	Url； 请求资源路径
	Async:true(异步) false(同步)
发送请求：send(String params)
	Params:请求参数(POST专用)
处理响应：onreadystatechange
	ReadyState:0请求初始化 1 请求已接收 3请求处理中 4请求已完成，且响应已就绪
	Status:200 响应一全部OK

例子

当姓名框失去焦点时，将输入内容传输给后台，判断输入姓名是否存在，
并将返回结果在姓名文本框后显示

在这里插入图片描述

	<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan"></span>
    <br>
    密码：<input type="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>
</body>
<script>
    //为姓名绑定失去焦点事件
    Document.getElementByid("username").onblur=function(){
        //创建XMLHttpRequest 核心对象
        let xmlHttp = new XMLHttpRequest();
        //打开链接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","url?username="+username,true);
        //发送请求
        xmlHttp.send();
        //处理响应
        xmlHttp.onreadystatechange = function (){
            //判断响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status ==200){
                //讲响应数据添加到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
</script>