|
八、$.post()方法
1、通过远程HTTP POST请求载入信息。
2、它与$.get()方法的结构和使用方式都相同。
九、get请求和post请求的区别
1、GET请求将参数跟在URL后进行传递，而POST请求则作为HTTP请求实体内容发送给服务器。在Ajax请求中，这些区别对用户是不可见的。
2、GET方式对传输的数据有大小限制（通常不大于2KB），而POST方式传递的数据要比GET方式大的多。
3、GET方式请求的数据会被浏览器缓存起来，因此其他人就可以通过浏览器的历史记录中读取到这些数据，例如密码等，所以GET请求安全性会有问题，而POST相对就可以避免这些问题。
十、$.getScript()方法
1、通过HTTP GET请求载入并执行一个JavaScript文件。
语法：
$.getScript(url, [callback])
说明：
（1）url：待载入JS文件地址。
（2）callback：成功载入后回调函数。
十一、$.getJson()方法
1、通过HTTP GET请求载入JSON数据。
语法：
$.getJSON(url, [data], [callback])
说明：
（1）url：发送请求地址。
（2）data：待发送key/value参数。
（3）callback：载入成功时回调函数。
十二、getScript()方法和getJSON()方法例子
getother.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test getother</title>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("input:eq(0)").click(function(){
//加载js文件功能
$.getScript("script/my.js",function(){
f();
});
});
$("input:eq(1)").click(function(){
//加载外部json文件功能
$.getJSON("script/myJson.json",function(data){
var name = data.name;
var age = data.age;
$("<p>用户名："+name+"，年龄："+age+"</p>").appendTo($("#content"));
});
});
$("input:eq(2)").click(function(){
//加载外部json文件功能
$.getJSON("http://localhost:8080/AjaxPro/GetJSONServlet",function(data){
//获得json数据
var students = data.students;
var res = "<ul>\n";
for (var i=0;i<students.length;i++){
//从json数组里取出json对象
var student = students[i];
res+="<li>"+student.name+"--"+student.password+"</li>\n";
}
res+="</ul>";
//把标签字符串生成一个节点对象，追加到content元素内
$(res).appendTo($("#content"));
});
});
})
</script>
</head>
<body>
<input type="button" value="getScript" /><br/>
<input type="button" value="getJSON" /><br/>
<input type="button" value="getWebJSON" /><br/>
<div id="content"></div>
</body>
</html>
十三、$.ajax()方法
1、$.ajax()方法是jQuery最底层的Ajax实现。前面所讲的那些操作ajax的方法都是基于$.ajax()方法构建的，因此此方法可以替换前面的所有方法。
语法：
$.ajax({ url, [settings] })
说明：
（1）url：发送请求地址。
（2）settings：ajax请求参数设置。所有选项都是可选的。
十四、$.ajax()常用的请求参数
1、type：设置请求方式，主要是GET和POST，默认是GET
2、timeout：设置请求超时时间
3、data：发送到服务器的数据（以键值对形式发送）
4、dataType：预期服务器返回的数据类型，比如：xml、json、text等
5、beforeSend：发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头信息等
6、complete：设置完成后调用的回调函数，请求成功、失败均会调用
7、success：请求成功后被调用的回调函数
8、error：请求失败后被调用的回调函数
9、global：默认为true，表示是否触发全局ajax事件
注意：如果需要使用$.ajax()方法来进行ajax开发，那么上面这些常用参数都必须了解。jQuery的内容比较多，有些知识我们还得通过官方的api来进行巩固学习
十五、例子程序
ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test ajax</title>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("input:eq(0)").click(function(){
$.ajax({
url: "GetJSONServlet",
type: "get",
dataType: "json",
success: function(data){
//获得json数据
var students = data.students;
var res = "<ul>\n";
for (var i=0;i<students.length;i++){
//从json数组里取出json对象
var student = students[i];
res+="<li>"+student.name+"--"+student.password+"</li>\n";
}
res+="</ul>";
//把标签字符串生成一个节点对象，追加到content元素内
$(res).appendTo($("#content"));
},
error: function(data){
alert("失败啦");
},
complete: function(XMLHttpRequest, textStatus){
alert(XMLHttpRequest.status);
}
})
});
});
</script>
</head>
<body>
<input type="button" value="$.ajax()" /><br/>
<div id="content"></div>
</body>
</html>
|