实用js/jq的ajax详解

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

功能：节省用户操作时间，提高用户体验，局部刷新减少数据请求；

我们要知道，其实Ajax就是去请求后台接口拿数据的，前端拿到后台的数据后就用这些数据进行dom操作以相应的样式输出到页面中。（最难的地方就是对获取到的数据进行分析和处理并渲染到页面上）

一、我们首先来看一个get请求的ajax流程（js代码）：

//创建一个ajax对象(类似于打开浏览器)
var xhr = XMLHttpRequest
    ? new XMLHttpRequest()
    : new ActiveXObject('Microsoft.XMLHTTP'); //new ActiveXObject('Microsoft.XMLHTTP') 这个我们是对低版本IE浏览器进行兼容性处理

//使用ajax对象下面的open方法告知浏览器请求的方式（相当于在地址栏输入地址）
xhr.open('get','1.txt',true);

//提交（相当于按回车键）
xhr.send();    //在这一步才会发送网络请求（上面是准备工作）

//等待服务器返回内容
xhr.onreadystatechange = function() {    // 监测readyState状态值变化
    if ( xhr.readyState == 4 ) { // readyState状态值为4表示响应内容解析完成，可以在客户端调用了
        if ( xhr.status == 200) {  //200表示http请求正确
            alert( xhr.responseText ); // responseText 为后台返回的数据 
        } else {
            alert('出错了,Err：' + xhr.status);   //返回错误响应的http状态码
        }
    }
    
}

二、接下来我们详细分析一下请求ajax的流程：

1、创建一个ajax对象

var xhr = new XMLHttpRequest(); 

（创建了ajax对象之后才能使用ajax对象下面的方法和属性）

2、使用ajax对象下面的open()方法

open('get','url',true)方法
接收三个参数：
	1.请求方式（get、post 或者其他）
	2.地址（请求的后台接口地址）
	3.是否异步（true为异步；false为同步）

异步：非阻塞 ajax请求的代码不会影响后面代码的执行（ajax请求的代码就算没执行完也能执行后面的代码）
同步：阻塞 ajax请求的代码会影响后面代码的执行（ajax请求的关联的代码一定要执行完才能继续执行后面的代码）

（1）、get请求方式
get请求方式是通过url？后面的参数值传送的（根据后端提供的接口请求参数来传入传输的，多个参数之间用&连接）（格式要正确填写）
（ajax参数的格式都是 参数名1=参数值1&参数名2=参数值2....）

注意：get请求存在如下两个问题
1.会缓存（其实我们后台数据已经变了，我们希望在刷新地址栏的时候，页面数据会变动。但是因为get请求方式地址不改变，内容就不会变。） 这时我们需要在url？后面连接一个随机数，时间戳new Date().getTime()（这样就每一次访问的都是不一样的地址）
2.中文会出现乱码 用编码encodeURI()解决

如：

xhr.open('get','get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);

（2）、post请求方式
请求数据的参数是在请求头中（那么数据就不能直接在url后面传入参数了）。

xhr.open('post','post.php',true);
//一定要申明发送的数据类型（ajax没有默认的编码方式，表单提交有）
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//post请求方式，数据放在send()里面作为参数传递
xhr.send('username=刘伟&age=30');

注意：post没有缓存问题（无需设置时间戳），也不会有出现中文乱码问题（无需编码）

3、使用ajax对象下面的send()方法

向服务器发送请求。
（1）、get方式，无需传入参数
xhr.send()
（2）、post方式，需要传入后台需要的参数
xhr.send(‘多个参数使用&分隔’)

4、等待服务器响应并返回数据

下面介绍ajax对象下面的属性，当有它们的值有相关变化时，说明服务器有相关的响应了。

readyState : ajax工作状态（有五个值）
0 （初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成,已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了

onreadystatechange : 当readyState改变的时候触发(可能会触发很多次)

responseText : ajax请求返回的数据内容就被存放到这个属性下面（通过调用这个属性就能获取到返回的内容，均为字符串格式）

status : 服务器状态，http状态码（容错处理）

http状态码：
1xx：指示信息——表示请求已接收，继续处理
2xx：成功——表示请求已经被成功接收
3xx：重定向——要完成的请求必须进行进一步操作
4xx：客户端错误——请求有语法错误或者请求无法实现
5xx：服务器错误——服务器未能实现合法的请求

三、jq和 js的完整请求方式（只介绍常用的语法）

我们都知道在jquery中使用ajax很方便，因为已经帮我们封装好了。

1、jquery使用ajax：

$.ajax({
	url : '请求的接口地址url',
	data : '需要传给后台的参数',
	type : 'post',   //默认是get
	dataType:"json",  // 预期服务器返回的数据类型,默认为json
	success : function(data){   //成功获取数据后的回调函数
		// data为后台返回的数据，通过处理data数据来渲染页面
	},
	error : function(err){        //获取数据失败后的回调函数
		// err 为后台请求错误后返回的错误信息
		console.log(err)
	}
});

2、javascript封装ajax（只封装了get和post请求方式），使得像jquery的使用方式

//封装实参覆盖形参的函数
function extend(obj1, obj2) {
    for (var attr in obj2) {
        obj1[attr] = obj2[attr];
    }
}
// 将data中传入的json对象转为name=winne&age=18&like={"jk":2}&arr=[1,2]这种格式
function paramData (json) {
	let str = ''
	for (let key in json) {
		if (typeof json[key] === 'object') {
			str += `${key}=${JSON.stringify(json[key])}&`
		}else{
			str += `${key}=${json[key]}&`
		}
		
	}
	return str.substring(0, str.length - 1)
	
	// 上面的代码可以用下面的代码代替
	// let resultStr = Object.keys(json).map( (key) => {
    //	let value = json[key]
   	//	if (typeof value === 'object') {
    // 		value = JSON.stringify(value)
    //	}
    //	return `${key}=${value}`
   // }).join('&')
   // return resultStr
}
function ajax(opt) {
    defaultOpt = {  //默认函数参数
    "method":'get', //默认为get传输
    "data":'',  //默认没有参数
    "url":'',
    "dataType":"json", //默认返回json类型的数据
    "success": function(data){} //默认获取到数据后什么都不做
    },
    "error":function(err){}
   extend(defaultOpt, opt);  //配置参数赋值给默认参数
   // 创建一个支持ajax的对象
    var xhr = XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject('Microsoft.XMLHTTP'); 
    if (defaultOpt.method == 'get' && defaultOpt.data) {  //调用默认参数
        defaultOpt.url += '?' + paramData(defaultOpt.data); //get请求的完整url拼接
    }
    xhr.open(defaultOpt.method:toLowerCase() , defaultOpt.url, true);
    if (defaultOpt.method:toLowerCase()  == 'get') {
        xhr.send();
    } else if(defaultOpt.method:toLowerCase()  == 'post'){
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(paramData(defaultOpt.data));
    }
    //等待服务器响应并返回数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {                
                defaultOpt.success && defaultOpt.success(xhr.responseText);  //可变的地方用参数传入，代码块就用函数传入

            } else {
				defaultOpt.error&& defaultOpt.error(xhr);
               // console.log('出错了' + xhr);
            }
        }
    }
}


// 调用js封装好后的ajax
ajax({
	url : '请求的接口地址url',
	data : { // 传给后台的参数
		name: 'winne',
		age: 18,
		like: {jk: 2},
		arr: [1, 2]
	},
	type : 'post',   //默认是get
	success : function(data){   //成功获取数据后的回调函数
		// data为后台返回的数据，通过处理data数据来渲染页面
		// 我们最常用的是JSON.parse(data)来把字符串json转化为真正的json来进行数据处理；
		// 使用 JSON.stringfy(json)来把json数据转化为json字符串
	},
	error : function(err){        //获取数据失败后的回调函数
		// err 为后台请求错误后返回的错误信息
		console.log(err)
	}
})