本文详细介绍了Ajax的概念、异步特性及其在JavaScript和jQuery中的实现方式。Ajax允许网页无需刷新即可与服务器交换数据，提升了用户体验。文中还提及了GET和POST请求的区别，以及JSON数据格式在数据传输中的作用。
Ajax
一、概念
Ajax是ASynchronous JavaScript And XML的缩写，翻译过来就是异步的JavaScript和XML
同步和异步：
客户端和服务器端相互通信的基础上：
同步☞客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作😑
异步☞客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作😎
意思就是，Ajax可以实现无需重新加载整个网页的情况下，通过在后台与服务器进行少量数据交换，使网页实现异步更新，即对网页的某部分进行更新
主要目的：提升使用感官和体验🤩
流程概念图：
引用一个教程的PPT截图😁
二、实现
两种方式！
1、原生的JS实现方式（最基础的实现方式）
①创建核心对象
// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = newActiveXObject('Mricosoft.XMLHTTP')
②建立链接
XMLHttpRequest 对象属性的的 open() 和 send() 方法描述(用于和服务器交换数据)
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
open（method，url，async）：规定请求的类型、URL以及是否异步处理请求。method指GET或POST；url指文件在服务器上的位置。async，true（异步）或false（同步）
send（string）：发送请求至服务器
string：仅用于POST请求
一个重点❗：GET和POST的区别！
※get方式，请求参数在URL后边拼接。send方法为空参
xmlhttp.open("GET'"),"demo_get2.asp?fname=Bill&name=Gates",true);
xmlhttp.send();
在上面🌰中，GET是请求方式，后面一大串是url路径，true是异步，send后面参数是携带在请求体中的，所以 url 后面拼接不写入任何信息
但如果需要像HTML表单那样post数据，就要使用setRequestHeader()来添加HTTP头，然后在send()方法中规定希望发送的数据
xmlhttp.open("POST",ajax_test.asp,true);
xmlhttp.setRequestHeader("Content-type"."application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&name=Gates");
在上面🌰中，POST是请求方式，后面是传递路径，true是异步，最后的send里要传入参数
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
③接收服务器响应，处理数据
当服务器响应成功后获取
🌰：
xmlthhp.onreadystatecheange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElenmentById("myDiv").innerHTML=xmlhttp.responseText
}
}
如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据
但是，异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断XMLHttpRequest对象的status属性值，只有该属性值为200，才表示异步调用成功，因此，要获取服务器返回数据的语句，还必须要先判断XMLHttpRequest对象的status属性值是否等于200
2、JQeury
JQeury方式比JS方式更加简单明了😏
实现方式：
①$.ajax()
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
②$.get()：发送get请求
语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
<--------------------------------------------------------------------->
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<script>
function fun() {
$.get(
//url：请求路径
url ="/test/jqueryServlet",
//data：请求参数
{"username":"jack"},
//callback：回调函数
function (data) {
alert(data)
},
//type：响应结果的类型
type="text"
)
}
</script>
<body>
<input type="button" value="点击" onclick=fun();>
<input type="text">
</body>
③$.post()：发送post请求
语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<script>
function fun() {
$.post(
url ="/test/jqueryServlet",
{"username":"jack"},
function (data) {
alert(data)
},
type="text"
)
}
</script>
<body>
<input type="button" value="点击" onclick=fun();>
<input type="text">
</body>
这里引入一个知识点：
JSON
1、这是啥呢
JavaScript Object Notation JavaScript
对象表示法
🌰：
Person p = new Person();
p.setName(“张三”);
p.setAge(23);
p.setGender(“男”);
var p = {“name”:“张三”,“age”:23,“gender”:“男”};
2、特点
JSON多用于存储和交换文本信息的语法进行数据的传输
JSON 比 XML 更小、更快，更易解析
3、基本规则
数据在名称/值对中：json数据是由键值对构成的键用引号(单双都行)引起来，也可以不使用引号
值得取值类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
{“persons”:[{},{}]} - 对象（在花括号中）
{“address”:{“province”：“陕西”…}}
数据由逗号分隔：多个键值对由逗号分隔
花括号保存对象：使用{}定义json格式
方括号保存数组：[]
4、数据获取
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]
- 遍历
🌰：
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};
<--------------------------------------------------------------------->
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
<--------------------------------------------------------------------->
//获取person对象中所有的键和值
//for in 循环
for(var key in person){
//这样的方式获取不行。因为相当于 person."name"
//alert(key + ":" + person.key);
alert(key+":"+person[key]);
}
<--------------------------------------------------------------------->
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
5、JSON数据和Java对象的相互转换
①导入jackson的相关jar包
②创建JSON核心对象 ObjectMapper
//创建ObjectMapper对象
ObjectMapper o = new ObjectMapper();
//自动将双引号转义了
String json = "{\"name\":\"张三\",\"age\":20,\"gander\":\"男\",\"birthday\":\"2020-04-02\"}";
③调用ObjectMapper的相关方法进行转换
//调用readerValue(String,Class<Object> class)进行转义
Person person = objectMapper.readValue(json, Person.class);
//打印结果,后面没有输入所以自动给个日期
//Person{name='张三', age=20, gander='男', birthday=Thu Apr 02 08:00:00 CST 2020}
System.out.println(person);
搞一个html页面试一下
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
