AJAX总结系列一

AJAX介绍

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

---

AJAX实现方式

一、原生JS实现

	/** 简单ajax请求 **/
	//创建XMLHttpRequst请求
	var xhr = new XMLHttpRequst();
	//method：请求方法 get或post  || url：请求路径  || aysnc: true 为异步 false为同步
	xhr.open(method, url, aysnc);
	//设置请求头
	xhr.setRequestHeader("content-type","......");
	//data发送数据
	xhr.send(data);
	//监听状态变化
	xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
     	if (xhr.readyState == 4 ）{
     		if(xhr.status==200){
				//响应成功
			}
		} 
     }

readyState几种状态说明

0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

Status HTTP状态码介绍

 1XX：信息性状态码     ，表示接收的请求正在处理
 2XX：成功状态码       ， 表示请求正常处理
 3XX：重定向状态码    ，表示需要附加操作来完成请求
 4XX：客户端错误状态  ，表示服务器无法处理请求
 5XX：服务器错误状态  ，表示服务器处理请求出错

概括：整个XMLHttpRequest对象的生命周期应该包含如下阶段：
创建－初始化请求－发送请求－接收数据－解析数据－完成

二、JQuery实现

$.ajax({
    url:url, //请求的url地址
    dataType:"json", //返回格式为json
    async:true,//默认为true 异步
    data:{"id":"value"}, //data为传输的数据
    type:"GET", //请求方式 get/post/put/delete...
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});

三、使用AXIOS发送AJAX

GET

axios.get('/user？id=123')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

POST

axios.post('/user', {
	params{
	username: "abc",
	pwd: 123
	}
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

总结

每一种实现ajax的方案都有很多变化，这里只介绍最简单的实现方式。如有错误，请随意指正。