Ajax

全称：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(‘请求方式’,’请求地址’,’同步或异步’);

1. get请求数据

xhr.open('get',url,true);
xhr.send();

2. 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使用

1. $.get(url, [data], [callback], [type])
2. $.post(url, [data], [callback], [type])

其中：

url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

3. $.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请求数据，必须遵循同源策略

同源策略

1. 同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域
2. 同源策略主要为了保证浏览器的安全性
3. 在同源策略下，浏览器不允许Ajax跨域获取服务器数据

常见解决ajax跨域的方式：jsonp，cors等