使用ajax发送异步请求
原生js实现以及jquery ajax实现发送请求
文章目录
- 使用ajax发送异步请求
- 简介
- 实现方式
- 1.原生js实现
- 1.get请求
- 2.post请求
- 2.jquery ajax实现
- 1.基本方式
- 2.回调事件
- 3. jquery中的封装函数
- 1.$.post
- 2.$.get
- 3.$.getJSON
- 4.$.getScript
- 总结
简介
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML) 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面情况下,能够更新部分网页的技术。
同步和异步
- 同步互交:指向服务器发送一个请求,需要等待返回,然后才能够发送下一个请求,期间有个等待过程;
- 异步互交:指向服务器发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待;
实现方式
1.原生js实现
1.get请求
代码如下(示例):
// 创建请求对象
var xhr = new XMLHttpRequest()
// 封装参数对象
var data = {id: 1,name: "张三"}
// 配置请求方法,设置请求接口地址
//同步或异步请求:true(异步)或 false(同步)
xhr.open('get', 'http://localhost:8080/api?' + JSON.stringify(data),true)
//发送请求
xhr.send()
// 获取网络请求响应的数据
xhr.onreadystatechange = function () {
// 响应完毕,并且请求成功
if (xhr.readyState === 4 && request.status === 200) {
var res = JSON.parse(xhr.responseText)
//.....
}
}
2.post请求
代码如下(示例):
// 1.创建一个实例对象
var xhr = new XMLHttpRequest()
// 需要传递的数据
var data = {id: 1,name: '张三'}
// 2.打开一个连接
//同步或异步请求:true(异步)或 false(同步)
xhr.open('post', 'http://localhost:8080/api',true);
// 设置请求头 告诉后端我们要发送的是什么格式的数据
xhr.setRequestHeader('Content-Type', 'application/json')
// 3.发送请求
// 发送json数据
xhr.send(JSON.stringify(obj))
// 4.接收响应
xhr.onreadystatechange = function () {
// 请求发送完成 请求成功
if (xhr.readyState === 4 && xhr.status === 200) {
var res = JSON.parse(xhr.responseText)
console.log(res);
//。。。。。
}
}
}
2.jquery ajax实现
jquery地址
1.基本方式
代码如下(示例):
$.ajax({
//缓存
cache: false,
//是否异步请求
async: async == undefined ? true : async,
//请求地址
url: 'http://localhost:8080',
//请求类型
type: method == undefined ? "POST" : method,
contentType: contentType == undefined ? 'application/json; charset=UTF-8': contentType ,
// 设置的是请求参数
data: {id: 1,name: '张三'},
//设置响应体的类型
dataType: 'json',
//回调函数
success: function (res) {
// 设置了 dataType 选项客户端会主观认为服务端返回的就是 JSON 格式的字符串
console.log(res);
}
});
2.回调事件
代码如下(示例):
$.ajax({
//缓存
cache: false,
//是否异步请求
async: async == undefined ? true : async,
//请求地址
url: 'http://localhost:8080',
//请求类型
type: method == undefined ? "POST" : method,
contentType: contentType == undefined ? 'application/json; charset=UTF-8': contentType ,
// 设置的是请求参数
data: {id: 1,name: '张三'},
//设置响应体的类型
dataType: 'json',
// 在所有发送请求的操作(open, send)之前执行
beforeSend: function (request) {
request.setRequestHeader("Authorization", CoreUtil.getData("token"));
},
// 请求成功(状态码为200)执行这个函数
success: function (res) {
console.log(res);
},
// 请求不正常(状态码不为200)执行
error: function (res) {
console.log('error', res);
},
// 不管是成功还是失败都是完成,都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
complete: function (res) {
console.log('complete', res);
}
3. jquery中的封装函数
1.$.post
语法:$.post(url,data,function(data,status,xhr),dataType);
代码如下(示例):
$.post("http://localhost:8080/api",data,function(res){
if(res.success){
alert("成功");
}else{
alert("失败");
}
},"json");
2.$.get
语法:$.get(url,data,function(data,status,xhr),dataType)
代码如下(示例):
$.get("http://localhost:8080/api",data,function(res,status){
if(res.success){
alert("成功");
}else{
alert("失败");
}
},"json");
3.$.getJSON
描述:发送get请求,并将数据转为json数据
语法:$.getJSON(url,data,function(data,status,xhr))
代码如下(示例):
$.getJSON('http://localhost:8080/api', data, function (res) {
alert(res)
});
4.$.getScript
描述:执行一个js文件的代码
语法:$.getScript(url, [callback])
代码如下(示例):
//url:待载入 JS 文件地址。
//callback:成功载入后回调函数。
$.getScript("ajax.js", function (data, Status, xhr) {
alert("加载成功");
});
总结
以上就是今天要讲的内容,本文介绍了ajax的使用方式以及jquery的一些封装函数,希望对大家有帮助。公众号 “俊俊同学的笔记”