ajax

77 阅读2分钟

1、概念:

       同步交互:用户向服务器端发起请求,直到服务器端进行响应的全过程,用户是不可以做其他事情的(等)
		 典型:表单提交、网址请求 - 都属于同步交互

	异步交互:用户向服务器端发起请求,直到服务器端进行响应的全过程,用户是可以做其他事情的(不等)
		 典型:ajax请求

2、Ajax:Asynchronous JavaScript And XML - 直译:异步的JavaScript和XML - 前端技术

不严格的定义:页面不完全刷新,只会导致页面局部发生改变的技术
其实我们早就见过异步技术/代码了:
		1、定时器 - 做特效
		2、mongoose操作数据库的增删改查 - 操作数据库
		3、ajax - 目的:在不刷新页面的情况下和服务器端进行交互 - 可以将服务器端的数据放到前端(比较验证、数据渲染)

3、如何使用:固定4步:
1、创建ajax核心对象:

var xhr=new XMLHttpRequest();

2、建立和服务器端的连接

xhr.open("GET/POST","路由");

3、向服务器端发送请求消息

xhr.send();//但是此方法很特殊:
1、如果你是GET请求,send方法会失效,但是还不能省略,必须写为:
xhr.open("GET","路由?key=value&key=value&...");
xhr.send(null);

2、如果你是POST请求,send方法可用,必须写为:- 暂时不能用
xhr.open("POST","路由");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&key=value&...");

get:获取 - ajax一般都是使用

get,去找服务器端那东西的 - 举例:跟安全性不挂钩的,搜索框
post:发送 - 举例:跟安全性挂钩,登录、注册

4、绑定状态监听事件

xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText - 服务器端相应的文本,ajax就难在你拿到东西了要干什么
	}
}

脱衣服

如何脱掉后端传来的数据

后端穿衣服:var jsonText=JSON.stringify(obj1);
前端脱衣服:var jsonObj=JSON.parse(jsonText);