Ajax知识点

ajax

优点：支持异步请求，实现页面的局部刷新
一、Ajax的创建
1、创建ajax对象

let xhr;
if(window.XMLHttprequest){
	xhr=new XMLHttpRequest();
}else{
	xhr = new ActiveXObject("Microsoft.XMLHttp");
}

2、准备发送请求

xhr.open("get",url,true);

3、发送请求

xhr.send(null);

4、监听请求的发送
每当readyState发生改变时，就会调用onreadystatechange函数

xhr.onreadystatechange = funcion(){
	if(xhr.readyState==4 && xhr.status ==200){
		node.innerHTML = xhr.responseText;
	}
}

二、参数传递
1、get参数传递
参数直接挂载到url上，即url?key=value &…
send();
2、post参数传递
参数封装到请求体中
1）设置请求头
setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
2）发送请求
send(key=value&…)
三、json
json是一个键值对的字符串，格式和js中的对象有点像，但对象不是字符串。
json与对象互相转换：
1)json转为对象
JSON.parse(str) 只能解析json字符串
eval(str) 老版本，解析字符串并执行
2)对象转为json
JSON.stringify(jsonObj)

四、jquery中的ajax
1、常用参数
url/type/data/dataType(xml,html,script,json,text,jsonp)/success/error
2、json-server用法
1）安装json-server
npm install -g json-server
2)监听json文件
json-server --watch data.json
3)restful url api (增删改查）
查询–get
新增–post
修改–put
删除–delete
3、跨域
解决方式：
1）动态生成script标签；

const scriptNode = document.createElement("script");
scriptNode.src=url;
document.querySelector("head").append(scriptNode);

2)jsonp
原理：向服务器发送一个函数，返回一个回调函数执行，调用本地的函数。