全称:Asynchronous JavaScript and XML(异步的js和XML)
用途:通过JS语言向服务器请求数据。
什么是ajax?---->js向服务器请求数据,实现异步请求,局部刷新。
原生js中ajax使用步骤
第一步:创建对象
var xhr = new XMLHttpRequest();
为了兼容低版本的IE浏览器,需要实例化
var xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
因此,常用的写法是
if (window.XMLHttpRequest){
//谷歌、火狐、IE11
var xhr=new XMLHttpRequest();
} else {
//ie8及之前版本
var xhr=new ActiveXObject('Microsft.XMLHTTP')
}
第二步:准备及发送,利用对象的open()和send()方法,发送数据
xhr.open(‘请求方式’,’请求地址’,’同步或异步’);
- get请求数据
xhr.open('get',url,true);
xhr.send();
- post请求数据
注意:如果是post提交,在发送请求之前设置一个头
xhr.open('post',url,true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var param='username='+username;
xhr.send(param);
第三步:回调函数onreadystatechange()
xhr.onreadystatechange=function () {
if (this.readyState!=4) return;
console.log(this.responseText);
}
xhr对象的相关属性
xhr.readyState的值分别代表的含义:
- 0 xhr对象初始化
- 1 执行发送动作
- 2 服务器端数据已经完全返回
- 3 数据正在解析
- 4 数据解析完成,可以使用了
xhr.status
- 200 数据相应正常
- 404 没有找到资源
- 500 服务器端错误
服务器返回数据类型
xhr.responseXML
:返回XML格式数据。(不常用)
xhr.responseText
:返回字符串格式数据。
ajax中的同步与异部:
- 发送send()方法后,去服务器端请求数据,此时代码接着在主线程中往下执行,那么就是异步(非阻塞)。如果请求数据后,一直等待着数据从服务器端返回,才再次执行,此时就是同步(阻塞)
jQuery的Ajax使用
- $.get(url, [data], [callback], [type])
- $.post(url, [data], [callback], [type])
其中:
url:代表请求的服务器端地址
data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)
callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)
常用的返回类型:text、json、html等
- $.ajax( { option1:value1,option2:value2… } );
$.ajax({
type:'请求类型get/post',
url:'请求地址',
data:'向服务器端传递的参数',
dataType:'要求服务器端返回的类型,常用text和json,
success:function(data){},//'请求成功的回调函数',
error::function(data){},//'请求失败的回调函数',
//不常用
async:'是否异步,bool,默认是true代表异步,
complete(xhr,status):'请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)'
})
ajax请求数据,必须遵循同源策略
同源策略
- 同源策略是浏览器的一种安全策略,所谓同源指的是请求URL地址中的协议、域名和端口都相同,只要其中之一不相同就是跨域
- 同源策略主要为了保证浏览器的安全性
- 在同源策略下,浏览器不允许Ajax跨域获取服务器数据
常见解决ajax跨域的方式:jsonp,cors等