Ajax的相关知识学习

1.Ajax实现步骤

1.1 创建XmlHttpRequest

var xhr = new XmlHttpRequest；

1.2 使用open方法，设置初始化参数

eg:xhr.open(方法类型（"get、post）","请求地址",boolean(true为异步，false同步))；

如果为post的时候，还需要设置请求头

eg：xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

1.3 使用send方法，发送设置好的请求

eg:xhr.send();当请求方式为get的时候，如果有需要传递参数，应放在open方法的请求地址后面用？拼接上需要传递的参数；如果是请求方式是post的时候，如果需要传递参数，应放在在send(XXX)方法中；

1.4 使用onreadystatechange属性，接收响应数据

xhr.onreadystatechange = function(){...}当readystate属性发生变化的时候，会触发这个设置的函数，并且执行里面的业务；当readystate状态为4的时候为数据会被完整传输过来，并且带着可使用的数据传递过来，为xhr对象在http请求中的最后一个状态；state的属性为一种标准的HTTP返回代码，如200代表成功，404代表服务器找不到请求的网页；

2.JQuery中实现Ajax

2.1 引入JS时的注意事项

2.1.1 引入的js文件执行是有先后顺序的，当放在头部的时候，如果js中的业务逻辑是控制DOM节点的相关操作，而此时DOM节点还未加载，则js的业务逻辑不会生效；当引入的js文件放在底部的时候，因为DOM节点已经加载，所以js中的业务逻辑会生效，并且会按照js引入的顺序进行加载。

2.1.2 当js引入放在头部的时候，怎么处理dom未加载的情况？可以使用read方法进行业务处理，设置为当DOM节点已经加载好后再执行业务代码

eg:$(document).ready(function(){$(''#val").html("在val节点加载后增加此内容")（相关业务代码）})

等价于:$(function(){$(''#val").html("在val节点加载后增加此内容")（相关业务代码）})

2.2 get、post、ajax方法

2.2.1 get方法的表达式为$.get(url,data,callback,type)，其中url为请求地址，data是请求参数（可以是json也可以是字符串，如果没有可以省略），callback是请求成功时候的回调函数，type是请求返回数据的类型，分为json、script、html、text、xml等；

eg:$.get("/XXX",function(){XXX},"script");

2.2.2 post方法的表达式为$.get(url,data,callback,type),和get方法基本相似，在请求发出去的时候请求参数是放在请求体之中

2.2.3 ajax方法的表达式为$.ajax(option)，其中option是json格式的配置参数，用于设置ajax请求

eg:$.ajax({

            type:"get或者post",
            url:"请求地址",

            data:发送到服务器的数据,将自动转换为请求字符串格式,GET 请求中将附加在 URL 后,如果是数组形式的数据会自动拆分并且用&进行拼接

            contentType:"application/x-www-form-urlencoded发送信息至服务器时内容编码类型"
            dataType:"请求返回数据的类型",
            success:function(data){相关成功后的业务逻辑},
            error:function(e){失败后的业务逻辑}
        });

3 适配兼容问题

3.1 适配浏览器兼容

var xhr = null;
if(window.XMLHttpRequest){
     xhr = new XMLHttpRequers;
}else{
     xhr = new ActiveOject("Microsoft.XMLHTTP");
}

3.2 适配get和post请求

var defaultParm ={
	type："get",
	url: "#",
	data: {},  
	async: true, //异步
	success:function(){}
}

//通过循环，将默认值赋值进去，如果本来有值，则使用传过来的参数的值，这样就可以确保整个对象都有值；
for(var key in option){
	defaultParm[key] = option[key];
}

var parm = "";
//参数的遍历和拼接
for(var key in defaultParm.data){
	parm += k + "=" + defaultParm.data[k] + "&";
}

//处理结尾拼接&
parm = parm.substr(0,parm.length - 1);

//get和post请求的适配，get是将参数拼装在url后面，post是将参数放在send中发送
if(defaultParm.type == "get"){
	xhr.open(defaultParm.type,defaultParm.url+ "?" + parm,defaultParm.async);
	xhr.send();
}else{
	xhr.open(defaultParm.type,defaultParm.url,defaultParm.async);
	xhr.setRequestHeader("COntent-type","application/x-www-form-urlencoded");
	xhr.send(parm);
}
//监听状态变化，并配置成功返回的函数
xhr.onreadystatechange = function(){
	if(xhr.readState == 4){
		if(xhr.status == 200){
			defaultParm.success(xhr.responseText);
		}
	}
}

3.3 app.js中配置服务器访问的地址

app.use(async function(ctx){
	if(xtx.path == "/请求地址"){
		//相关业务代码
                //ctx.request.body.参数 ，表现其中的参数
                //ctx.body = XXX,返回的数据

	}
})