Ajax的几种方式jQuery简化：DOM、事件、ajax 以及还提供了一些JS没有的东西：必须引入jquery.js

jQuery简化：DOM、事件、ajax 以及还提供了一些JS没有的东西：

必须引入jquery.js文件

原生的ajax：

创建xhr核心对象：

var xhr=new XMLHttpRequest();
建立和服务器端的连接

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

向服务器端发送请求消息

1、GET请求
xhr.open("GET","xx.php?key=value&key=value...");
xhr.send(null);

2、POST请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&key=value...");

绑定状态监听事件： xhr.onreadystatechange=()=>{ if(xhr.status==200&&xhr.readyState==4){ xhr.responseText;//服务器端返回的JSON字符串 JSON.parse(xhr.responseText);//JSON对象 } }

jQuery简化的Ajax

1、第一层：最麻烦的，但也是最无敌最全面的

$.ajax({
	"url":"xx.php",//连接服务器端的地址，【必写】
	"type":"GET/POST",//请求的类型，默认值为get - 可选
	"data":"key=value&...",//请求的消息 - 可选
	"dataType":"HTML/JSON/XML/JSONP",//解析响应消息
   //   "jsonp":"callback",//通行令的名字
	"success":(data)=>{//ajax请求成功，才会执行，并且返回得到的数据，【必写】
		data;//服务器端返回的响应数据
	},
	"error":()=>{
		//只有报错后才会执行 - 直接不写，不需要记忆
	}
});

2、第二层：第一层的基础上进行了再次简化：3个API - 不能做跨域

1、最垃圾：

   $("xx").load("xx.php","key=value",data=>{

   })
       
   缺点:1、会将数据直接放到页面元素之中，document.write将页面元素给替换掉
	2、无法设置请求类型，只能是默认的GET
	3、无法帮我们脱衣服

2. 第二层的get方式

     2、$.get("xx.php","key=value",data=>{
         },"JSON")

3. 第二层的post方式

     3、$.post("xx.php","key=value",data=>{
         },"JSON")

3、第三层：特殊功能 - 跨域（拿别人电脑上的数据）

浏览器具有保护策略 - 同源策略：要求协议、域名、端口号必须相同，只要有一个不同就会触发此保护机制

跨域jQuery使用到了一个叫jsonp技术

   跨域语法：
  前端：
  $.getJSON("url?key=?","data",data=>{
	//key=? - jQuery自动传入一个值，其实是一个函数，后端需要接住后在调用：通行令函数
  })

  后端：echo $_GET["key"]."(".JSON_encode($arr).")";

目的： 1、简化版ajax 2、使用ajax去拿去别人电脑上的数据

4、滚动监听触发ajax

前端：

		var count=0;
		$(window).scroll(()=>{
			var sh=$(window).scrollTop()+innerHeight;//获取当前滚动条滚动到底部的位置
			var bh=$("body").height();//完整的页面的高度
			if(sh==bh){
				$.get("05server.php",`count=${count}`,data=>{
					//拿到data你要干啥子
					count+=2;
				},"JSON")
			}
		})

后端：

$sql="SELECT * FROM 表名 ORDER BY id DESC LIMIT 开始下标,个数;";


echo $_GET["callback"]."(".JSON_encode($arr).")";

Ajax的几种方式