原生Ajax(JavaScrip的Ajax)

最新推荐文章于 2024-09-01 19:13:21 发布

春雨燎原

最新推荐文章于 2024-09-01 19:13:21 发布

阅读量91

点赞数

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

本文链接：https://blog.csdn.net/qq_66013742/article/details/133778604

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、原生Ajaxy应用

原生Ajax需要在JS中使用XML的请求对象发请求到服务器

1.从服务器取数据

<!-- 客户端： -->
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

<script type="text/javascript">
    function loadXMLDoc(){
        //原生Ajax操作：
        var xmlHttp = new XMLHttpRequest(); //实例化xml的请求对象
        //xml请求对象发请求：参数1：请求类型   参数2：路径  参数3：异步true 同步false
        xmlHttp.open("get","load.jsp",true); //数据填充
        xmlHttp.send(); //发送请求

        //回调函数
        xmlHttp.onreadystatechange=function(){
            //readyState=4:服务器已处理完数据，响应已就绪  响应状态为200表示成功的响应
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //responseText：获取服务器中返回的文本内容
                document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
            }
        }
    }
</script>

//服务器：
<%
	response.getWriter().write("返回数据到客户端~~");
%>

2.传参到服务器

<!-- 客户端： -->
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

<script type="text/javascript">
    function loadXMLDoc(){
        //原生Ajax操作：
        var xmlHttp = new XMLHttpRequest(); //实例化xml的请求对象
        //xml请求对象发请求：参数1：请求类型   参数2：路径  参数3：异步true 同步false
        //传参格式：?name=value&name2=value2
        xmlHttp.open("get","load2.jsp?name=zs&age=30",true); //数据填充
        xmlHttp.send(); //发送请求

        //回调函数
        xmlHttp.onreadystatechange=function(){
            //readyState=4:服务器已处理完数据，响应已就绪  响应状态为200表示成功的响应
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //responseText：获取服务器中返回的文本内容
                document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
            }
        }
    }
</script>

//服务器：
<%
	String name = request.getParameter("name");
	String age  = request.getParameter("age");
	response.getWriter().write("返回数据-name="+name+";age="+age);
%>

二、Ajax细节

缓存在Java中很重要，且有很多种缓存，例如，浏览器有缓存，服务器有缓存，数据库也有缓存; 每个地方的缓存所代表的含义都是类似的，都是提高查询效率；但有些场景需要清除缓存，例如，获取验证码，如果有缓存，则每次发同样链接，返回同样的验证码；则有安全隐患，这种场景需要清除缓存。

1.get请求中清除缓存

通过在请求地址后加个时间：date=new Date(),这样每次请求的地址中都有一个时间是不同的，所以请求也是新的，这样就达到了清除缓存的作用

//原生Ajax操作：
var xmlHttp = new XMLHttpRequest(); //实例化xml的请求对象
//date=日期；每毫秒值都不同，意味着每次发的请求都是不同的，意味着每
//次都会取服务器获取新的新资源;相当于清除了缓存
xmlHttp.open("get","load.jsp?date="+new Date(),true); //数据填充
xmlHttp.send(); //发送请求

2.post异步请求

//post请求：post不带参数，和get不带参一样
//xmlHttp.open("post","load.jsp",true);
//xmlHttp.send();

//post带参数: 需要在send中传参数，且需要设置请求头
xmlHttp.open("post","load2.jsp",true);
//由于post传参数，可以传文本和二进制数据(上传图片)；所以需要指定请求头类型
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=zsf&age=99");

3.响应状态码

描述：当客户端发送请求后，服务器是否接收，或响应是否成功都会给客户端一个响应状态，最典型的是200或404；200表示成功状态，404则是未找到服务器；以下需要记住的状态码：

200：服务器能够接收客户端请求，且服务器处理无异常，响应回来的成功的状态码

302：重定向；也就是客户端访问服务器后；服务器中指定客户端再发一次请求到另一个页面或服务器

404：客户端未发现服务器路径；往往是路径写错了

500：客户端找到了服务器，但是服务器中代码出现异常了

4.回调XML数据

回调xml数据，意味着，可以将xml文件当成服务器数据；获取这些xml数据后，只需要解析出来想要的数据即可。

var xmlHttp = new XMLHttpRequest(); //实例化xml的请求对象
xmlHttp.open("get","student.xml",true); //数据填充
xmlHttp.send(); //发送请求

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4&&xmlHttp.status==200){
        var doc = xmlHttp.responseXML; //获取文档对象，类似js的DOM(不常用)
        //从xml文档对象中获取name的标签
        var names = doc.getElementsByTagName("name");
        var txt = "";
        //标签有多个，所以需要循环
        for(var i=0;i<names.length;i++){
            //names[i]取到下标个数的指定标签  
            //childNodes[0]：拿到第0个子节点；nodeValue取出值-张三丰或张无忌
            txt=txt + names[i].childNodes[0].nodeValue + "<br>";
        }
        document.getElementById("myDiv").innerHTML=txt;
    }
}

xml:

<!--student.xml-->
<students>  <!-- xml格式类似html，都有根标签，里面包含多个子标签及属性 -->
	<student>
		<name>张三丰</name>  <!-- ajax访问后，目的是解析基本值 -->
		<age>99</age>
	</student>
	<student>
		<name>张无忌</name>
		<age>22</age>
	</student>
</students>

三、校验插件

1.概述

validate校验插件，主要用于表单中提交时，做的提示校验规则；也就是不满足规则条件时，会给我们提供规则提示，意味着不能提交了，直到满足了规则条件才能提交。

2.特点

引入插件后，校验规则会给我们做一些统一的内置提示

同时，我们也可以自己来指定规则提示，体现了校验插件的灵活性

3.应用

先导校验包，且需要引入jquery.js，因为插件中需要使用到；且需要放到最前面；还需要导入中文识别包

<!-- 引入包：jquery放前面 -->
<script type="text/javascript" src="../js/jquery-1.11.js" ></script>
<script type="text/javascript" src="../js/validate.min.js" ></script>
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
    $(function(){
        $("form").validate({  //校验规则，往往用在表单中
            rules:{ //写规则
                //里面的key对应这HTML标签中的name的属性
                username:"required",
                password:{required:true,digits:true},
                repassword:{equalTo:"[name='password']"},
                zxz:{min:3,required:true},
                shuzhiqujian:{range:[5,10],required:true}
            },messages:{  //提示信息
                username:"用户名不能为空",
                password:{required:"密码不能为空",digits:"太笨了，写数字啊"},
                repassword:{equalTo:"密码和确认密码不一致"},
                zxz:{min:"最小值为{0}"},
                shuzhiqujian:{range:"数值范围为：{0}-{1}"}
            }
        })
    })
</script>
<form>
    用户名：<input type="text" name="username"  /><br />
    密码:<input type="text" name="password" /><br />
    确认密码：<input type="text" name="repassword" /><br />
    最小值：<input type="number" name="zxz" /><br />
    数值区间:<input type="number" name="shuzhiqujian" /><br />
    <input type="submit" value="提交" />
</form>