Ajax的使用与Ajax和jQuery的综合使用

一、Ajax的介绍

1、Ajax的全称为Asynchronous JavaScript And XML(异步的JavaScript和XML)。尽管其中包含表明是JavaScript与XML，但在现实当中，随着时代的更替，现在更加倾向于对于JSON的相关使用，使得更少使用xml。

2、Ajax的特点就是可以在不刷新页面的前提下，进行页面局部更新

3、它不是新的技术，是在许多浏览器中早已存在的一项技术，最后经过一位技术大牛进行整合，变成了现在的状况

二、Ajax的使用

对于ajax的使用，常常分为三步骤

1、创建XmlHttpRequest对象

2、发送Ajax请求

3、处理服务器响应

以下就是这三步的处理步骤

<script type="text/javascript">
        //当如果是想设置点击事件出现发送servlet的话可以如下
		document.getElementById("yourId").onclick=function(){
			//1.创建XmlHttpRequest对象
			var xmlhttp;
            /*此时进行判断是否是过去的浏览器，当为if语句里面的时候，就是最新的浏览器
            反之，如果是else的语句的话，就是过去的浏览器.
             */
			if(window.XMLHttpRequest){
				xmlhttp=new XMLHttpRequest();
			}else{
				xmlhttp=new ActivetXObject("Microsoft.XMLHTTP");
				
			}
			//2.发送Ajax请求
            //第一个参数是发送什么请求，servlet是get请求的话就是get，反之就是response
            //第二个参数是servlet里面设置的路径
            //第三个参数是选择是异步还是同步，异步就是true，同步就是false
			xmlhttp.open("Get","servletPath",true);
            //然后进行发送请求
			xmlhttp.send();
			//3.处理服务器响应
            //检测是否已经发送完成
			xmlhttp.onreadystatechange=function(){
                /*readyState是查看文本是否已经接收，statue状态是否是200,
                200是成功,404是未找到url资源*/
				if(xmlhttp.readyState==4&&xmlhttp.status==200){
                     //此时就可以得到其中相应的文本
					var t=xmlhttp.responseText;
                    //此时就是可以进行转换成html进行存放在你所选择的容器内了
					document.getElementById("yourContainer").innerHTML=t
				}
			}
			
		}
	</script>

(对于此时，我们只需要将我们要发送的servlet里面response.getWriter().println()里面的传输过来就行了)

三、Ajax和jQuery的综合使用

对于以上三步骤，代码如此的多，我们有没有简化的步骤呢?

当然有，此时就要说到ajax和jQuery的综合使用了，这两者的综合使用大大的减少了开发人员的开发步骤

Ajax和jQuery的综合使用，在说此之前，先进行讲述jQuery对ajax的支持

 

jQuery对ajax的支持

常用设置选项	ajax的参数(说明)
async	true是异步，false是同步
type	请求类型 get或者post
url	当前页地址。发送请求的地址。
data	发送到服务器的数据
dataType	预期服务器返回的数据类型 json、text、jsonp、xml、html
success	请求成功后的回调函数。
error	请求失败时的处理函数

//在使用我们的jQuery之前，当然需要先加载jQuery，比如我使用的就是jquery-3.6.0.js
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>

<script type="text/javascript">
	$(function(){
		$.ajax({
			"url":"servletPath",
			"type":"get",
			"date":{"name":"zhangsan"},
			"dataType":"json",
			"success":function(json){
                    //在id为yourContainer下追加你通过servlet传过来的数据,data为传过来的数据
					$("#yourContainer").append("<h1>"+data+"</h1")
			},
			"error":function(xmlhttp,errorText){
				if(xmlhttp.status=="405"){
					alert("无效的请求方式");
				}else if(xmlhttp.status=="404"){
					alert("未找到URL资源");
				}else if(xmlhttp.status=="500"){
					alert("服务器内部错误");
				}else{
					alert("产生异常");
				}
			}
		})
	});
</script>

以上就为Ajax和jQuery的综合使用