认识全栈二:前端通过Ajax请求php服务操作数据库

146 阅读1分钟

前端通过Ajax请求php服务操作数据库

1.同步交互和异步交互:

同步: 客户端向服务器端发送请求直到服务器端进行响应的全过程,用户只能等待 - 不严格的说法:整个页面都会刷新一下

    举例:1、网址提交     2、表单提交

异步: 客户端向服务器端发送请求直到服务器端进行响应的全过程,用户不必等待 - 不严格的说法:局部页面会进行刷新

    举例: 目前所学的 1、ajax

目前我们就了解有异步的技术:定时器 , 就算定时器里面的操作在耗时,也不会影响后续代码,用户也能看到后续代码的效果

1、*****ajax:

asynchronous javascript and xml:直译:异步的javascript和xml

    好处:1、不会让用户等待
      2、不会刷新页面也能和服务器端进行交互(比表单强)
      3、将服务器端的数据获取到前端页面

使用步骤:4步

1、创建ajax核心对象xhr

   var xhr=new XMLHttpRequest();

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

   xhr.open("GET/POST","xx.php");

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

   xhr.send()

特殊:

	  1、GET方式,xhr.send失效,还不能省略,必须写为xhr.send(null),请求消息需要拼接到url?后面
		xhr.open("GET","xx.php?key=value&key=value...");
		xhr.send(null);

	  2、POST方式,xhr.send可用,在之前设置请求头部
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send("key=value&...");

4、绑定监听状态改变事件

   xhr.onreadystatechange=()=>{
	if(xhr.readyState==4&&xhr.status==200){
		xhr.responseText;//php放在页面上的东西 - 服务器端响应的消息
	}
   }   

注 : ajax就是固定的方法:难就难在你拿到数据后要干什么