ajax实例(axios和ajax区别)
各位老铁们，大家好，今天由我来为大家分享ajax实例，以及axios和ajax区别的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
axios和ajax区别
1、功能不同
Axios：Axios是一个基于 promise的 HTTP库，可以用在浏览器和 node.js中。
AJAX：AJAX是与服务器交换数据并更新部分网页的，在不重新加载整个页面的情况下Ajax=异步 JavaScript和 XML（标准通用标记语言的子集）。
2、特点不同
Axios从浏览器中创建 XMLHttpRequests，可以从 node.js创建 http请求，支持 Promise API，可以拦截请求和响应、转换请求数据和响应数据。
Ajax是一种用于创建快速动态网页的技术，Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
3、部分参数不同
Axios：
axios({
url:'http://jsonplaceholder.typicode.com/users',
method:'get',
responseType:'json',//默认的
data:{
//'a': 1,
//'b': 2,
}
}).then(function(response){
console.log(response);
console.log(response.data);
}).catch(function(error){
console.log(error);
})
Ajax：
$.ajax({
url:'http://jsonplaceholder.typicode.com/users',
type:'get',
dataType:'json',
data:{
//'a': 1,
//'b': 2,
},
success: function(response){
console.log(response)；
}
})
扩展资料：
axios的实例方法：
以下是可用的实例方法。指定的配置将与实例的配置合并
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
jQuery中ajax有哪些请求方式
这次给大家带来jQuery中ajax有哪些请求方式，使用jQuery中ajax的请求方式注意事项有哪些，下面就是实战案例，一起来看一下。
AJAX是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。
jQuery中ajax的4种常用请求方式：
1.$.ajax()返回其创建的 XMLHttpRequest对象。
$.ajax()只有一个参数：参数 key/value对象，包含各配置及回调函数信息。详细参数选项见下。
如果你指定了 dataType选项，请确保服务器返回正确的 MIME信息，(如 xml返回"text/xml")。
实例：
保存数据到服务器，成功时显示信息。
$.ajax({
type:"post",
dataType:"html",
url:'/Resources/GetList.ashx',
data: dataurl,
success: function(data){
if(data!=""){
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick});
$("#anhtml").html(data.split("$$")[0]);
}
}
});2.通过远程 HTTP GET请求载入信息。
这是一个简单的 GET请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。
实例：
$.get("test.cgi",{ name:"John", time:"2pm"},
function(data){
alert("Data Loaded:"+ data);
});3.通过远程 HTTP POST请求载入信息。
这是一个简单的 POST请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。
实例：
$.post("/Resources/addfriend.ashx",{"fid": fids,"fname": fnames,"tuid": tuids,"tuname": tunames}, function(data){
if(data=="ok"){
alert("添加成功！");
}
})4.通过 HTTP GET请求载入 JSON数据。
实例：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if( i== 3) return false;
});
});相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
Ajax获取全国天气预报的API数据
Ajax与JSON数据交互存储
ajax请求原理
望采纳
一、Ajax原理是什么
AJAX全称(Async Javascript and XML)，即异步的JavaScript和XML
是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面
流程图如下：
校长想找班主任汇报工作，就委托秘书去叫班主任自己就接着做其他事情，直到秘书告诉他班主任已经到了，最后班主任跟领导汇报工作
Ajax请求数据流程与“校长想找班主任汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，校长相当于浏览器，响应数据相当于班主任
浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作
二、实现过程
实现Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：
建 Ajax的核心对象 XMLHttpRequest对象
通过 XMLHttpRequest对象的 open()方法与服务端建立连接
构建请求所需的数据内容，并通过XMLHttpRequest对象的 send()方法发送给服务器端
XMLHttpRequest对象提供的 onreadystatechange事件监听服务器端你的通信状态
接受并处理服务端向客户端响应的数据结果将处理结果更新到 HTML页面中
2.1创建XMLHttpRequest对象
通过XMLHttpRequest()构造函数用于初始化一个 XMLHttpRequest实例对象
const xhr= new XMLHttpRequest();
1
2.2与服务器建立连接
通过 XMLHttpRequest对象的 open()方法与服务器建立连接
xhr.open(method, url, [async][, user][, password])
1
参数说明：
method：表示当前的请求方式，常见的有GET、POST
url：服务端地址
async：布尔值，表示是否异步执行操作，默认为true
user:可选的用户名用于认证用途；默认为null
password:可选的密码用于认证用途，默认为null
2.3给服务端发送数据
通过 XMLHttpRequest对象的 send()方法，将客户端页面的数据发送给服务端
xhr.send([body])
1
body:在 XHR请求中要发送的数据体，如果不传递数据则为 null如果使用GET请求发送数据的时候，需要注意如下：
将请求数据添加到open()方法中的url地址中
发送请求数据中的send()方法中参数设置为null
2.4绑定onreadystatechange事件
onreadystatechange事件用于监听服务器端的通信状态，主要监听的属性为XMLHttpRequest.readyState,
关于XMLHttpRequest.readyState属性有五个状态，如下图显示：
只要readyState属性值一变化，就会触发一次readystatechange事件
XMLHttpRequest.responseText属性用于接收服务器端的响应结果
举个例子：
const request= new XMLHttpRequest()
request.onreadystatechange= function(e){
if(request.readyState=== 4){//整个请求过程完毕
if(request.status>= 200&& request.status<= 300){
console.log(request.responseText)//服务端返回的结果
}else if(request.status>=400){
console.log("错误信息："+ request.status)
}
}
}
request.open('POST','
request.send()
三、封装
通过上面对XMLHttpRequest对象的了解，下面来封装一个简单的ajax请求
//封装一个ajax请求
function ajax(options){
//创建XMLHttpRequest对象
const xhr= new XMLHttpRequest()
//初始化参数的内容
options= options||{}
options.type=(options.type||'GET').toUpperCase()
options.dataType= options.dataType||'json'
const params= options.data
//发送请求
if(options.type==='GET'){
xhr.open('GET', options.url+'?'+ params, true)
xhr.send(null)
} else if(options.type==='POST'){
xhr.open('POST', options.url, true)
xhr.send(params)
//接收请求
xhr.onreadystatechange= function(){
if(xhr.readyState=== 4){
let status= xhr.status
if(status>= 200&& status< 300){
options.success&& options.success(xhr.responseText, xhr.responseXML)
} else{
options.fail&& options.fail(status)
}
}
}
}
使用方式如下：
ajax({
type:'post',
dataType:'json',
data:{},
url:'
success: function(text,xml){//请求成功后的回调函数
console.log(text)
},
fail: function(status){请求失败后的回调函数
console.log(status)
}
})
ajax请求有哪几种方式
1. get()方法通过远程 HTTP GET请求载入信息。
// 1.创建
var ajax= new XMLHttpRequest();
// 2设置
ajax.open('get','01.Ajax_get.php');
// 3.发送
ajax.send();
// 4.状态事件
ajax.onreadystatechange= function(){
if(ajax.readyState== 4&& ajax.status== 200){
// 5.使用返回的数据修改页面的内容
// responseText返回的就是一个字符串
//我们在ajax中如果是通过 ajax.responseText获取到的统统都是字符串
console.log(ajax.responseText);
}
2.post()通过远程 HTTP POST请求载入信息。这是一个简单的 POST请求功能以取代复杂的$.ajax().请求成功时可调用回调函数。
//创建ajax实例
var ajax= new XMLHttpRequest();
//使用post请求
ajax.open('post','ajax_post.php');
//如果使用post发送数据必须设置如下内容
//修改了发送给服务器的请求报文的内容
//如果需要像 HTML表单那样 POST数据，请使用 setRequestHeader()来添加 HTTP头。然后在 send()方法中规定您希望发送的数据：
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送
// post请求发送的数据写在 send方法中
//格式 name=jack&age=18字符串的格式
ajax.send('name=jack&age=998');
//注册事件
ajax.onreadystatechange= function(){
if(ajax.readyState==4&&ajax.status==200){
console.log(ajax.responseText);
}
}
非常感谢您的阅读！我们希望本文对于解决您关于ajax实例的问题提供了一些有价值的信息。如果您还有其他疑问，我们将很乐意为您提供进一步的帮助。