当前位置：首页 > news >正文

ajax概述

news 2025/8/12 12:26:05

1.什么是ajax

2.ja原生ajax

3.jQuery框架的ajax

4.综合案例

1.什么是ajax

Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

同步方式发送请求

发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。(卡死)

异步方式发送请求

发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

2.ja原生ajax

1）创建Ajax引擎对象

2）为Ajax引擎对象绑定监听服务器变化的事件

设置回调函数(自定义函数,服务器响应成功后,AJAX自动调用函数)

3）绑定提交地址

4）发送请求

5）接受响应数据

 function butOnclick() {//1.获取AJAX对象var xmlhttp = new XMLHttpRequest();//2.给AJAX对象添加监听AJAX引擎状态变化的事件,并设置事件的回调函数xmlhttp.onreadystatechange=function(){         if (xmlhttp.readyState==4 && xmlhttp.status==200){// 5.获取服务器响应的数据document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}//3.绑定要发送到服务器的地址xmlhttp.open("GET","${pageContext.request.contextPath}/js_ajax",true);//4.把AJAX请求发送到服务器xmlhttp.send();}<input type="button" value="AJAX异步提交" onclick="butOnclick()"/><div id="myDiv"></div>

3.jQuery框架的ajax

语法：jQuery.get(url, [data], [callback], [type])

GET请求方式

  $("#btn").click(function (){$.get('http://localhost:8080/MyFilter_war_exploded/ajax',{name:'list'},function (data){$('#div').html(data);}) ;

POST请求方式

$.post('/MyFilter_war_exploded/ajax',{name:'list'},function (data){$('#div').html(data);})

AJAX请求方式

 $.ajax({//1:URL地址url:"/MyFilter_war_exploded/ajax",// 2:异步请求async:true,//3:给服务器传递参数data:"name=haohao&age=33",//4:请求方式type:"POST",//5 :响应数据的类型dataType:"text",// 6： 回调函数 data 接受到的服务器响应过来的数据success:function(data){alert(data);},//7: 回调函数：服务器出错的时候执行error:function(){alert("数据没有成功返回!")}});