1、介绍
jquery支持ajax,需要导入jsqury库后使用。
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
2、load
load() 方法从服务器加载数据,并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
- selector:元素选择器
- url:希望加载的数据来源,必选
- 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
- 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("#div1").load("demo_test.txt");
//把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt – 包含调用成功时的结果内容
- statusTXT – 包含调用的状态
- xhr – 包含 XMLHttpRequest 对象
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
3、get
$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )
- URL:发送请求的 URL字符串。
- data:可选的,发送给服务器的字符串或 key/value 键值对。
- callback:可选的,请求成功后执行的回调函数。
- dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
4、post
$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )
- URL:发送请求的 URL字符串。
- data:可选的,发送给服务器的字符串或 key/value 键值对。
- callback:可选的,请求成功后执行的回调函数。
- dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
5、ajax
$.ajax({name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对。
(1)async
可选值:true/false,默认是true表示异步处理
(2)url
数据提交的地址,默认是当前页面
(3)type
可选值:GET/POST,提交方法
(4)dataType
预期的服务器响应的数据类型。实际就是设置请求中accept字段
(5)data
规定要发送到服务器的数据。
(6)cache
布尔值,表示浏览器是否缓存被请求页面。默认是 true。
(7)contentType
发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”。
(8)其他
beforeSend(xhr):发送请求前运行的函数。
complete(xhr,status):请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
dataFilter(data,type):用于处理 XMLHttpRequest 原始响应数据的函数。
error(xhr,status,error):如果请求失败要运行的函数
success(result,status,xhr):当请求成功时运行的函数。
context:为所有 AJAX 相关的回调函数规定 “this” 值。
timeout:设置本地的请求超时时间(以毫秒计)。
scriptCharset:规定请求的字符集。
username:规定在 HTTP 访问认证请求中使用的用户名。
traditional:布尔值,规定是否使用参数序列化的传统样式。
xhr:用于创建 XMLHttpRequest 对象的函数。
global:布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified:布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp:在一个 jsonp 中重写回调函数的字符串。
jsonpCallback:在一个 jsonp 中规定回调函数的名称。
password:规定在 HTTP 访问认证请求中使用的密码。
processData:规定在 HTTP 访问认证请求中使用的密码。
6、ajax报文分析
ajax的html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
function fun(){
$.ajax({
url:"http://120.48.75.111/a.php?name=张三'<>",
type:"post",
data:"abc=张三'<>\""
})
}
</script>
</head>
<body>
<button onclick=fun()>点击</button>
</body>
</html>
请求报文:
POST /a.php?name=%E5%BC%A0%E4%B8%89%27%3C%3E HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Content-Length: 14
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Host: 120.48.75.111
Origin: http://120.48.75.111
Proxy-Connection: keep-alive
Referer: http://120.48.75.111/wordpress/abc.html
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.5249.62 Safari/537.36
X-Requested-With: XMLHttpRequest
abc=张三'<>"
分析:
- 默认的content-type为url编码,但是不会对表单数据进行自动编码,需要手动进行
- 默认接收任何响应类型
- 默认具有referer和origin字段
- 具有非正式头部字段X-Requested-With
标签:jquery,请求,callback,URL,xhr,ajax,data From: https://www.cnblogs.com/wd404/p/17335625.html